react-klasha/ionic-test/node_modules/.cache/babel-loader/4cb8bf24243a61c866bbf6e9e89f3509.json

This is an reactJS library for implementing klasha payment gateway

{"ast":null,"code":"import React, { useContext, useRef, useEffect, Fragment, useMemo, useState } from 'react';\nimport { defineCustomElements } from '@ionic/core/loader';\nimport { addIcons } from 'ionicons';\nimport { arrowBackSharp, caretBackSharp, chevronBack, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderTwoSharp, reorderThreeOutline, searchOutline, searchSharp } from 'ionicons/icons';\nimport { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, alertController, loadingController, toastController as toastController$1, pickerController, actionSheetController as actionSheetController$1, modalController, popoverController, createAnimation } from '@ionic/core';\nexport { IonicSafeString, createAnimation, createGesture, iosTransitionAnimation, mdTransitionAnimation, setupConfig } from '@ionic/core';\nimport { __rest } from 'tslib';\nimport ReactDOM from 'react-dom';\nconst IonLifeCycleContext = /*@__PURE__*/React.createContext({\n  onIonViewWillEnter: () => {\n    return;\n  },\n  ionViewWillEnter: () => {\n    return;\n  },\n  onIonViewDidEnter: () => {\n    return;\n  },\n  ionViewDidEnter: () => {\n    return;\n  },\n  onIonViewWillLeave: () => {\n    return;\n  },\n  ionViewWillLeave: () => {\n    return;\n  },\n  onIonViewDidLeave: () => {\n    return;\n  },\n  ionViewDidLeave: () => {\n    return;\n  }\n});\nconst DefaultIonLifeCycleContext = class {\n  constructor() {\n    this.ionViewWillEnterCallbacks = [];\n    this.ionViewDidEnterCallbacks = [];\n    this.ionViewWillLeaveCallbacks = [];\n    this.ionViewDidLeaveCallbacks = [];\n  }\n\n  onIonViewWillEnter(callback) {\n    if (callback.id) {\n      const index = this.ionViewWillEnterCallbacks.findIndex(x => x.id === callback.id);\n\n      if (index > -1) {\n        this.ionViewWillEnterCallbacks[index] = callback;\n      } else {\n        this.ionViewWillEnterCallbacks.push(callback);\n      }\n    } else {\n      this.ionViewWillEnterCallbacks.push(callback);\n    }\n  }\n\n  ionViewWillEnter() {\n    this.ionViewWillEnterCallbacks.forEach(cb => cb());\n  }\n\n  onIonViewDidEnter(callback) {\n    if (callback.id) {\n      const index = this.ionViewDidEnterCallbacks.findIndex(x => x.id === callback.id);\n\n      if (index > -1) {\n        this.ionViewDidEnterCallbacks[index] = callback;\n      } else {\n        this.ionViewDidEnterCallbacks.push(callback);\n      }\n    } else {\n      this.ionViewDidEnterCallbacks.push(callback);\n    }\n  }\n\n  ionViewDidEnter() {\n    this.ionViewDidEnterCallbacks.forEach(cb => cb());\n  }\n\n  onIonViewWillLeave(callback) {\n    if (callback.id) {\n      const index = this.ionViewWillLeaveCallbacks.findIndex(x => x.id === callback.id);\n\n      if (index > -1) {\n        this.ionViewWillLeaveCallbacks[index] = callback;\n      } else {\n        this.ionViewWillLeaveCallbacks.push(callback);\n      }\n    } else {\n      this.ionViewWillLeaveCallbacks.push(callback);\n    }\n  }\n\n  ionViewWillLeave() {\n    this.ionViewWillLeaveCallbacks.forEach(cb => cb());\n  }\n\n  onIonViewDidLeave(callback) {\n    if (callback.id) {\n      const index = this.ionViewDidLeaveCallbacks.findIndex(x => x.id === callback.id);\n\n      if (index > -1) {\n        this.ionViewDidLeaveCallbacks[index] = callback;\n      } else {\n        this.ionViewDidLeaveCallbacks.push(callback);\n      }\n    } else {\n      this.ionViewDidLeaveCallbacks.push(callback);\n    }\n  }\n\n  ionViewDidLeave() {\n    this.ionViewDidLeaveCallbacks.forEach(cb => cb());\n    this.componentCanBeDestroyed();\n  }\n\n  onComponentCanBeDestroyed(callback) {\n    this.componentCanBeDestroyedCallback = callback;\n  }\n\n  componentCanBeDestroyed() {\n    if (this.componentCanBeDestroyedCallback) {\n      this.componentCanBeDestroyedCallback();\n    }\n  }\n\n};\n\nconst withIonLifeCycle = WrappedComponent => {\n  return class IonLifeCycle extends React.Component {\n    constructor(props) {\n      super(props);\n      this.componentRef = React.createRef();\n    }\n\n    componentDidMount() {\n      const element = this.componentRef.current;\n      this.context.onIonViewWillEnter(() => {\n        if (element && element.ionViewWillEnter) {\n          element.ionViewWillEnter();\n        }\n      });\n      this.context.onIonViewDidEnter(() => {\n        if (element && element.ionViewDidEnter) {\n          element.ionViewDidEnter();\n        }\n      });\n      this.context.onIonViewWillLeave(() => {\n        if (element && element.ionViewWillLeave) {\n          element.ionViewWillLeave();\n        }\n      });\n      this.context.onIonViewDidLeave(() => {\n        if (element && element.ionViewDidLeave) {\n          element.ionViewDidLeave();\n        }\n      });\n    }\n\n    render() {\n      return React.createElement(IonLifeCycleContext.Consumer, null, context => {\n        this.context = context;\n        return React.createElement(WrappedComponent, Object.assign({\n          ref: this.componentRef\n        }, this.props));\n      });\n    }\n\n  };\n};\n\nconst useIonViewWillEnter = (callback, deps = []) => {\n  const context = useContext(IonLifeCycleContext);\n  const id = useRef();\n  id.current = id.current || Math.floor(Math.random() * 1000000);\n  useEffect(() => {\n    callback.id = id.current;\n    context.onIonViewWillEnter(callback);\n  }, deps);\n};\n\nconst useIonViewDidEnter = (callback, deps = []) => {\n  const context = useContext(IonLifeCycleContext);\n  const id = useRef();\n  id.current = id.current || Math.floor(Math.random() * 1000000);\n  useEffect(() => {\n    callback.id = id.current;\n    context.onIonViewDidEnter(callback);\n  }, deps);\n};\n\nconst useIonViewWillLeave = (callback, deps = []) => {\n  const context = useContext(IonLifeCycleContext);\n  const id = useRef();\n  id.current = id.current || Math.floor(Math.random() * 1000000);\n  useEffect(() => {\n    callback.id = id.current;\n    context.onIonViewWillLeave(callback);\n  }, deps);\n};\n\nconst useIonViewDidLeave = (callback, deps = []) => {\n  const context = useContext(IonLifeCycleContext);\n  const id = useRef();\n  id.current = id.current || Math.floor(Math.random() * 1000000);\n  useEffect(() => {\n    callback.id = id.current;\n    context.onIonViewDidLeave(callback);\n  }, deps);\n};\n\nconst NavContext = /*@__PURE__*/React.createContext({\n  getIonRedirect: () => undefined,\n  getIonRoute: () => undefined,\n  getPageManager: () => undefined,\n  getStackManager: () => undefined,\n  goBack: route => {\n    if (typeof window !== 'undefined') {\n      if (typeof route === 'string') {\n        window.location.pathname = route;\n      } else {\n        window.history.back();\n      }\n    }\n  },\n  navigate: path => {\n    if (typeof window !== 'undefined') {\n      window.location.pathname = path;\n    }\n  },\n  hasIonicRouter: () => false,\n  routeInfo: undefined,\n  setCurrentTab: () => undefined,\n  changeTab: (_tab, path) => {\n    if (typeof window !== 'undefined') {\n      window.location.pathname = path;\n    }\n  },\n  resetTab: (_tab, path) => {\n    if (typeof window !== 'undefined') {\n      window.location.pathname = path;\n    }\n  }\n});\n\nconst dashToPascalCase = str => str.toLowerCase().split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');\n\nconst camelToDashCase = str => str.replace(/([A-Z])/g, m => `-${m[0].toLowerCase()}`);\n\nconst attachProps = (node, newProps, oldProps = {}) => {\n  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first\n  if (node instanceof Element) {\n    // add any classes in className to the class list\n    const className = getClassName(node.classList, newProps, oldProps);\n\n    if (className !== '') {\n      node.className = className;\n    }\n\n    Object.keys(newProps).forEach(name => {\n      if (name === 'children' || name === 'style' || name === 'ref' || name === 'class' || name === 'className' || name === 'forwardedRef') {\n        return;\n      }\n\n      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n        const eventName = name.substring(2);\n        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);\n\n        if (!isCoveredByReact(eventNameLc)) {\n          syncEvent(node, eventNameLc, newProps[name]);\n        }\n      } else {\n        const propType = typeof newProps[name];\n\n        if (propType === 'string') {\n          node.setAttribute(camelToDashCase(name), newProps[name]);\n        } else {\n          node[name] = newProps[name];\n        }\n      }\n    });\n  }\n};\n\nconst getClassName = (classList, newProps, oldProps) => {\n  const newClassProp = newProps.className || newProps.class;\n  const oldClassProp = oldProps.className || oldProps.class; // map the classes to Maps for performance\n\n  const currentClasses = arrayToMap(classList);\n  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);\n  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);\n  const finalClassNames = []; // loop through each of the current classes on the component\n  // to see if it should be a part of the classNames added\n\n  currentClasses.forEach(currentClass => {\n    if (incomingPropClasses.has(currentClass)) {\n      // add it as its already included in classnames coming in from newProps\n      finalClassNames.push(currentClass);\n      incomingPropClasses.delete(currentClass);\n    } else if (!oldPropClasses.has(currentClass)) {\n      // add it as it has NOT been removed by user\n      finalClassNames.push(currentClass);\n    }\n  });\n  incomingPropClasses.forEach(s => finalClassNames.push(s));\n  return finalClassNames.join(' ');\n};\n/**\n * Checks if an event is supported in the current execution environment.\n * @license Modernizr 3.0.0pre (Custom Build) | MIT\n */\n\n\nconst isCoveredByReact = eventNameSuffix => {\n  if (typeof document === 'undefined') {\n    return true;\n  } else {\n    const eventName = 'on' + eventNameSuffix;\n    let isSupported = (eventName in document);\n\n    if (!isSupported) {\n      const element = document.createElement('div');\n      element.setAttribute(eventName, 'return;');\n      isSupported = typeof element[eventName] === 'function';\n    }\n\n    return isSupported;\n  }\n};\n\nconst syncEvent = (node, eventName, newEventHandler) => {\n  const eventStore = node.__events || (node.__events = {});\n  const oldEventHandler = eventStore[eventName]; // Remove old listener so they don't double up.\n\n  if (oldEventHandler) {\n    node.removeEventListener(eventName, oldEventHandler);\n  } // Bind new listener.\n\n\n  node.addEventListener(eventName, eventStore[eventName] = function handler(e) {\n    if (newEventHandler) {\n      newEventHandler.call(this, e);\n    }\n  });\n};\n\nconst arrayToMap = arr => {\n  const map = new Map();\n  arr.forEach(s => map.set(s, s));\n  return map;\n};\n\nconst createForwardRef = (ReactComponent, displayName) => {\n  const forwardRef = (props, ref) => {\n    return React.createElement(ReactComponent, Object.assign({}, props, {\n      forwardedRef: ref\n    }));\n  };\n\n  forwardRef.displayName = displayName;\n  return React.forwardRef(forwardRef);\n};\n\nconst setRef = (ref, value) => {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref != null) {\n    // Cast as a MutableRef so we can assign current\n    ref.current = value;\n  }\n};\n\nconst mergeRefs = (...refs) => {\n  return value => {\n    refs.forEach(ref => {\n      setRef(ref, value);\n    });\n  };\n};\n\nconst isPlatform = platform => {\n  return isPlatform$1(window, platform);\n};\n\nconst getPlatforms = () => {\n  return getPlatforms$1(window);\n};\n\nconst getConfig = () => {\n  if (typeof window !== 'undefined') {\n    const Ionic = window.Ionic;\n\n    if (Ionic && Ionic.config) {\n      return Ionic.config;\n    }\n  }\n\n  return null;\n};\n\nconst createReactComponent = (tagName, routerLinkComponent = false) => {\n  const displayName = dashToPascalCase(tagName);\n  const ReactComponent = class extends React.Component {\n    constructor(props) {\n      super(props);\n\n      this.handleClick = e => {\n        const {\n          routerLink,\n          routerDirection,\n          routerOptions,\n          routerAnimation\n        } = this.props;\n\n        if (routerLink !== undefined) {\n          e.preventDefault();\n          this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);\n        }\n      }; // Create a local ref to to attach props to the wrapped element.\n\n\n      this.ref = React.createRef(); // React refs must be stable (not created inline).\n\n      this.stableMergedRefs = mergeRefs(this.ref, this.props.forwardedRef);\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n    }\n\n    componentDidUpdate(prevProps) {\n      const node = this.ref.current;\n      attachProps(node, this.props, prevProps);\n    }\n\n    render() {\n      const _a = this.props,\n            {\n        children,\n        forwardedRef,\n        style,\n        className,\n        ref\n      } = _a,\n            cProps = __rest(_a, [\"children\", \"forwardedRef\", \"style\", \"className\", \"ref\"]);\n\n      const propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n\n          if (isCoveredByReact(eventName)) {\n            acc[name] = cProps[name];\n          }\n        } else if (['string', 'boolean', 'number'].includes(typeof cProps[name])) {\n          acc[camelToDashCase(name)] = cProps[name];\n        }\n\n        return acc;\n      }, {});\n      const newProps = Object.assign(Object.assign({}, propsToPass), {\n        ref: this.stableMergedRefs,\n        style\n      });\n\n      if (routerLinkComponent) {\n        if (this.props.routerLink && !this.props.href) {\n          newProps.href = this.props.routerLink;\n        }\n\n        if (newProps.onClick) {\n          const oldClick = newProps.onClick;\n\n          newProps.onClick = e => {\n            oldClick(e);\n\n            if (!e.defaultPrevented) {\n              this.handleClick(e);\n            }\n          };\n        } else {\n          newProps.onClick = this.handleClick;\n        }\n      }\n\n      return React.createElement(tagName, newProps, children);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    static get contextType() {\n      return NavContext;\n    }\n\n  };\n  return createForwardRef(ReactComponent, displayName);\n}; // ionic/core\n\n\nconst IonApp = /*@__PURE__*/createReactComponent('ion-app');\nconst IonTab = /*@__PURE__*/createReactComponent('ion-tab');\nconst IonRouterLink = /*@__PURE__*/createReactComponent('ion-router-link', true);\nconst IonAvatar = /*@__PURE__*/createReactComponent('ion-avatar');\nconst IonBackdrop = /*@__PURE__*/createReactComponent('ion-backdrop');\nconst IonBadge = /*@__PURE__*/createReactComponent('ion-badge');\nconst IonButton = /*@__PURE__*/createReactComponent('ion-button', true);\nconst IonButtons = /*@__PURE__*/createReactComponent('ion-buttons');\nconst IonCard = /*@__PURE__*/createReactComponent('ion-card', true);\nconst IonCardContent = /*@__PURE__*/createReactComponent('ion-card-content');\nconst IonCardHeader = /*@__PURE__*/createReactComponent('ion-card-header');\nconst IonCardSubtitle = /*@__PURE__*/createReactComponent('ion-card-subtitle');\nconst IonCardTitle = /*@__PURE__*/createReactComponent('ion-card-title');\nconst IonCheckbox = /*@__PURE__*/createReactComponent('ion-checkbox');\nconst IonCol = /*@__PURE__*/createReactComponent('ion-col');\nconst IonContent = /*@__PURE__*/createReactComponent('ion-content');\nconst IonChip = /*@__PURE__*/createReactComponent('ion-chip');\nconst IonDatetime = /*@__PURE__*/createReactComponent('ion-datetime');\nconst IonFab = /*@__PURE__*/createReactComponent('ion-fab');\nconst IonFabButton = /*@__PURE__*/createReactComponent('ion-fab-button', true);\nconst IonFabList = /*@__PURE__*/createReactComponent('ion-fab-list');\nconst IonFooter = /*@__PURE__*/createReactComponent('ion-footer');\nconst IonGrid = /*@__PURE__*/createReactComponent('ion-grid');\nconst IonHeader = /*@__PURE__*/createReactComponent('ion-header');\nconst IonImg = /*@__PURE__*/createReactComponent('ion-img');\nconst IonInfiniteScroll = /*@__PURE__*/createReactComponent('ion-infinite-scroll');\nconst IonInfiniteScrollContent = /*@__PURE__*/createReactComponent('ion-infinite-scroll-content');\nconst IonInput = /*@__PURE__*/createReactComponent('ion-input');\nconst IonItem = /*@__PURE__*/createReactComponent('ion-item', true);\nconst IonItemDivider = /*@__PURE__*/createReactComponent('ion-item-divider');\nconst IonItemGroup = /*@__PURE__*/createReactComponent('ion-item-group');\nconst IonItemOption = /*@__PURE__*/createReactComponent('ion-item-option', true);\nconst IonItemOptions = /*@__PURE__*/createReactComponent('ion-item-options');\nconst IonItemSliding = /*@__PURE__*/createReactComponent('ion-item-sliding');\nconst IonLabel = /*@__PURE__*/createReactComponent('ion-label');\nconst IonList = /*@__PURE__*/createReactComponent('ion-list');\nconst IonListHeader = /*@__PURE__*/createReactComponent('ion-list-header');\nconst IonMenu = /*@__PURE__*/createReactComponent('ion-menu');\nconst IonMenuButton = /*@__PURE__*/createReactComponent('ion-menu-button');\nconst IonMenuToggle = /*@__PURE__*/createReactComponent('ion-menu-toggle');\nconst IonNote = /*@__PURE__*/createReactComponent('ion-note');\nconst IonPickerColumn = /*@__PURE__*/createReactComponent('ion-picker-column');\nconst IonNav = /*@__PURE__*/createReactComponent('ion-nav');\nconst IonProgressBar = /*@__PURE__*/createReactComponent('ion-progress-bar');\nconst IonRadio = /*@__PURE__*/createReactComponent('ion-radio');\nconst IonRadioGroup = /*@__PURE__*/createReactComponent('ion-radio-group');\nconst IonRange = /*@__PURE__*/createReactComponent('ion-range');\nconst IonRefresher = /*@__PURE__*/createReactComponent('ion-refresher');\nconst IonRefresherContent = /*@__PURE__*/createReactComponent('ion-refresher-content');\nconst IonReorder = /*@__PURE__*/createReactComponent('ion-reorder');\nconst IonReorderGroup = /*@__PURE__*/createReactComponent('ion-reorder-group');\nconst IonRippleEffect = /*@__PURE__*/createReactComponent('ion-ripple-effect');\nconst IonRow = /*@__PURE__*/createReactComponent('ion-row');\nconst IonSearchbar = /*@__PURE__*/createReactComponent('ion-searchbar');\nconst IonSegment = /*@__PURE__*/createReactComponent('ion-segment');\nconst IonSegmentButton = /*@__PURE__*/createReactComponent('ion-segment-button');\nconst IonSelect = /*@__PURE__*/createReactComponent('ion-select');\nconst IonSelectOption = /*@__PURE__*/createReactComponent('ion-select-option');\nconst IonSelectPopover = /*@__PURE__*/createReactComponent('ion-select-popover');\nconst IonSkeletonText = /*@__PURE__*/createReactComponent('ion-skeleton-text');\nconst IonSlide = /*@__PURE__*/createReactComponent('ion-slide');\nconst IonSlides = /*@__PURE__*/createReactComponent('ion-slides');\nconst IonSpinner = /*@__PURE__*/createReactComponent('ion-spinner');\nconst IonSplitPane = /*@__PURE__*/createReactComponent('ion-split-pane');\nconst IonText = /*@__PURE__*/createReactComponent('ion-text');\nconst IonTextarea = /*@__PURE__*/createReactComponent('ion-textarea');\nconst IonThumbnail = /*@__PURE__*/createReactComponent('ion-thumbnail');\nconst IonTitle = /*@__PURE__*/createReactComponent('ion-title');\nconst IonToggle = /*@__PURE__*/createReactComponent('ion-toggle');\nconst IonToolbar = /*@__PURE__*/createReactComponent('ion-toolbar');\nconst IonVirtualScroll = /*@__PURE__*/createReactComponent('ion-virtual-scroll');\n\nconst createControllerComponent = (displayName, controller) => {\n  const didDismissEventName = `on${displayName}DidDismiss`;\n  const didPresentEventName = `on${displayName}DidPresent`;\n  const willDismissEventName = `on${displayName}WillDismiss`;\n  const willPresentEventName = `on${displayName}WillPresent`;\n\n  class Overlay extends React.Component {\n    constructor(props) {\n      super(props);\n      this.isUnmounted = false;\n      this.handleDismiss = this.handleDismiss.bind(this);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    async componentDidMount() {\n      const {\n        isOpen\n      } = this.props;\n\n      if (isOpen) {\n        this.present();\n      }\n    }\n\n    componentWillUnmount() {\n      this.isUnmounted = true;\n\n      if (this.overlay) {\n        this.overlay.dismiss();\n      }\n    }\n\n    async componentDidUpdate(prevProps) {\n      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n        this.present(prevProps);\n      }\n\n      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {\n        await this.overlay.dismiss();\n      }\n    }\n\n    handleDismiss(event) {\n      if (this.props.onDidDismiss) {\n        this.props.onDidDismiss(event);\n      }\n\n      setRef(this.props.forwardedRef, null);\n    }\n\n    async present(prevProps) {\n      const _a = this.props,\n            cProps = __rest(_a, [\"isOpen\", \"onDidDismiss\", \"onDidPresent\", \"onWillDismiss\", \"onWillPresent\"]);\n\n      this.overlay = await controller.create(Object.assign({}, cProps));\n      attachProps(this.overlay, {\n        [didDismissEventName]: this.handleDismiss,\n        [didPresentEventName]: e => this.props.onDidPresent && this.props.onDidPresent(e),\n        [willDismissEventName]: e => this.props.onWillDismiss && this.props.onWillDismiss(e),\n        [willPresentEventName]: e => this.props.onWillPresent && this.props.onWillPresent(e)\n      }, prevProps); // Check isOpen again since the value could have changed during the async call to controller.create\n      // It's also possible for the component to have become unmounted.\n\n      if (this.props.isOpen === true && this.isUnmounted === false) {\n        setRef(this.props.forwardedRef, this.overlay);\n        await this.overlay.present();\n      }\n    }\n\n    render() {\n      return null;\n    }\n\n  }\n\n  return React.forwardRef((props, ref) => {\n    return React.createElement(Overlay, Object.assign({}, props, {\n      forwardedRef: ref\n    }));\n  });\n};\n\nconst IonAlert = /*@__PURE__*/createControllerComponent('IonAlert', alertController);\nconst IonLoading = /*@__PURE__*/createControllerComponent('IonLoading', loadingController);\nconst toastController = {\n  create: options => toastController$1.create(options),\n  dismiss: (data, role, id) => toastController$1.dismiss(data, role, id),\n  getTop: () => toastController$1.getTop()\n};\nconst IonToast = /*@__PURE__*/createControllerComponent('IonToast', toastController);\nconst IonPicker = /*@__PURE__*/createControllerComponent('IonPicker', pickerController);\n\nconst createOverlayComponent = (displayName, controller) => {\n  const didDismissEventName = `on${displayName}DidDismiss`;\n  const didPresentEventName = `on${displayName}DidPresent`;\n  const willDismissEventName = `on${displayName}WillDismiss`;\n  const willPresentEventName = `on${displayName}WillPresent`;\n  let isDismissing = false;\n\n  class Overlay extends React.Component {\n    constructor(props) {\n      super(props);\n\n      if (typeof document !== 'undefined') {\n        this.el = document.createElement('div');\n      }\n\n      this.handleDismiss = this.handleDismiss.bind(this);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    componentDidMount() {\n      if (this.props.isOpen) {\n        this.present();\n      }\n    }\n\n    componentWillUnmount() {\n      if (this.overlay) {\n        this.overlay.dismiss();\n      }\n    }\n\n    handleDismiss(event) {\n      if (this.props.onDidDismiss) {\n        this.props.onDidDismiss(event);\n      }\n\n      setRef(this.props.forwardedRef, null);\n    }\n\n    shouldComponentUpdate(nextProps) {\n      // Check if the overlay component is about to dismiss\n      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {\n        isDismissing = true;\n      }\n\n      return true;\n    }\n\n    async componentDidUpdate(prevProps) {\n      if (this.overlay) {\n        attachProps(this.overlay, this.props, prevProps);\n      }\n\n      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n        this.present(prevProps);\n      }\n\n      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {\n        await this.overlay.dismiss();\n        isDismissing = false;\n        /**\n         * Now that the overlay is dismissed\n         * we need to render again so that any\n         * inner components will be unmounted\n         */\n\n        this.forceUpdate();\n      }\n    }\n\n    async present(prevProps) {\n      const _a = this.props,\n            cProps = __rest(_a, [\"children\", \"isOpen\", \"onDidDismiss\", \"onDidPresent\", \"onWillDismiss\", \"onWillPresent\"]);\n\n      const elementProps = Object.assign(Object.assign({}, cProps), {\n        ref: this.props.forwardedRef,\n        [didDismissEventName]: this.handleDismiss,\n        [didPresentEventName]: e => this.props.onDidPresent && this.props.onDidPresent(e),\n        [willDismissEventName]: e => this.props.onWillDismiss && this.props.onWillDismiss(e),\n        [willPresentEventName]: e => this.props.onWillPresent && this.props.onWillPresent(e)\n      });\n      this.overlay = await controller.create(Object.assign(Object.assign({}, elementProps), {\n        component: this.el,\n        componentProps: {}\n      }));\n      setRef(this.props.forwardedRef, this.overlay);\n      attachProps(this.overlay, elementProps, prevProps);\n      await this.overlay.present();\n    }\n\n    render() {\n      /**\n       * Continue to render the component even when\n       * overlay is dismissing otherwise component\n       * will be hidden before animation is done.\n       */\n      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);\n    }\n\n  }\n\n  return React.forwardRef((props, ref) => {\n    return React.createElement(Overlay, Object.assign({}, props, {\n      forwardedRef: ref\n    }));\n  });\n};\n\nconst actionSheetController = {\n  create: options => actionSheetController$1.create(options),\n  dismiss: (data, role, id) => actionSheetController$1.dismiss(data, role, id),\n  getTop: () => actionSheetController$1.getTop()\n};\nconst IonActionSheet = /*@__PURE__*/createOverlayComponent('IonActionSheet', actionSheetController);\nconst IonModal = /*@__PURE__*/createOverlayComponent('IonModal', modalController);\nconst IonPopover = /*@__PURE__*/createOverlayComponent('IonPopover', popoverController);\nconst StackContext = React.createContext({\n  registerIonPage: () => undefined,\n  isInOutlet: () => false\n});\n\nclass PageManager extends React.PureComponent {\n  constructor(props) {\n    super(props);\n    this.ionPageElementRef = React.createRef(); // React refs must be stable (not created inline).\n\n    this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);\n  }\n\n  componentDidMount() {\n    if (this.ionPageElementRef.current) {\n      if (this.context.isInOutlet()) {\n        this.ionPageElementRef.current.classList.add('ion-page-invisible');\n      }\n\n      this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);\n      this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));\n      this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));\n      this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));\n      this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ionPageElementRef.current) {\n      this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));\n      this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));\n      this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));\n      this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));\n    }\n  }\n\n  ionViewWillEnterHandler() {\n    this.ionLifeCycleContext.ionViewWillEnter();\n  }\n\n  ionViewDidEnterHandler() {\n    this.ionLifeCycleContext.ionViewDidEnter();\n  }\n\n  ionViewWillLeaveHandler() {\n    this.ionLifeCycleContext.ionViewWillLeave();\n  }\n\n  ionViewDidLeaveHandler() {\n    this.ionLifeCycleContext.ionViewDidLeave();\n  }\n\n  render() {\n    const _a = this.props,\n          {\n      className,\n      children,\n      routeInfo,\n      forwardedRef\n    } = _a,\n          props = __rest(_a, [\"className\", \"children\", \"routeInfo\", \"forwardedRef\"]);\n\n    return React.createElement(IonLifeCycleContext.Consumer, null, context => {\n      this.ionLifeCycleContext = context;\n      return React.createElement(\"div\", Object.assign({\n        className: className ? `${className} ion-page` : `ion-page`,\n        ref: this.stableMergedRefs\n      }, props), children);\n    });\n  }\n\n  static get contextType() {\n    return StackContext;\n  }\n\n}\n\nclass IonPageInternal extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const _a = this.props,\n          {\n      className,\n      children,\n      forwardedRef\n    } = _a,\n          props = __rest(_a, [\"className\", \"children\", \"forwardedRef\"]);\n\n    return this.context.hasIonicRouter() ? React.createElement(PageManager, Object.assign({\n      className: className ? `${className}` : '',\n      routeInfo: this.context.routeInfo,\n      forwardedRef: forwardedRef\n    }, props), children) : React.createElement(\"div\", Object.assign({\n      className: className ? `ion-page ${className}` : 'ion-page',\n      ref: forwardedRef\n    }, props), children);\n  }\n\n  static get displayName() {\n    return 'IonPage';\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nconst IonPage = createForwardRef(IonPageInternal, 'IonPage');\nconst IonTabsContext = React.createContext({\n  activeTab: undefined,\n  selectTab: () => false\n});\nconst IonTabButtonInner = /*@__PURE__*/createReactComponent('ion-tab-button');\nconst IonTabBarInner = /*@__PURE__*/createReactComponent('ion-tab-bar');\nconst IonBackButtonInner = /*@__PURE__*/createReactComponent('ion-back-button');\nconst IonRouterOutletInner = /*@__PURE__*/createReactComponent('ion-router-outlet'); // ionicons\n\nconst IonIconInner = /*@__PURE__*/createReactComponent('ion-icon');\n\nclass OutletPageManager extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    if (this.ionRouterOutlet) {\n      setTimeout(() => {\n        this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);\n      }, 25);\n      this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));\n      this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));\n      this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));\n      this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.ionRouterOutlet) {\n      this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));\n      this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));\n      this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));\n      this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));\n    }\n  }\n\n  ionViewWillEnterHandler() {\n    this.ionLifeCycleContext.ionViewWillEnter();\n  }\n\n  ionViewDidEnterHandler() {\n    this.ionLifeCycleContext.ionViewDidEnter();\n  }\n\n  ionViewWillLeaveHandler() {\n    this.ionLifeCycleContext.ionViewWillLeave();\n  }\n\n  ionViewDidLeaveHandler() {\n    this.ionLifeCycleContext.ionViewDidLeave();\n  }\n\n  render() {\n    const _a = this.props,\n          {\n      StackManager,\n      children,\n      routeInfo\n    } = _a,\n          props = __rest(_a, [\"StackManager\", \"children\", \"routeInfo\"]);\n\n    return React.createElement(IonLifeCycleContext.Consumer, null, context => {\n      this.ionLifeCycleContext = context;\n      return React.createElement(StackManager, {\n        routeInfo: routeInfo\n      }, React.createElement(IonRouterOutletInner, Object.assign({\n        setRef: val => this.ionRouterOutlet = val\n      }, props), children));\n    });\n  }\n\n  static get contextType() {\n    return StackContext;\n  }\n\n}\n\nclass IonRouterOutletContainer extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const StackManager = this.context.getStackManager();\n\n    const _a = this.props,\n          {\n      children,\n      forwardedRef\n    } = _a,\n          props = __rest(_a, [\"children\", \"forwardedRef\"]);\n\n    return this.context.hasIonicRouter() ? props.ionPage ? React.createElement(OutletPageManager, Object.assign({\n      StackManager: StackManager,\n      routeInfo: this.context.routeInfo\n    }, props), children) : React.createElement(StackManager, {\n      routeInfo: this.context.routeInfo\n    }, React.createElement(IonRouterOutletInner, Object.assign({}, props, {\n      forwardedRef: forwardedRef\n    }), children)) : React.createElement(IonRouterOutletInner, Object.assign({\n      ref: forwardedRef\n    }, this.props), this.props.children);\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nconst IonRouterOutlet = createForwardRef(IonRouterOutletContainer, 'IonRouterOutlet');\n\nclass IonTabButton extends React.Component {\n  constructor(props) {\n    super(props);\n    this.handleIonTabButtonClick = this.handleIonTabButtonClick.bind(this);\n  }\n\n  handleIonTabButtonClick() {\n    if (this.props.onClick) {\n      this.props.onClick(new CustomEvent('ionTabButtonClick', {\n        detail: {\n          tab: this.props.tab,\n          href: this.props.href,\n          routeOptions: this.props.routerOptions\n        }\n      }));\n    }\n  }\n\n  render() {\n    const _a = this.props,\n          rest = __rest(_a, [\"onClick\"]);\n\n    return React.createElement(IonTabButtonInner, Object.assign({\n      onIonTabButtonClick: this.handleIonTabButtonClick\n    }, rest));\n  }\n\n  static get displayName() {\n    return 'IonTabButton';\n  }\n\n}\n\nclass IonTabBarUnwrapped extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.setActiveTabOnContext = _tab => {};\n\n    const tabs = {};\n    React.Children.forEach(props.children, child => {\n      var _a, _b, _c, _d;\n\n      if (child != null && typeof child === 'object' && child.props && (child.type === IonTabButton || child.type.isTabButton)) {\n        tabs[child.props.tab] = {\n          originalHref: child.props.href,\n          currentHref: child.props.href,\n          originalRouteOptions: child.props.href === ((_a = props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname) ? (_b = props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions : undefined,\n          currentRouteOptions: child.props.href === ((_c = props.routeInfo) === null || _c === void 0 ? void 0 : _c.pathname) ? (_d = props.routeInfo) === null || _d === void 0 ? void 0 : _d.routeOptions : undefined\n        };\n      }\n    });\n    this.state = {\n      tabs\n    };\n    this.onTabButtonClick = this.onTabButtonClick.bind(this);\n    this.renderTabButton = this.renderTabButton.bind(this);\n    this.setActiveTabOnContext = this.setActiveTabOnContext.bind(this);\n    this.selectTab = this.selectTab.bind(this);\n  }\n\n  componentDidMount() {\n    const tabs = this.state.tabs;\n    const tabKeys = Object.keys(tabs);\n    const activeTab = tabKeys.find(key => {\n      const href = tabs[key].originalHref;\n      return this.props.routeInfo.pathname.startsWith(href);\n    });\n\n    if (activeTab) {\n      this.setState({\n        activeTab\n      });\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.state.activeTab) {\n      this.setActiveTabOnContext(this.state.activeTab);\n    }\n  }\n\n  selectTab(tab) {\n    const tabUrl = this.state.tabs[tab];\n\n    if (tabUrl) {\n      this.onTabButtonClick(new CustomEvent('ionTabButtonClick', {\n        detail: {\n          href: tabUrl.currentHref,\n          tab,\n          selected: tab === this.state.activeTab,\n          routeOptions: undefined\n        }\n      }));\n      return true;\n    }\n\n    return false;\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    var _a, _b, _c;\n\n    const tabs = Object.assign({}, state.tabs);\n    const tabKeys = Object.keys(state.tabs);\n    const activeTab = tabKeys.find(key => {\n      const href = state.tabs[key].originalHref;\n      return props.routeInfo.pathname.startsWith(href);\n    }); // Check to see if the tab button href has changed, and if so, update it in the tabs state\n\n    React.Children.forEach(props.children, child => {\n      if (child != null && typeof child === 'object' && child.props && (child.type === IonTabButton || child.type.isTabButton)) {\n        const tab = tabs[child.props.tab];\n\n        if (!tab || tab.originalHref !== child.props.href) {\n          tabs[child.props.tab] = {\n            originalHref: child.props.href,\n            currentHref: child.props.href,\n            originalRouteOptions: child.props.routeOptions,\n            currentRouteOptions: child.props.routeOptions\n          };\n        }\n      }\n    });\n    const {\n      activeTab: prevActiveTab\n    } = state;\n\n    if (activeTab && prevActiveTab) {\n      const prevHref = state.tabs[prevActiveTab].currentHref;\n      const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;\n\n      if (activeTab !== prevActiveTab || prevHref !== ((_a = props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname) || prevRouteOptions !== ((_b = props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions)) {\n        tabs[activeTab] = {\n          originalHref: tabs[activeTab].originalHref,\n          currentHref: props.routeInfo.pathname + (props.routeInfo.search || ''),\n          originalRouteOptions: tabs[activeTab].originalRouteOptions,\n          currentRouteOptions: (_c = props.routeInfo) === null || _c === void 0 ? void 0 : _c.routeOptions\n        };\n\n        if (props.routeInfo.routeAction === 'pop' && activeTab !== prevActiveTab) {\n          // If navigating back and the tabs change, set the prev tab back to its original href\n          tabs[prevActiveTab] = {\n            originalHref: tabs[prevActiveTab].originalHref,\n            currentHref: tabs[prevActiveTab].originalHref,\n            originalRouteOptions: tabs[prevActiveTab].originalRouteOptions,\n            currentRouteOptions: tabs[prevActiveTab].currentRouteOptions\n          };\n        }\n      }\n    }\n\n    activeTab && props.onSetCurrentTab(activeTab, props.routeInfo);\n    return {\n      activeTab,\n      tabs\n    };\n  }\n\n  onTabButtonClick(e) {\n    const tappedTab = this.state.tabs[e.detail.tab];\n    const originalHref = tappedTab.originalHref;\n    const currentHref = e.detail.href;\n    const {\n      activeTab: prevActiveTab\n    } = this.state; // this.props.onSetCurrentTab(e.detail.tab, this.props.routeInfo);\n    // Clicking the current tab will bring you back to the original href\n\n    if (prevActiveTab === e.detail.tab) {\n      if (originalHref !== currentHref) {\n        this.context.resetTab(e.detail.tab, originalHref, tappedTab.originalRouteOptions);\n      }\n    } else {\n      if (this.props.onIonTabsWillChange) {\n        this.props.onIonTabsWillChange(new CustomEvent('ionTabWillChange', {\n          detail: {\n            tab: e.detail.tab\n          }\n        }));\n      }\n\n      if (this.props.onIonTabsDidChange) {\n        this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', {\n          detail: {\n            tab: e.detail.tab\n          }\n        }));\n      }\n\n      this.setActiveTabOnContext(e.detail.tab);\n      this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);\n    }\n  }\n\n  renderTabButton(activeTab) {\n    return child => {\n      var _a, _b;\n\n      if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {\n        const href = child.props.tab === activeTab ? (_a = this.props.routeInfo) === null || _a === void 0 ? void 0 : _a.pathname : this.state.tabs[child.props.tab].currentHref;\n        const routeOptions = child.props.tab === activeTab ? (_b = this.props.routeInfo) === null || _b === void 0 ? void 0 : _b.routeOptions : this.state.tabs[child.props.tab].currentRouteOptions;\n        return React.cloneElement(child, {\n          href,\n          routeOptions,\n          onClick: this.onTabButtonClick\n        });\n      }\n\n      return null;\n    };\n  }\n\n  render() {\n    const {\n      activeTab\n    } = this.state;\n    return React.createElement(IonTabBarInner, Object.assign({}, this.props, {\n      selectedTab: activeTab\n    }), React.Children.map(this.props.children, this.renderTabButton(activeTab)));\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nconst IonTabBarContainer = React.memo(_a => {\n  var {\n    forwardedRef\n  } = _a,\n      props = __rest(_a, [\"forwardedRef\"]);\n\n  const context = useContext(NavContext);\n  return React.createElement(IonTabBarUnwrapped, Object.assign({\n    ref: forwardedRef\n  }, props, {\n    routeInfo: props.routeInfo || context.routeInfo || {\n      pathname: window.location.pathname\n    },\n    onSetCurrentTab: context.setCurrentTab\n  }), props.children);\n});\nconst IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');\n\nclass IonTabsElement extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n}\n\nif (window && window.customElements) {\n  const element = customElements.get('ion-tabs');\n\n  if (!element) {\n    customElements.define('ion-tabs', IonTabsElement);\n  }\n}\n\nconst hostStyles = {\n  display: 'flex',\n  position: 'absolute',\n  top: '0',\n  left: '0',\n  right: '0',\n  bottom: '0',\n  flexDirection: 'column',\n  width: '100%',\n  height: '100%',\n  contain: 'layout size style'\n};\nconst tabsInner = {\n  position: 'relative',\n  flex: 1,\n  contain: 'layout size style'\n};\n\nclass IonTabs extends React.Component {\n  constructor(props) {\n    super(props);\n    this.routerOutletRef = React.createRef();\n    this.tabBarRef = React.createRef();\n    this.ionTabContextState = {\n      activeTab: undefined,\n      selectTab: () => false\n    };\n  }\n\n  componentDidMount() {\n    if (this.tabBarRef.current) {\n      // Grab initial value\n      this.ionTabContextState.activeTab = this.tabBarRef.current.state.activeTab; // Override method\n\n      this.tabBarRef.current.setActiveTabOnContext = tab => {\n        this.ionTabContextState.activeTab = tab;\n      };\n\n      this.ionTabContextState.selectTab = this.tabBarRef.current.selectTab;\n    }\n  }\n\n  render() {\n    let outlet;\n    let tabBar;\n\n    const _a = this.props,\n          {\n      className,\n      onIonTabsDidChange,\n      onIonTabsWillChange\n    } = _a,\n          props = __rest(_a, [\"className\", \"onIonTabsDidChange\", \"onIonTabsWillChange\"]);\n\n    const children = typeof this.props.children === 'function' ? this.props.children(this.ionTabContextState) : this.props.children;\n    React.Children.forEach(children, child => {\n      if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {\n        return;\n      }\n\n      if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {\n        outlet = React.cloneElement(child, {\n          tabs: true\n        });\n      } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {\n        outlet = child.props.children[0];\n      }\n\n      let childProps = {\n        ref: this.tabBarRef\n      };\n      /**\n       * Only pass these props\n       * down from IonTabs to IonTabBar\n       * if they are defined, otherwise\n       * if you have a handler set on\n       * IonTabBar it will be overridden.\n       */\n\n      if (onIonTabsDidChange !== undefined) {\n        childProps = Object.assign(Object.assign({}, childProps), {\n          onIonTabsDidChange\n        });\n      }\n\n      if (onIonTabsWillChange !== undefined) {\n        childProps = Object.assign(Object.assign({}, childProps), {\n          onIonTabsWillChange\n        });\n      }\n\n      if (child.type === IonTabBar || child.type.isTabBar) {\n        tabBar = React.cloneElement(child, childProps);\n      } else if (child.type === Fragment && (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)) {\n        tabBar = React.cloneElement(child.props.children[1], childProps);\n      }\n    });\n\n    if (!outlet) {\n      throw new Error('IonTabs must contain an IonRouterOutlet');\n    }\n\n    if (!tabBar) {\n      throw new Error('IonTabs needs a IonTabBar');\n    }\n\n    return React.createElement(IonTabsContext.Provider, {\n      value: this.ionTabContextState\n    }, this.context.hasIonicRouter() ? React.createElement(PageManager, Object.assign({\n      className: className ? `${className}` : '',\n      routeInfo: this.context.routeInfo\n    }, props), React.createElement(\"ion-tabs\", {\n      className: \"ion-tabs\",\n      style: hostStyles\n    }, tabBar.props.slot === 'top' ? tabBar : null, React.createElement(\"div\", {\n      style: tabsInner,\n      className: \"tabs-inner\"\n    }, outlet), tabBar.props.slot === 'bottom' ? tabBar : null)) : React.createElement(\"div\", Object.assign({\n      className: className ? `${className}` : 'ion-tabs'\n    }, props, {\n      style: hostStyles\n    }), tabBar.props.slot === 'top' ? tabBar : null, React.createElement(\"div\", {\n      style: tabsInner,\n      className: \"tabs-inner\"\n    }, outlet), tabBar.props.slot === 'bottom' ? tabBar : null));\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nconst IonBackButton = /*@__PURE__*/(() => class extends React.Component {\n  constructor() {\n    super(...arguments);\n\n    this.clickButton = e => {\n      const {\n        defaultHref,\n        routerAnimation\n      } = this.props;\n\n      if (this.context.hasIonicRouter()) {\n        e.stopPropagation();\n        this.context.goBack(defaultHref, routerAnimation);\n      } else if (defaultHref !== undefined) {\n        window.location.href = defaultHref;\n      }\n    };\n  }\n\n  render() {\n    return React.createElement(IonBackButtonInner, Object.assign({\n      onClick: this.clickButton\n    }, this.props));\n  }\n\n  static get displayName() {\n    return 'IonBackButton';\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n})();\n\nconst isDevMode = () => {\n  return process && process.env && process.env.NODE_ENV === 'development';\n};\n\nconst warnings = {};\n\nconst deprecationWarning = (key, message) => {\n  if (isDevMode()) {\n    if (!warnings[key]) {\n      console.warn(message);\n      warnings[key] = true;\n    }\n  }\n};\n\nclass IonIconContainer extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    if (this.props.name) {\n      deprecationWarning('icon-name', 'In Ionic React, you import icons from \"ionicons/icons\" and set the icon you imported to the \"icon\" property. Setting the \"name\" property has no effect.');\n    }\n  }\n\n  render() {\n    var _a, _b;\n\n    const _c = this.props,\n          {\n      icon,\n      ios,\n      md\n    } = _c,\n          rest = __rest(_c, [\"icon\", \"ios\", \"md\"]);\n\n    let iconToUse;\n\n    if (ios || md) {\n      if (isPlatform('ios')) {\n        iconToUse = (_a = ios !== null && ios !== void 0 ? ios : md) !== null && _a !== void 0 ? _a : icon;\n      } else {\n        iconToUse = (_b = md !== null && md !== void 0 ? md : ios) !== null && _b !== void 0 ? _b : icon;\n      }\n    } else {\n      iconToUse = icon;\n    }\n\n    return React.createElement(IonIconInner, Object.assign({\n      ref: this.props.forwardedRef,\n      icon: iconToUse\n    }, rest), this.props.children);\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nconst IonIcon = createForwardRef(IonIconContainer, 'IonIcon');\n\nclass IonRoute extends React.PureComponent {\n  render() {\n    const IonRouteInner = this.context.getIonRoute();\n\n    if (!this.context.hasIonicRouter() || !IonRoute) {\n      console.error('You either do not have an Ionic Router package, or your router does not support using <IonRoute>');\n      return null;\n    }\n\n    return React.createElement(IonRouteInner, Object.assign({}, this.props));\n  }\n\n  static get contextType() {\n    return NavContext;\n  }\n\n}\n\nclass IonRedirect extends React.PureComponent {\n  render() {\n    const IonRedirectInner = this.context.getIonRedirect();\n\n    if (!this.context.hasIonicRouter() || !IonRedirect) {\n      console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');\n      return null;\n