\n {(status) => {\n const { direction } = this.context;\n const isActive = (status === TransitionStatuses.ENTERED) || (status === TransitionStatuses.EXITING);\n const directionClassName = (status === TransitionStatuses.ENTERING || status === TransitionStatuses.EXITING) &&\n this.state.startAnimation &&\n (direction === 'end' ? 'carousel-item-start' : 'carousel-item-end');\n const orderClassName = (status === TransitionStatuses.ENTERING) &&\n (direction === 'end' ? 'carousel-item-next' : 'carousel-item-prev');\n const itemClasses = mapToCssModules(classNames(\n className,\n 'carousel-item',\n isActive && 'active',\n directionClassName,\n orderClassName,\n ), cssModule);\n\n return (\n \n {children}\n \n );\n }}\n \n );\n }\n}\n\nCarouselItem.propTypes = {\n ...Transition.propTypes,\n tag: tagPropType,\n in: PropTypes.bool,\n cssModule: PropTypes.object,\n children: PropTypes.node,\n slide: PropTypes.bool,\n className: PropTypes.string,\n};\n\nCarouselItem.defaultProps = {\n ...Transition.defaultProps,\n tag: 'div',\n timeout: TransitionTimeouts.Carousel,\n slide: true,\n};\n\nCarouselItem.contextTypes = {\n direction: PropTypes.string\n};\n\nexport default CarouselItem;\n","import React from 'react';\n\n/**\n * CarouselContext\n * {\n * direction: PropTypes.oneOf(['start', 'end']).isRequired,\n * }\n */\nexport const CarouselContext = React.createContext({});\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport CarouselItem from './CarouselItem';\nimport { CarouselContext } from './CarouselContext';\nimport { mapToCssModules } from './utils';\n \nconst SWIPE_THRESHOLD = 40;\n\nclass Carousel extends React.Component {\n constructor(props) {\n super(props);\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.renderItems = this.renderItems.bind(this);\n this.hoverStart = this.hoverStart.bind(this);\n this.hoverEnd = this.hoverEnd.bind(this);\n this.handleTouchStart = this.handleTouchStart.bind(this);\n this.handleTouchEnd = this.handleTouchEnd.bind(this);\n this.touchStartX = 0;\n this.touchStartY = 0;\n this.state = {\n activeIndex: this.props.activeIndex,\n direction: 'end',\n indicatorClicked: false,\n };\n }\n\n getContextValue() {\n return { direction: this.state.direction };\n }\n\n componentDidMount() {\n // Set up the cycle\n if (this.props.ride === 'carousel') {\n this.setInterval();\n }\n\n // TODO: move this to the specific carousel like bootstrap. Currently it will trigger ALL carousels on the page.\n document.addEventListener('keyup', this.handleKeyPress);\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n let newState = null;\n let { activeIndex, direction, indicatorClicked } = prevState;\n\n if (nextProps.activeIndex !== activeIndex) {\n // Calculate the direction to turn\n if (nextProps.activeIndex === activeIndex + 1) {\n direction = 'end';\n } else if (nextProps.activeIndex === activeIndex -1) {\n direction = 'start';\n } else if (nextProps.activeIndex < activeIndex) {\n direction = indicatorClicked ? 'start' : 'end';\n } else if (nextProps.activeIndex !== activeIndex) {\n direction = indicatorClicked ? 'end' : 'start';\n }\n\n newState = {\n activeIndex: nextProps.activeIndex,\n direction,\n indicatorClicked: false,\n }\n }\n\n return newState;\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevState.activeIndex === this.state.activeIndex) return;\n this.setInterval(this.props);\n }\n\n componentWillUnmount() {\n this.clearInterval();\n document.removeEventListener('keyup', this.handleKeyPress);\n }\n\n setInterval(props = this.props) {\n // make sure not to have multiple intervals going...\n this.clearInterval();\n if (props.interval) {\n this.cycleInterval = setInterval(() => {\n props.next();\n }, parseInt(props.interval, 10));\n }\n }\n\n clearInterval() {\n clearInterval(this.cycleInterval);\n }\n\n hoverStart(...args) {\n if (this.props.pause === 'hover') {\n this.clearInterval();\n }\n if (this.props.mouseEnter) {\n this.props.mouseEnter(...args);\n }\n }\n\n hoverEnd(...args) {\n if (this.props.pause === 'hover') {\n this.setInterval();\n }\n if (this.props.mouseLeave) {\n this.props.mouseLeave(...args);\n }\n }\n\n handleKeyPress(evt) {\n if (this.props.keyboard) {\n if (evt.keyCode === 37) {\n this.props.previous();\n } else if (evt.keyCode === 39) {\n this.props.next();\n }\n }\n }\n\n handleTouchStart(e) {\n if(!this.props.enableTouch) {\n return;\n }\n this.touchStartX = e.changedTouches[0].screenX;\n this.touchStartY = e.changedTouches[0].screenY;\n }\n\n handleTouchEnd(e) {\n if(!this.props.enableTouch) {\n return;\n }\n\n const currentX = e.changedTouches[0].screenX;\n const currentY = e.changedTouches[0].screenY;\n const diffX = Math.abs(this.touchStartX - currentX);\n const diffY = Math.abs(this.touchStartY - currentY);\n\n // Don't swipe if Y-movement is bigger than X-movement\n if(diffX < diffY) {\n return;\n }\n\n if(diffX < SWIPE_THRESHOLD) {\n return;\n }\n\n if(currentX < this.touchStartX) {\n this.props.next();\n } else {\n this.props.previous();\n }\n }\n\n renderItems(carouselItems, className) {\n const { slide } = this.props;\n return (\n \n {carouselItems.map((item, index) => {\n const isIn = (index === this.state.activeIndex);\n return React.cloneElement(item, {\n in: isIn,\n slide: slide,\n });\n })}\n
\n );\n }\n\n render() {\n const { cssModule, slide, className, dark, fade } = this.props;\n const outerClasses = mapToCssModules(classNames(\n className,\n 'carousel',\n 'carousel-fade' && fade,\n slide && 'slide',\n dark && 'carousel-dark'\n ), cssModule);\n\n const innerClasses = mapToCssModules(classNames(\n 'carousel-inner'\n ), cssModule);\n\n // filter out booleans, null, or undefined\n const children = this.props.children.filter(child => child !== null && child !== undefined && typeof child !== 'boolean');\n\n const slidesOnly = children.every(child => child.type === CarouselItem);\n\n // Rendering only slides\n if (slidesOnly) {\n return (\n \n \n {this.renderItems(children, innerClasses)}\n \n
\n );\n }\n\n // Rendering slides and controls\n if (children[0] instanceof Array) {\n const carouselItems = children[0];\n const controlLeft = children[1];\n const controlRight = children[2];\n\n return (\n \n \n {this.renderItems(carouselItems, innerClasses)}\n {controlLeft}\n {controlRight}\n \n
\n );\n }\n\n // Rendering indicators, slides and controls\n const indicators = children[0];\n const wrappedOnClick = (e) => {\n if (typeof indicators.props.onClickHandler === 'function') {\n this.setState({ indicatorClicked: true }, () => indicators.props.onClickHandler(e));\n }\n };\n const wrappedIndicators = React.cloneElement(indicators, { onClickHandler: wrappedOnClick });\n const carouselItems = children[1];\n const controlLeft = children[2];\n const controlRight = children[3];\n\n return (\n \n \n {wrappedIndicators}\n {this.renderItems(carouselItems, innerClasses)}\n {controlLeft}\n {controlRight}\n \n
\n );\n }\n}\n\nCarousel.propTypes = {\n // the current active slide of the carousel\n activeIndex: PropTypes.number,\n // a function which should advance the carousel to the next slide (via activeIndex)\n next: PropTypes.func.isRequired,\n // a function which should advance the carousel to the previous slide (via activeIndex)\n previous: PropTypes.func.isRequired,\n // controls if the left and right arrow keys should control the carousel\n keyboard: PropTypes.bool,\n /* If set to \"hover\", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on\n * mouseleave. If set to false, hovering over the carousel won't pause it. (default: \"hover\")\n */\n pause: PropTypes.oneOf(['hover', false]),\n // Autoplays the carousel after the user manually cycles the first item. If \"carousel\", autoplays the carousel on load.\n // This is how bootstrap defines it... I would prefer a bool named autoplay or something...\n ride: PropTypes.oneOf(['carousel']),\n // the interval at which the carousel automatically cycles (default: 5000)\n // eslint-disable-next-line react/no-unused-prop-types\n interval: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n PropTypes.bool,\n ]),\n children: PropTypes.array,\n // called when the mouse enters the Carousel\n mouseEnter: PropTypes.func,\n // called when the mouse exits the Carousel\n mouseLeave: PropTypes.func,\n // controls whether the slide animation on the Carousel works or not\n slide: PropTypes.bool,\n // make the controls, indicators and captions dark on the Carousel\n dark: PropTypes.bool,\n cssModule: PropTypes.object,\n className: PropTypes.string,\n enableTouch: PropTypes.bool,\n};\n\nCarousel.defaultProps = {\n interval: 5000,\n pause: 'hover',\n keyboard: true,\n slide: true,\n enableTouch: true,\n fade: false,\n};\n\nCarousel.childContextTypes = {\n direction: PropTypes.string\n};\n\nexport default Carousel;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselControl = (props) => {\n const { direction, onClickHandler, cssModule, directionText, className } = props;\n\n const anchorClasses = mapToCssModules(classNames(\n className,\n `carousel-control-${direction}`\n ), cssModule);\n\n const iconClasses = mapToCssModules(classNames(\n `carousel-control-${direction}-icon`\n ), cssModule);\n\n const screenReaderClasses = mapToCssModules(classNames(\n 'visually-hidden'\n ), cssModule);\n\n\n return (\n // We need to disable this linting rule to use an `` instead of\n // `` because that's what the Bootstrap examples require:\n // https://getbootstrap.com/docs/4.5/components/carousel/#with-controls\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n {\n e.preventDefault();\n onClickHandler();\n }}\n >\n {directionText || direction} \n \n );\n};\n\nCarouselControl.propTypes = {\n direction: PropTypes.oneOf(['prev', 'next']).isRequired,\n onClickHandler: PropTypes.func.isRequired,\n cssModule: PropTypes.object,\n directionText: PropTypes.string,\n className: PropTypes.string,\n};\n\nexport default CarouselControl;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselIndicators = (props) => {\n const { items, activeIndex, cssModule, onClickHandler, className } = props;\n\n const listClasses = mapToCssModules(classNames(className, 'carousel-indicators'), cssModule);\n const indicators = items.map((item, idx) => {\n const indicatorClasses = mapToCssModules(classNames(\n { active: activeIndex === idx }\n ), cssModule);\n return (\n {\n e.preventDefault();\n onClickHandler(idx);\n }}\n className={indicatorClasses}\n >\n {item.caption}\n );\n });\n\n return (\n \n {indicators}\n
\n );\n};\n\nCarouselIndicators.propTypes = {\n items: PropTypes.array.isRequired,\n activeIndex: PropTypes.number.isRequired,\n cssModule: PropTypes.object,\n onClickHandler: PropTypes.func.isRequired,\n className: PropTypes.string,\n};\n\nexport default CarouselIndicators;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules } from './utils';\n\nconst CarouselCaption = (props) => {\n const { captionHeader, captionText, cssModule, className } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'carousel-caption',\n 'd-none',\n 'd-md-block'\n ), cssModule);\n\n return (\n \n
{captionHeader} \n
{captionText}
\n
\n \n {indicators && \n \n {({ ref, style, placement: popperPlacement, isReferenceHidden, arrowProps, update }) => (\n \n {typeof children === 'function' ? children({ update }) : children}\n {!hideArrow &&
\n )}\n \n \n );\n }\n\n render() {\n this.setTargetNode(this.props.target);\n\n if (this.state.isOpen) {\n return this.props.container === 'inline' ?\n this.renderChildren() :\n ReactDOM.createPortal(({this.renderChildren()}
), this.getContainerNode());\n }\n\n return null;\n }\n}\n\nPopperContent.propTypes = propTypes;\nPopperContent.defaultProps = defaultProps;\n\nexport default PopperContent;\n","import PropTypes from 'prop-types';\nimport { getTarget, targetPropType } from './utils';\n\nconst PopperTargetHelper = (props, context) => {\n context.popperManager.setTargetNode(getTarget(props.target));\n return null;\n};\n\nPopperTargetHelper.contextTypes = {\n popperManager: PropTypes.object.isRequired,\n};\n\nPopperTargetHelper.propTypes = {\n target: targetPropType.isRequired,\n};\n\nexport default PopperTargetHelper;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport PopperContent from './PopperContent';\nimport {\n getTarget,\n targetPropType,\n omit,\n PopperPlacements,\n mapToCssModules,\n DOMElement\n} from './utils';\n\nexport const propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n placement: PropTypes.oneOf(PopperPlacements),\n target: targetPropType.isRequired,\n container: targetPropType,\n isOpen: PropTypes.bool,\n disabled: PropTypes.bool,\n hideArrow: PropTypes.bool,\n boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),\n className: PropTypes.string,\n innerClassName: PropTypes.string,\n arrowClassName: PropTypes.string,\n popperClassName: PropTypes.string,\n cssModule: PropTypes.object,\n toggle: PropTypes.func,\n autohide: PropTypes.bool,\n placementPrefix: PropTypes.string,\n delay: PropTypes.oneOfType([\n PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),\n PropTypes.number\n ]),\n modifiers: PropTypes.array,\n strategy: PropTypes.string,\n offset: PropTypes.arrayOf(PropTypes.number),\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.string,\n PropTypes.object\n ]),\n trigger: PropTypes.string,\n fade: PropTypes.bool,\n flip: PropTypes.bool,\n};\n\nconst DEFAULT_DELAYS = {\n show: 0,\n hide: 50\n};\n\nconst defaultProps = {\n isOpen: false,\n hideArrow: false,\n autohide: false,\n delay: DEFAULT_DELAYS,\n toggle: function () {},\n trigger: 'click',\n fade: true,\n};\n\nfunction isInDOMSubtree(element, subtreeRoot) {\n return subtreeRoot && (element === subtreeRoot || subtreeRoot.contains(element));\n}\n\nfunction isInDOMSubtrees(element, subtreeRoots = []) {\n return subtreeRoots && subtreeRoots.length && subtreeRoots.filter(subTreeRoot=> isInDOMSubtree(element, subTreeRoot))[0];\n}\n\nclass TooltipPopoverWrapper extends React.Component {\n constructor(props) {\n super(props);\n\n this._targets = [];\n this.currentTargetElement = null;\n this.addTargetEvents = this.addTargetEvents.bind(this);\n this.handleDocumentClick = this.handleDocumentClick.bind(this);\n this.removeTargetEvents = this.removeTargetEvents.bind(this);\n this.toggle = this.toggle.bind(this);\n this.showWithDelay = this.showWithDelay.bind(this);\n this.hideWithDelay = this.hideWithDelay.bind(this);\n this.onMouseOverTooltipContent = this.onMouseOverTooltipContent.bind(this);\n this.onMouseLeaveTooltipContent = this.onMouseLeaveTooltipContent.bind(\n this\n );\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.onEscKeyDown = this.onEscKeyDown.bind(this);\n this.getRef = this.getRef.bind(this);\n this.state = { isOpen: props.isOpen };\n this._isMounted = false;\n }\n\n componentDidMount() {\n this._isMounted = true;\n this.updateTarget();\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n this.removeTargetEvents();\n this._targets = null;\n this.clearShowTimeout();\n this.clearHideTimeout();\n }\n\n static getDerivedStateFromProps(props, state) {\n if (props.isOpen && !state.isOpen) {\n return { isOpen: props.isOpen };\n }\n else return null;\n }\n\n onMouseOverTooltipContent() {\n if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) {\n if (this._hideTimeout) {\n this.clearHideTimeout();\n }\n if (this.state.isOpen && !this.props.isOpen) {\n this.toggle();\n }\n }\n }\n\n onMouseLeaveTooltipContent(e) {\n if (this.props.trigger.indexOf('hover') > -1 && !this.props.autohide) {\n if (this._showTimeout) {\n this.clearShowTimeout();\n }\n e.persist();\n this._hideTimeout = setTimeout(\n this.hide.bind(this, e),\n this.getDelay('hide')\n );\n }\n }\n\n onEscKeyDown(e) {\n if (e.key === 'Escape') {\n this.hide(e);\n }\n }\n\n getRef(ref) {\n const { innerRef } = this.props;\n if (innerRef) {\n if (typeof innerRef === 'function') {\n innerRef(ref);\n } else if (typeof innerRef === 'object') {\n innerRef.current = ref;\n }\n }\n this._popover = ref;\n }\n\n getDelay(key) {\n const { delay } = this.props;\n if (typeof delay === 'object') {\n return isNaN(delay[key]) ? DEFAULT_DELAYS[key] : delay[key];\n }\n return delay;\n }\n\n getCurrentTarget(target) {\n if (!target)\n return null;\n const index = this._targets.indexOf(target);\n if (index >= 0)\n return this._targets[index];\n return this.getCurrentTarget(target.parentElement);\n }\n\n show(e) {\n if (!this.props.isOpen) {\n this.clearShowTimeout();\n this.currentTargetElement = e ? e.currentTarget || this.getCurrentTarget(e.target) : null;\n if (e && e.composedPath && typeof e.composedPath === 'function') {\n const path = e.composedPath();\n this.currentTargetElement = (path && path[0]) || this.currentTargetElement;\n }\n this.toggle(e);\n }\n }\n\n showWithDelay(e) {\n if (this._hideTimeout) {\n this.clearHideTimeout();\n }\n this._showTimeout = setTimeout(\n this.show.bind(this, e),\n this.getDelay('show')\n );\n }\n hide(e) {\n if (this.props.isOpen) {\n this.clearHideTimeout();\n this.currentTargetElement = null;\n this.toggle(e);\n }\n }\n\n hideWithDelay(e) {\n if (this._showTimeout) {\n this.clearShowTimeout();\n }\n this._hideTimeout = setTimeout(\n this.hide.bind(this, e),\n this.getDelay('hide')\n );\n }\n\n\n clearShowTimeout() {\n clearTimeout(this._showTimeout);\n this._showTimeout = undefined;\n }\n\n clearHideTimeout() {\n clearTimeout(this._hideTimeout);\n this._hideTimeout = undefined;\n }\n\n handleDocumentClick(e) {\n const triggers = this.props.trigger.split(' ');\n\n if (triggers.indexOf('legacy') > -1 && (this.props.isOpen || isInDOMSubtrees(e.target, this._targets))) {\n if (this._hideTimeout) {\n this.clearHideTimeout();\n }\n if (this.props.isOpen && !isInDOMSubtree(e.target, this._popover)) {\n this.hideWithDelay(e);\n } else if (!this.props.isOpen) {\n this.showWithDelay(e);\n }\n } else if (triggers.indexOf('click') > -1 && isInDOMSubtrees(e.target, this._targets)) {\n if (this._hideTimeout) {\n this.clearHideTimeout();\n }\n\n if (!this.props.isOpen) {\n this.showWithDelay(e);\n } else {\n this.hideWithDelay(e);\n }\n }\n }\n\n addEventOnTargets(type, handler, isBubble) {\n this._targets.forEach(target=> {\n target.addEventListener(type, handler, isBubble);\n });\n }\n\n removeEventOnTargets(type, handler, isBubble) {\n this._targets.forEach(target=> {\n target.removeEventListener(type, handler, isBubble);\n });\n }\n\n addTargetEvents() {\n if (this.props.trigger) {\n let triggers = this.props.trigger.split(' ');\n if (triggers.indexOf('manual') === -1) {\n if (triggers.indexOf('click') > -1 || triggers.indexOf('legacy') > -1) {\n document.addEventListener('click', this.handleDocumentClick, true);\n }\n\n if (this._targets && this._targets.length) {\n if (triggers.indexOf('hover') > -1) {\n this.addEventOnTargets(\n 'mouseover',\n this.showWithDelay,\n true\n );\n this.addEventOnTargets(\n 'mouseout',\n this.hideWithDelay,\n true\n );\n }\n if (triggers.indexOf('focus') > -1) {\n this.addEventOnTargets('focusin', this.show, true);\n this.addEventOnTargets('focusout', this.hide, true);\n }\n this.addEventOnTargets('keydown', this.onEscKeyDown, true);\n }\n }\n }\n }\n\n removeTargetEvents() {\n if (this._targets) {\n this.removeEventOnTargets(\n 'mouseover',\n this.showWithDelay,\n true\n );\n this.removeEventOnTargets(\n 'mouseout',\n this.hideWithDelay,\n true\n );\n this.removeEventOnTargets('keydown', this.onEscKeyDown, true);\n this.removeEventOnTargets('focusin', this.show, true);\n this.removeEventOnTargets('focusout', this.hide, true);\n }\n\n document.removeEventListener('click', this.handleDocumentClick, true)\n }\n\n updateTarget() {\n const newTarget = getTarget(this.props.target, true);\n if (newTarget !== this._targets) {\n this.removeTargetEvents();\n this._targets = newTarget ? Array.from(newTarget) : [];\n this.currentTargetElement = this.currentTargetElement || this._targets[0];\n this.addTargetEvents();\n }\n }\n\n toggle(e) {\n if (this.props.disabled || !this._isMounted) {\n return e && e.preventDefault();\n }\n\n return this.props.toggle(e);\n }\n\n render() {\n if (this.props.isOpen) {\n this.updateTarget();\n }\n\n const target = this.currentTargetElement || this._targets[0];\n if (!target) {\n return null;\n }\n\n const {\n className,\n cssModule,\n innerClassName,\n isOpen,\n hideArrow,\n boundariesElement,\n placement,\n placementPrefix,\n arrowClassName,\n popperClassName,\n container,\n modifiers,\n strategy,\n offset,\n fade,\n flip,\n children\n } = this.props;\n\n const attributes = omit(this.props, Object.keys(propTypes));\n\n const popperClasses = mapToCssModules(popperClassName, cssModule);\n\n const classes = mapToCssModules(innerClassName, cssModule);\n\n return (\n \n {({ update }) => (\n \n {typeof children === 'function' ? children({ update }) : children}\n \n )}\n\n \n );\n }\n}\n\nTooltipPopoverWrapper.propTypes = propTypes;\nTooltipPopoverWrapper.defaultProps = defaultProps;\n\nexport default TooltipPopoverWrapper;\n","import React from 'react';\nimport classNames from 'classnames';\nimport TooltipPopoverWrapper, { propTypes } from './TooltipPopoverWrapper';\n\nconst defaultProps = {\n placement: 'right',\n placementPrefix: 'bs-popover',\n trigger: 'click',\n offset: [0, 8]\n};\n\nconst Popover = (props) => {\n const popperClasses = classNames(\n 'popover',\n 'show',\n props.popperClassName\n );\n\n const classes = classNames(\n 'popover-inner',\n props.innerClassName\n );\n\n\n return (\n \n {multi ? children :
}\n \n );\n};\n\nProgress.propTypes = propTypes;\nProgress.defaultProps = defaultProps;\n\nexport default Progress;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { canUseDOM } from './utils';\n\nconst propTypes = {\n children: PropTypes.node.isRequired,\n node: PropTypes.any\n};\n\nclass Portal extends React.Component {\n componentWillUnmount() {\n if (this.defaultNode) {\n document.body.removeChild(this.defaultNode);\n }\n this.defaultNode = null;\n }\n\n render() {\n if (!canUseDOM) {\n return null;\n }\n\n if (!this.props.node && !this.defaultNode) {\n this.defaultNode = document.createElement('div');\n document.body.appendChild(this.defaultNode);\n }\n\n return ReactDOM.createPortal(\n this.props.children,\n this.props.node || this.defaultNode\n );\n }\n}\n\nPortal.propTypes = propTypes;\n\nexport default Portal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Portal from './Portal';\nimport Fade from './Fade';\nimport {\n getOriginalBodyPadding,\n conditionallyUpdateScrollbar,\n setScrollbarWidth,\n mapToCssModules,\n omit,\n focusableElements,\n TransitionTimeouts,\n keyCodes,\n targetPropType,\n getTarget\n} from './utils';\n\nfunction noop() { }\n\nconst FadePropTypes = PropTypes.shape(Fade.propTypes);\n\nconst propTypes = {\n isOpen: PropTypes.bool,\n autoFocus: PropTypes.bool,\n centered: PropTypes.bool,\n fullscreen: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),\n ]),\n scrollable: PropTypes.bool,\n size: PropTypes.string,\n toggle: PropTypes.func,\n keyboard: PropTypes.bool,\n role: PropTypes.string,\n labelledBy: PropTypes.string,\n backdrop: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf(['static'])\n ]),\n onEnter: PropTypes.func,\n onExit: PropTypes.func,\n onOpened: PropTypes.func,\n onClosed: PropTypes.func,\n children: PropTypes.node,\n className: PropTypes.string,\n wrapClassName: PropTypes.string,\n modalClassName: PropTypes.string,\n backdropClassName: PropTypes.string,\n contentClassName: PropTypes.string,\n external: PropTypes.node,\n fade: PropTypes.bool,\n cssModule: PropTypes.object,\n zIndex: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n ]),\n backdropTransition: FadePropTypes,\n modalTransition: FadePropTypes,\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n unmountOnClose: PropTypes.bool,\n returnFocusAfterClose: PropTypes.bool,\n container: targetPropType,\n trapFocus: PropTypes.bool\n};\n\nconst propsToOmit = Object.keys(propTypes);\n\nconst defaultProps = {\n isOpen: false,\n autoFocus: true,\n centered: false,\n scrollable: false,\n role: 'dialog',\n backdrop: true,\n keyboard: true,\n zIndex: 1050,\n fade: true,\n onOpened: noop,\n onClosed: noop,\n modalTransition: {\n timeout: TransitionTimeouts.Modal,\n },\n backdropTransition: {\n mountOnEnter: true,\n timeout: TransitionTimeouts.Fade, // uses standard fade transition\n },\n unmountOnClose: true,\n returnFocusAfterClose: true,\n container: 'body',\n trapFocus: false\n};\n\nclass Modal extends React.Component {\n constructor(props) {\n super(props);\n\n this._element = null;\n this._originalBodyPadding = null;\n this.getFocusableChildren = this.getFocusableChildren.bind(this);\n this.handleBackdropClick = this.handleBackdropClick.bind(this);\n this.handleBackdropMouseDown = this.handleBackdropMouseDown.bind(this);\n this.handleEscape = this.handleEscape.bind(this);\n this.handleStaticBackdropAnimation = this.handleStaticBackdropAnimation.bind(this);\n this.handleTab = this.handleTab.bind(this);\n this.onOpened = this.onOpened.bind(this);\n this.onClosed = this.onClosed.bind(this);\n this.manageFocusAfterClose = this.manageFocusAfterClose.bind(this);\n this.clearBackdropAnimationTimeout = this.clearBackdropAnimationTimeout.bind(this);\n this.trapFocus = this.trapFocus.bind(this);\n\n this.state = {\n isOpen: false,\n showStaticBackdropAnimation: false\n };\n }\n\n componentDidMount() {\n const { isOpen, autoFocus, onEnter } = this.props;\n\n if (isOpen) {\n this.init();\n this.setState({ isOpen: true })\n if (autoFocus) {\n this.setFocus();\n }\n }\n\n if (onEnter) {\n onEnter();\n }\n\n // traps focus inside the Modal, even if the browser address bar is focused\n document.addEventListener('focus', this.trapFocus, true);\n\n this._isMounted = true;\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.isOpen && !prevProps.isOpen) {\n this.init();\n this.setState({ isOpen: true});\n // let render() renders Modal Dialog first\n return;\n }\n\n // now Modal Dialog is rendered and we can refer this._element and this._dialog\n if (this.props.autoFocus && this.state.isOpen && !prevState.isOpen) {\n this.setFocus();\n }\n\n if (this._element && prevProps.zIndex !== this.props.zIndex) {\n this._element.style.zIndex = this.props.zIndex;\n }\n }\n\n componentWillUnmount() {\n this.clearBackdropAnimationTimeout();\n\n if (this.props.onExit) {\n this.props.onExit();\n }\n\n if (this._element) {\n this.destroy();\n if (this.props.isOpen || this.state.isOpen) {\n this.close();\n }\n }\n\n document.removeEventListener('focus', this.trapFocus, true);\n this._isMounted = false;\n }\n\n trapFocus (ev) {\n if (!this.props.trapFocus) {\n return;\n }\n\n if (!this._element) //element is not attached\n return;\n\n if (this._dialog && this._dialog.parentNode === ev.target) // initial focus when the Modal is opened\n return;\n\n if (this.modalIndex < (Modal.openCount - 1)) // last opened modal\n return;\n\n const children = this.getFocusableChildren();\n\n for (let i = 0; i < children.length; i++) { // focus is already inside the Modal\n if (children[i] === ev.target)\n return;\n }\n\n if (children.length > 0) { // otherwise focus the first focusable element in the Modal\n ev.preventDefault();\n ev.stopPropagation();\n children[0].focus();\n }\n }\n\n onOpened(node, isAppearing) {\n this.props.onOpened();\n (this.props.modalTransition.onEntered || noop)(node, isAppearing);\n }\n\n onClosed(node) {\n const { unmountOnClose } = this.props;\n // so all methods get called before it is unmounted\n this.props.onClosed();\n (this.props.modalTransition.onExited || noop)(node);\n\n if (unmountOnClose) {\n this.destroy();\n }\n this.close();\n\n if (this._isMounted) {\n this.setState({ isOpen: false });\n }\n }\n\n setFocus() {\n if (this._dialog && this._dialog.parentNode && typeof this._dialog.parentNode.focus === 'function') {\n this._dialog.parentNode.focus();\n }\n }\n\n getFocusableChildren() {\n return this._element.querySelectorAll(focusableElements.join(', '));\n }\n\n getFocusedChild() {\n let currentFocus;\n const focusableChildren = this.getFocusableChildren();\n\n try {\n currentFocus = document.activeElement;\n } catch (err) {\n currentFocus = focusableChildren[0];\n }\n return currentFocus;\n }\n\n // not mouseUp because scrollbar fires it, shouldn't close when user scrolls\n handleBackdropClick(e) {\n if (e.target === this._mouseDownElement) {\n e.stopPropagation();\n\n const backdrop = this._dialog ? this._dialog.parentNode : null;\n\n if (backdrop && e.target === backdrop && this.props.backdrop === 'static') {\n this.handleStaticBackdropAnimation();\n }\n\n if (!this.props.isOpen || this.props.backdrop !== true) return;\n\n if (backdrop && e.target === backdrop && this.props.toggle) {\n this.props.toggle(e);\n }\n }\n }\n\n handleTab(e) {\n if (e.which !== 9) return;\n if (this.modalIndex < (Modal.openCount - 1)) return; // last opened modal\n\n const focusableChildren = this.getFocusableChildren();\n const totalFocusable = focusableChildren.length;\n if (totalFocusable === 0) return;\n const currentFocus = this.getFocusedChild();\n\n let focusedIndex = 0;\n\n for (let i = 0; i < totalFocusable; i += 1) {\n if (focusableChildren[i] === currentFocus) {\n focusedIndex = i;\n break;\n }\n }\n\n if (e.shiftKey && focusedIndex === 0) {\n e.preventDefault();\n focusableChildren[totalFocusable - 1].focus();\n } else if (!e.shiftKey && focusedIndex === totalFocusable - 1) {\n e.preventDefault();\n focusableChildren[0].focus();\n }\n }\n\n handleBackdropMouseDown(e) {\n this._mouseDownElement = e.target;\n }\n\n handleEscape(e) {\n if (this.props.isOpen && e.keyCode === keyCodes.esc && this.props.toggle) {\n if (this.props.keyboard) {\n e.preventDefault();\n e.stopPropagation();\n\n this.props.toggle(e);\n }\n else if (this.props.backdrop === 'static') {\n e.preventDefault();\n e.stopPropagation();\n\n this.handleStaticBackdropAnimation();\n }\n }\n }\n\n handleStaticBackdropAnimation() {\n this.clearBackdropAnimationTimeout();\n this.setState({ showStaticBackdropAnimation: true });\n this._backdropAnimationTimeout = setTimeout(() => {\n this.setState({ showStaticBackdropAnimation: false });\n }, 100);\n }\n\n init() {\n try {\n this._triggeringElement = document.activeElement;\n } catch (err) {\n this._triggeringElement = null;\n }\n\n if (!this._element) {\n this._element = document.createElement('div');\n this._element.setAttribute('tabindex', '-1');\n this._element.style.position = 'relative';\n this._element.style.zIndex = this.props.zIndex;\n this._mountContainer = getTarget(this.props.container);\n this._mountContainer.appendChild(this._element);\n }\n\n this._originalBodyPadding = getOriginalBodyPadding();\n conditionallyUpdateScrollbar();\n\n if (Modal.openCount === 0) {\n document.body.className = classNames(\n document.body.className,\n mapToCssModules('modal-open', this.props.cssModule)\n );\n }\n\n this.modalIndex = Modal.openCount;\n Modal.openCount += 1;\n }\n\n destroy() {\n if (this._element) {\n this._mountContainer.removeChild(this._element);\n this._element = null;\n }\n\n this.manageFocusAfterClose();\n }\n\n manageFocusAfterClose() {\n if (this._triggeringElement) {\n const { returnFocusAfterClose } = this.props;\n if (this._triggeringElement.focus && returnFocusAfterClose) this._triggeringElement.focus();\n this._triggeringElement = null;\n }\n }\n\n close() {\n if (Modal.openCount <= 1) {\n const modalOpenClassName = mapToCssModules('modal-open', this.props.cssModule);\n // Use regex to prevent matching `modal-open` as part of a different class, e.g. `my-modal-opened`\n const modalOpenClassNameRegex = new RegExp(`(^| )${modalOpenClassName}( |$)`);\n document.body.className = document.body.className.replace(modalOpenClassNameRegex, ' ').trim();\n }\n this.manageFocusAfterClose();\n Modal.openCount = Math.max(0, Modal.openCount - 1);\n\n setScrollbarWidth(this._originalBodyPadding);\n }\n\n renderModalDialog() {\n const attributes = omit(this.props, propsToOmit);\n const dialogBaseClass = 'modal-dialog';\n\n return (\n {\n this._dialog = c;\n }}\n >\n \n {this.props.children}\n \n \n );\n }\n\n render() {\n const {\n unmountOnClose\n } = this.props;\n\n if (!!this._element && (this.state.isOpen || !unmountOnClose)) {\n const isModalHidden = !!this._element && !this.state.isOpen && !unmountOnClose;\n this._element.style.display = isModalHidden ? 'none' : 'block';\n\n const {\n wrapClassName,\n modalClassName,\n backdropClassName,\n cssModule,\n isOpen,\n backdrop,\n role,\n labelledBy,\n external,\n innerRef,\n } = this.props;\n\n const modalAttributes = {\n onClick: this.handleBackdropClick,\n onMouseDown: this.handleBackdropMouseDown,\n onKeyUp: this.handleEscape,\n onKeyDown: this.handleTab,\n style: { display: 'block' },\n 'aria-labelledby': labelledBy,\n role,\n tabIndex: '-1'\n };\n\n const hasTransition = this.props.fade;\n const modalTransition = {\n ...Fade.defaultProps,\n ...this.props.modalTransition,\n baseClass: hasTransition ? this.props.modalTransition.baseClass : '',\n timeout: hasTransition ? this.props.modalTransition.timeout : 0,\n };\n const backdropTransition = {\n ...Fade.defaultProps,\n ...this.props.backdropTransition,\n baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',\n timeout: hasTransition ? this.props.backdropTransition.timeout : 0,\n };\n\n const Backdrop = backdrop && (\n hasTransition ?\n (
\n );\n\n return (\n \n \n \n {external}\n {this.renderModalDialog()}\n \n {Backdrop}\n
\n \n );\n }\n return null;\n }\n\n clearBackdropAnimationTimeout() {\n if (this._backdropAnimationTimeout) {\n clearTimeout(this._backdropAnimationTimeout);\n this._backdropAnimationTimeout = undefined;\n }\n }\n}\n\nModal.propTypes = propTypes;\nModal.defaultProps = defaultProps;\nModal.openCount = 0;\n\nexport default Modal;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n wrapTag: tagPropType,\n toggle: PropTypes.func,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n children: PropTypes.node,\n closeAriaLabel: PropTypes.string,\n close: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'h5',\n wrapTag: 'div',\n closeAriaLabel: 'Close',\n};\n\nconst ModalHeader = (props) => {\n let closeButton;\n const {\n className,\n cssModule,\n children,\n toggle,\n tag: Tag,\n wrapTag: WrapTag,\n closeAriaLabel,\n close,\n ...attributes } = props;\n\n const classes = mapToCssModules(classNames(\n className,\n 'modal-header'\n ), cssModule);\n\n if (!close && toggle) {\n closeButton = (\n \n \n {children}\n \n {close || closeButton}\n \n );\n};\n\nModalHeader.propTypes = propTypes;\nModalHeader.defaultProps = defaultProps;\n\nexport default ModalHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div',\n};\n\nconst ModalBody = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'modal-body'\n ), cssModule);\n\n return (\n {table} \n );\n }\n\n return table;\n};\n\nTable.propTypes = propTypes;\nTable.defaultProps = defaultProps;\n\nexport default Table;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n flush: PropTypes.bool,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n numbered: PropTypes.bool\n};\n\nconst defaultProps = {\n tag: 'ul',\n horizontal: false,\n numbered: false\n};\n\nconst getHorizontalClass = horizontal => {\n if (horizontal === false) {\n return false;\n } else if (horizontal === true || horizontal === \"xs\") {\n return \"list-group-horizontal\";\n }\n return `list-group-horizontal-${horizontal}`;\n};\n\nconst ListGroup = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n flush,\n horizontal,\n numbered,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'list-group',\n // list-group-horizontal cannot currently be mixed with list-group-flush\n // we only try to apply horizontal classes if flush is false\n flush ? 'list-group-flush' : getHorizontalClass(horizontal),\n {\n 'list-group-numbered': numbered\n }\n ), cssModule);\n\n return (\n {\n this._backdrop = c;\n }}\n cssModule={cssModule}\n className={mapToCssModules(classNames('offcanvas-backdrop', backdropClassName), cssModule)}\n onClick={this.handleBackdropClick}\n onMouseDown={this.handleBackdropMouseDown}\n />)\n : \n {\n this._dialog = c;\n }}\n style={{\n ...style,\n visibility: isOpen ? 'visible' : 'hidden'\n }}\n >\n {this.props.children}\n \n {Backdrop}\n \n );\n }\n return null;\n }\n\n clearBackdropAnimationTimeout() {\n if (this._backdropAnimationTimeout) {\n clearTimeout(this._backdropAnimationTimeout);\n this._backdropAnimationTimeout = undefined;\n }\n }\n}\n\nOffcanvas.propTypes = propTypes;\nOffcanvas.defaultProps = defaultProps;\nOffcanvas.openCount = 0;\n\nexport default Offcanvas;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div',\n};\n\nconst OffcanvasBody = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n ...attributes } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'offcanvas-body'\n ), cssModule);\n\n return (\n \n \n {children}\n \n {close || closeButton}\n \n );\n};\n\nOffcanvasHeader.propTypes = propTypes;\nOffcanvasHeader.defaultProps = defaultProps;\n\nexport default OffcanvasHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n listClassName: PropTypes.string,\n cssModule: PropTypes.object,\n size: PropTypes.string,\n tag: tagPropType,\n listTag: tagPropType,\n 'aria-label': PropTypes.string\n};\n\nconst defaultProps = {\n tag: 'nav',\n listTag: 'ul',\n 'aria-label': 'pagination'\n};\n\nconst Pagination = (props) => {\n const {\n className,\n listClassName,\n cssModule,\n size,\n tag: Tag,\n listTag: ListTag,\n 'aria-label': label,\n ...attributes\n } = props;\n\n const classes = mapToCssModules(classNames(\n className\n ), cssModule);\n\n const listClasses = mapToCssModules(classNames(\n listClassName,\n 'pagination',\n {\n [`pagination-${size}`]: !!size,\n }\n ), cssModule);\n\n return (\n \n \n );\n};\n\nPagination.propTypes = propTypes;\nPagination.defaultProps = defaultProps;\n\nexport default Pagination;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n active: PropTypes.bool,\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n disabled: PropTypes.bool,\n tag: tagPropType,\n};\n\nconst defaultProps = {\n tag: 'li',\n};\n\nconst PaginationItem = (props) => {\n const {\n active,\n className,\n cssModule,\n disabled,\n tag: Tag,\n ...attributes\n } = props;\n\n const classes = mapToCssModules(classNames(\n className,\n 'page-item',\n {\n active,\n disabled,\n }\n ), cssModule);\n\n return (\n \n {children || defaultCaret}\n ,\n \n {ariaLabel}\n ,\n ];\n }\n\n return (\n \n {children}\n \n );\n};\n\nPaginationLink.propTypes = propTypes;\nPaginationLink.defaultProps = defaultProps;\n\nexport default PaginationLink;\n","import React from 'react';\n\n/**\n * TabContext\n * {\n * activeTabId: PropTypes.any\n * }\n */\nexport const TabContext = React.createContext({});","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { TabContext } from './TabContext';\nimport { mapToCssModules, omit, tagPropType } from './utils';\n\n\nconst propTypes = {\n tag: tagPropType,\n activeTab: PropTypes.any,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'div',\n};\n\n\nclass TabContent extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.activeTab !== nextProps.activeTab) {\n return {\n activeTab: nextProps.activeTab\n };\n }\n return null;\n }\n constructor(props) {\n super(props);\n this.state = {\n activeTab: this.props.activeTab\n };\n }\n\n render() {\n const {\n className,\n cssModule,\n tag: Tag,\n } = this.props;\n\n const attributes = omit(this.props, Object.keys(propTypes));\n\n const classes = mapToCssModules(classNames('tab-content', className), cssModule);\n\n return (\n \n \n );\n }\n}\n\nexport default TabContent;\n\nTabContent.propTypes = propTypes;\nTabContent.defaultProps = defaultProps;\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { TabContext } from './TabContext';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n tabId: PropTypes.any,\n};\n\nconst defaultProps = {\n tag: 'div',\n};\n\nexport default function TabPane(props) {\n const {\n className,\n cssModule,\n tabId,\n tag: Tag,\n ...attributes\n } = props;\n const getClasses = (activeTabId) => mapToCssModules(classNames('tab-pane', className, { active: tabId === activeTabId }), cssModule);\n return (\n \n {({activeTabId}) => \n );\n}\nTabPane.propTypes = propTypes;\nTabPane.defaultProps = defaultProps;\n\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\nimport Fade from './Fade';\n\nconst propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n closeClassName: PropTypes.string,\n closeAriaLabel: PropTypes.string,\n cssModule: PropTypes.object,\n color: PropTypes.string,\n fade: PropTypes.bool,\n isOpen: PropTypes.bool,\n toggle: PropTypes.func,\n tag: tagPropType,\n transition: PropTypes.shape(Fade.propTypes),\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n};\n\nconst defaultProps = {\n color: 'success',\n isOpen: true,\n tag: 'div',\n closeAriaLabel: 'Close',\n fade: true,\n transition: {\n ...Fade.defaultProps,\n unmountOnExit: true,\n },\n};\n\nfunction Alert(props) {\n const {\n className,\n closeClassName,\n closeAriaLabel,\n cssModule,\n tag: Tag,\n color,\n isOpen,\n toggle,\n children,\n transition,\n fade,\n innerRef,\n ...attributes\n } = props;\n\n const classes = mapToCssModules(classNames(\n className,\n 'alert',\n `alert-${color}`,\n { 'alert-dismissible': toggle }\n ), cssModule);\n\n const closeClasses = mapToCssModules(classNames('btn-close', closeClassName), cssModule);\n\n const alertTransition = {\n ...Fade.defaultProps,\n ...transition,\n baseClass: fade ? transition.baseClass : '',\n timeout: fade ? transition.timeout : 0,\n };\n\n return (\n \n {toggle ?\n \n );\n}\n\nAlert.propTypes = propTypes;\nAlert.defaultProps = defaultProps;\n\nexport default Alert;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\nimport Fade from './Fade';\n\nconst propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n fade: PropTypes.bool,\n isOpen: PropTypes.bool,\n tag: tagPropType,\n transition: PropTypes.shape(Fade.propTypes),\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n};\n\nconst defaultProps = {\n isOpen: true,\n tag: 'div',\n fade: true,\n transition: {\n ...Fade.defaultProps,\n unmountOnExit: true,\n },\n};\n\nfunction Toast(props) {\n const {\n className,\n cssModule,\n tag: Tag,\n isOpen,\n children,\n transition,\n fade,\n innerRef,\n ...attributes\n } = props;\n\n const classes = mapToCssModules(classNames(className, 'toast'), cssModule);\n\n const toastTransition = {\n ...Fade.defaultProps,\n ...transition,\n baseClass: fade ? transition.baseClass : '',\n timeout: fade ? transition.timeout : 0,\n };\n\n return (\n \n {children}\n \n );\n}\n\nToast.propTypes = propTypes;\nToast.defaultProps = defaultProps;\n\nexport default Toast;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n innerRef: PropTypes.oneOfType([\n PropTypes.object,\n PropTypes.string,\n PropTypes.func,\n ]),\n};\n\nconst defaultProps = {\n tag: 'div'\n};\n\nconst ToastBody = (props) => {\n const {\n className,\n cssModule,\n innerRef,\n tag: Tag,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n 'toast-body'\n ), cssModule);\n\n return (\n \n \n {icon}\n \n {children}\n \n {close || closeButton}\n \n );\n};\n\nToastHeader.propTypes = propTypes;\nToastHeader.defaultProps = defaultProps;\n\nexport default ToastHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\n\nconst propTypes = {\n tag: tagPropType,\n active: PropTypes.bool,\n disabled: PropTypes.bool,\n color: PropTypes.string,\n action: PropTypes.bool,\n className: PropTypes.any,\n cssModule: PropTypes.object,\n};\n\nconst defaultProps = {\n tag: 'li'\n};\n\nconst handleDisabledOnClick = (e) => {\n e.preventDefault();\n};\n\nconst ListGroupItem = (props) => {\n const {\n className,\n cssModule,\n tag: Tag,\n active,\n disabled,\n action,\n color,\n ...attributes\n } = props;\n const classes = mapToCssModules(classNames(\n className,\n active ? 'active' : false,\n disabled ? 'disabled' : false,\n action ? 'list-group-item-action' : false,\n color ? `list-group-item-${color}` : false,\n 'list-group-item'\n ), cssModule);\n\n // Prevent click event when disabled.\n if (disabled) {\n attributes.onClick = handleDisabledOnClick;\n }\n return (\n \n {children &&\n \n {children}\n \n }\n \n );\n};\n\nSpinner.propTypes = propTypes;\nSpinner.defaultProps = defaultProps;\n\nexport default Spinner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { mapToCssModules, tagPropType } from './utils';\nimport Col, { getColumnClasses } from './Col';\n\nconst propTypes = {\n ...Col.propTypes,\n color: PropTypes.string,\n tag: tagPropType,\n animation: PropTypes.oneOf(['glow', 'wave']),\n innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),\n size: PropTypes.oneOf(['lg', 'sm', 'xs']),\n};\n\nconst defaultProps = {\n tag: 'span'\n};\n\nconst Placeholder = (props) => {\n let {\n className,\n cssModule,\n color,\n innerRef,\n tag: Tag,\n animation,\n size,\n widths,\n ...attributes\n } = props;\n\n let { attributes: modifiedAttributes, colClasses } = getColumnClasses(attributes, cssModule, widths)\n\n const classes = mapToCssModules(classNames(\n className,\n colClasses,\n 'placeholder' + (animation ? '-'+animation : ''),\n size ? 'placeholder-'+ size : false,\n color ? 'bg-'+color : false\n ), cssModule);\n\n\n\n return (\n (value: unknown): value is T =>\n !isNullOrUndefined(value) &&\n !Array.isArray(value) &&\n isObjectType(value) &&\n !isDateObject(value);\n","import isCheckBoxInput from '../utils/isCheckBoxInput';\nimport isObject from '../utils/isObject';\n\ntype Event = { target: any };\n\nexport default (event: unknown) =>\n isObject(event) && (event as Event).target\n ? isCheckBoxInput((event as Event).target)\n ? (event as Event).target.checked\n : (event as Event).target.value\n : event;\n","import { InternalFieldName } from '../types';\n\nimport getNodeParentName from './getNodeParentName';\n\nexport default (names: Set, name: InternalFieldName) =>\n names.has(getNodeParentName(name));\n","export default (name: string) =>\n name.substring(0, name.search(/\\.\\d+(\\.|$)/)) || name;\n","import isObject from './isObject';\n\nexport default (tempObject: object) => {\n const prototypeCopy =\n tempObject.constructor && tempObject.constructor.prototype;\n\n return (\n isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf')\n );\n};\n","export default typeof window !== 'undefined' &&\n typeof window.HTMLElement !== 'undefined' &&\n typeof document !== 'undefined';\n","import isObject from './isObject';\nimport isPlainObject from './isPlainObject';\nimport isWeb from './isWeb';\n\nexport default function cloneObject(data: T): T {\n let copy: any;\n const isArray = Array.isArray(data);\n\n if (data instanceof Date) {\n copy = new Date(data);\n } else if (data instanceof Set) {\n copy = new Set(data);\n } else if (\n !(isWeb && (data instanceof Blob || data instanceof FileList)) &&\n (isArray || isObject(data))\n ) {\n copy = isArray ? [] : {};\n\n if (!isArray && !isPlainObject(data)) {\n copy = data;\n } else {\n for (const key in data) {\n if (data.hasOwnProperty(key)) {\n copy[key] = cloneObject(data[key]);\n }\n }\n }\n } else {\n return data;\n }\n\n return copy;\n}\n","export default (value: TValue[]) =>\n Array.isArray(value) ? value.filter(Boolean) : [];\n","export default (val: unknown): val is undefined => val === undefined;\n","import compact from './compact';\nimport isNullOrUndefined from './isNullOrUndefined';\nimport isObject from './isObject';\nimport isUndefined from './isUndefined';\n\nexport default (object: T, path?: string, defaultValue?: unknown): any => {\n if (!path || !isObject(object)) {\n return defaultValue;\n }\n\n const result = compact(path.split(/[,[\\].]+?/)).reduce(\n (result, key) =>\n isNullOrUndefined(result) ? result : result[key as keyof {}],\n object,\n );\n\n return isUndefined(result) || result === object\n ? isUndefined(object[path as keyof T])\n ? defaultValue\n : object[path as keyof T]\n : result;\n};\n","export default (value: unknown): value is boolean => typeof value === 'boolean';\n","export const EVENTS = {\n BLUR: 'blur',\n FOCUS_OUT: 'focusout',\n CHANGE: 'change',\n} as const;\n\nexport const VALIDATION_MODE = {\n onBlur: 'onBlur',\n onChange: 'onChange',\n onSubmit: 'onSubmit',\n onTouched: 'onTouched',\n all: 'all',\n} as const;\n\nexport const INPUT_VALIDATION_RULES = {\n max: 'max',\n min: 'min',\n maxLength: 'maxLength',\n minLength: 'minLength',\n pattern: 'pattern',\n required: 'required',\n validate: 'validate',\n} as const;\n","import React from 'react';\n\nimport { FieldValues, FormProviderProps, UseFormReturn } from './types';\n\nconst HookFormContext = React.createContext(null);\n\n/**\n * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @returns return all useForm methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * \n * \n * \n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return =>\n React.useContext(HookFormContext) as UseFormReturn<\n TFieldValues,\n TContext,\n TransformedValues\n >;\n\n/**\n * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)\n *\n * @param props - all useForm methods\n *\n * @example\n * ```tsx\n * function App() {\n * const methods = useForm();\n * const onSubmit = data => console.log(data);\n *\n * return (\n * \n * \n * \n * );\n * }\n *\n * function NestedInput() {\n * const { register } = useFormContext(); // retrieve all hook methods\n * return ,\n) => {\n const { children, ...data } = props;\n return (\n \n {children}\n \n );\n};\n","import { VALIDATION_MODE } from '../constants';\nimport { Control, FieldValues, FormState, ReadFormState } from '../types';\n\nexport default (\n formState: FormState,\n control: Control,\n localProxyFormState?: ReadFormState,\n isRoot = true,\n) => {\n const result = {\n defaultValues: control._defaultValues,\n } as typeof formState;\n\n for (const key in formState) {\n Object.defineProperty(result, key, {\n get: () => {\n const _key = key as keyof FormState & keyof ReadFormState;\n\n if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {\n control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;\n }\n\n localProxyFormState && (localProxyFormState[_key] = true);\n return formState[_key];\n },\n });\n }\n\n return result;\n};\n","import { EmptyObject } from '../types';\n\nimport isObject from './isObject';\n\nexport default (value: unknown): value is EmptyObject =>\n isObject(value) && !Object.keys(value).length;\n","import { VALIDATION_MODE } from '../constants';\nimport {\n Control,\n FieldValues,\n FormState,\n InternalFieldName,\n ReadFormState,\n} from '../types';\nimport isEmptyObject from '../utils/isEmptyObject';\n\nexport default (\n formStateData: Partial> & { name?: InternalFieldName },\n _proxyFormState: K,\n updateFormState: Control['_updateFormState'],\n isRoot?: boolean,\n) => {\n updateFormState(formStateData);\n const { name, ...formState } = formStateData;\n\n return (\n isEmptyObject(formState) ||\n Object.keys(formState).length >= Object.keys(_proxyFormState).length ||\n Object.keys(formState).find(\n (key) =>\n _proxyFormState[key as keyof ReadFormState] ===\n (!isRoot || VALIDATION_MODE.all),\n )\n );\n};\n","export default (value: T) => (Array.isArray(value) ? value : [value]);\n","import convertToArrayPayload from '../utils/convertToArrayPayload';\n\nexport default (\n name?: T,\n signalName?: string,\n exact?: boolean,\n) =>\n !name ||\n !signalName ||\n name === signalName ||\n convertToArrayPayload(name).some(\n (currentName) =>\n currentName &&\n (exact\n ? currentName === signalName\n : currentName.startsWith(signalName) ||\n signalName.startsWith(currentName)),\n );\n","import React from 'react';\n\nimport { Subject } from './utils/createSubject';\n\ntype Props = {\n disabled?: boolean;\n subject: Subject;\n next: (value: T) => void;\n};\n\nexport function useSubscribe(props: Props) {\n const _props = React.useRef(props);\n _props.current = props;\n\n React.useEffect(() => {\n const subscription =\n !props.disabled &&\n _props.current.subject &&\n _props.current.subject.subscribe({\n next: _props.current.next,\n });\n\n return () => {\n subscription && subscription.unsubscribe();\n };\n }, [props.disabled]);\n}\n","export default (value: unknown): value is string => typeof value === 'string';\n","import { DeepPartial, FieldValues, Names } from '../types';\nimport get from '../utils/get';\nimport isString from '../utils/isString';\n\nexport default (\n names: string | string[] | undefined,\n _names: Names,\n formValues?: FieldValues,\n isGlobal?: boolean,\n defaultValue?: DeepPartial | unknown,\n) => {\n if (isString(names)) {\n isGlobal && _names.watch.add(names);\n return get(formValues, names, defaultValue);\n }\n\n if (Array.isArray(names)) {\n return names.map(\n (fieldName) => (\n isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)\n ),\n );\n }\n\n isGlobal && (_names.watchAll = true);\n\n return formValues;\n};\n","export default (value: string) => /^\\w*$/.test(value);\n","import compact from './compact';\n\nexport default (input: string): string[] =>\n compact(input.replace(/[\"|']|\\]/g, '').split(/\\.|\\[/));\n","import { FieldValues } from '../types';\n\nimport isKey from './isKey';\nimport isObject from './isObject';\nimport stringToPath from './stringToPath';\n\nexport default (object: FieldValues, path: string, value?: unknown) => {\n let index = -1;\n const tempPath = isKey(path) ? [path] : stringToPath(path);\n const length = tempPath.length;\n const lastIndex = length - 1;\n\n while (++index < length) {\n const key = tempPath[index];\n let newValue = value;\n\n if (index !== lastIndex) {\n const objValue = object[key];\n newValue =\n isObject(objValue) || Array.isArray(objValue)\n ? objValue\n : !isNaN(+tempPath[index + 1])\n ? []\n : {};\n }\n object[key] = newValue;\n object = object[key];\n }\n return object;\n};\n","import React from 'react';\n\nimport getEventValue from './logic/getEventValue';\nimport isNameInFieldArray from './logic/isNameInFieldArray';\nimport cloneObject from './utils/cloneObject';\nimport get from './utils/get';\nimport isBoolean from './utils/isBoolean';\nimport isUndefined from './utils/isUndefined';\nimport { EVENTS } from './constants';\nimport {\n ControllerFieldState,\n Field,\n FieldPath,\n FieldPathValue,\n FieldValues,\n InternalFieldName,\n UseControllerProps,\n UseControllerReturn,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useFormState } from './useFormState';\nimport { useWatch } from './useWatch';\nimport { set } from './utils';\n\n/**\n * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns field properties, field and form state. {@link UseControllerReturn}\n *\n * @example\n * ```tsx\n * function Input(props) {\n * const { field, fieldState, formState } = useController(props);\n * return (\n * \n *
\n *
{fieldState.isTouched && \"Touched\"}
\n *
{formState.isSubmitted ? \"submitted\" : \"\"}
\n *
= FieldPath,\n>(\n props: UseControllerProps,\n): UseControllerReturn {\n const methods = useFormContext();\n const { name, disabled, control = methods.control, shouldUnregister } = props;\n const isArrayField = isNameInFieldArray(control._names.array, name);\n const value = useWatch({\n control,\n name,\n defaultValue: get(\n control._formValues,\n name,\n get(control._defaultValues, name, props.defaultValue),\n ),\n exact: true,\n }) as FieldPathValue;\n const formState = useFormState({\n control,\n name,\n });\n\n const _registerProps = React.useRef(\n control.register(name, {\n ...props.rules,\n value,\n ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),\n }),\n );\n\n React.useEffect(() => {\n const _shouldUnregisterField =\n control._options.shouldUnregister || shouldUnregister;\n\n const updateMounted = (name: InternalFieldName, value: boolean) => {\n const field: Field = get(control._fields, name);\n\n if (field) {\n field._f.mount = value;\n }\n };\n\n updateMounted(name, true);\n\n if (_shouldUnregisterField) {\n const value = cloneObject(get(control._options.defaultValues, name));\n set(control._defaultValues, name, value);\n if (isUndefined(get(control._formValues, name))) {\n set(control._formValues, name, value);\n }\n }\n\n return () => {\n (\n isArrayField\n ? _shouldUnregisterField && !control._state.action\n : _shouldUnregisterField\n )\n ? control.unregister(name)\n : updateMounted(name, false);\n };\n }, [name, control, isArrayField, shouldUnregister]);\n\n React.useEffect(() => {\n if (get(control._fields, name)) {\n control._updateDisabledField({\n disabled,\n fields: control._fields,\n name,\n value: get(control._fields, name)._f.value,\n });\n }\n }, [disabled, name, control]);\n\n return {\n field: {\n name,\n value,\n ...(isBoolean(disabled) || formState.disabled\n ? { disabled: formState.disabled || disabled }\n : {}),\n onChange: React.useCallback(\n (event) =>\n _registerProps.current.onChange({\n target: {\n value: getEventValue(event),\n name: name as InternalFieldName,\n },\n type: EVENTS.CHANGE,\n }),\n [name],\n ),\n onBlur: React.useCallback(\n () =>\n _registerProps.current.onBlur({\n target: {\n value: get(control._formValues, name),\n name: name as InternalFieldName,\n },\n type: EVENTS.BLUR,\n }),\n [name, control],\n ),\n ref: (elm) => {\n const field = get(control._fields, name);\n\n if (field && elm) {\n field._f.ref = {\n focus: () => elm.focus(),\n select: () => elm.select(),\n setCustomValidity: (message: string) =>\n elm.setCustomValidity(message),\n reportValidity: () => elm.reportValidity(),\n };\n }\n },\n },\n formState,\n fieldState: Object.defineProperties(\n {},\n {\n invalid: {\n enumerable: true,\n get: () => !!get(formState.errors, name),\n },\n isDirty: {\n enumerable: true,\n get: () => !!get(formState.dirtyFields, name),\n },\n isTouched: {\n enumerable: true,\n get: () => !!get(formState.touchedFields, name),\n },\n isValidating: {\n enumerable: true,\n get: () => !!get(formState.validatingFields, name),\n },\n error: {\n enumerable: true,\n get: () => get(formState.errors, name),\n },\n },\n ) as ControllerFieldState,\n };\n}\n","import React from 'react';\n\nimport generateWatchOutput from './logic/generateWatchOutput';\nimport shouldSubscribeByName from './logic/shouldSubscribeByName';\nimport cloneObject from './utils/cloneObject';\nimport {\n Control,\n DeepPartialSkipArrayKey,\n FieldPath,\n FieldPathValue,\n FieldPathValues,\n FieldValues,\n InternalFieldName,\n UseWatchProps,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * Subscribe to the entire form values change and re-render at the hook level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * defaultValue: {\n * name: \"data\"\n * },\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n>(props: {\n defaultValue?: DeepPartialSkipArrayKey;\n control?: Control;\n disabled?: boolean;\n exact?: boolean;\n}): DeepPartialSkipArrayKey;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * name: \"fieldA\",\n * defaultValue: \"default value\",\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldName extends FieldPath = FieldPath,\n>(props: {\n name: TFieldName;\n defaultValue?: FieldPathValue;\n control?: Control;\n disabled?: boolean;\n exact?: boolean;\n}): FieldPathValue;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @param props - defaultValue, disable subscription and match exact name.\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * control,\n * name: [\"fieldA\", \"fieldB\"],\n * defaultValue: {\n * fieldA: \"data\",\n * fieldB: \"data\"\n * },\n * exact: false,\n * })\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n TFieldNames extends readonly FieldPath[] = readonly FieldPath[],\n>(props: {\n name: readonly [...TFieldNames];\n defaultValue?: DeepPartialSkipArrayKey;\n control?: Control;\n disabled?: boolean;\n exact?: boolean;\n}): FieldPathValues;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @example\n * ```tsx\n * // can skip passing down the control into useWatch if the form is wrapped with the FormProvider\n * const values = useWatch()\n * ```\n */\nexport function useWatch<\n TFieldValues extends FieldValues = FieldValues,\n>(): DeepPartialSkipArrayKey;\n/**\n * Custom hook to subscribe to field change and isolate re-rendering at the component level.\n *\n * @remarks\n *\n * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)\n *\n * @example\n * ```tsx\n * const { control } = useForm();\n * const values = useWatch({\n * name: \"fieldName\"\n * control,\n * })\n * ```\n */\nexport function useWatch(\n props?: UseWatchProps,\n) {\n const methods = useFormContext();\n const {\n control = methods.control,\n name,\n defaultValue,\n disabled,\n exact,\n } = props || {};\n const _name = React.useRef(name);\n\n _name.current = name;\n\n useSubscribe({\n disabled,\n subject: control._subjects.values,\n next: (formState: { name?: InternalFieldName; values?: FieldValues }) => {\n if (\n shouldSubscribeByName(\n _name.current as InternalFieldName,\n formState.name,\n exact,\n )\n ) {\n updateValue(\n cloneObject(\n generateWatchOutput(\n _name.current as InternalFieldName | InternalFieldName[],\n control._names,\n formState.values || control._formValues,\n false,\n defaultValue,\n ),\n ),\n );\n }\n },\n });\n\n const [value, updateValue] = React.useState(\n control._getWatch(\n name as InternalFieldName,\n defaultValue as DeepPartialSkipArrayKey,\n ),\n );\n\n React.useEffect(() => control._removeUnmounted());\n\n return value;\n}\n","import React from 'react';\n\nimport getProxyFormState from './logic/getProxyFormState';\nimport shouldRenderFormState from './logic/shouldRenderFormState';\nimport shouldSubscribeByName from './logic/shouldSubscribeByName';\nimport {\n FieldValues,\n FormState,\n InternalFieldName,\n UseFormStateProps,\n UseFormStateReturn,\n} from './types';\nimport { useFormContext } from './useFormContext';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)\n *\n * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}\n *\n * @example\n * ```tsx\n * function App() {\n * const { register, handleSubmit, control } = useForm({\n * defaultValues: {\n * firstName: \"firstName\"\n * }});\n * const { dirtyFields } = useFormState({\n * control\n * });\n * const onSubmit = (data) => console.log(data);\n *\n * return (\n * \n * );\n * }\n * ```\n */\nfunction useFormState(\n props?: UseFormStateProps,\n): UseFormStateReturn {\n const methods = useFormContext();\n const { control = methods.control, disabled, name, exact } = props || {};\n const [formState, updateFormState] = React.useState(control._formState);\n const _mounted = React.useRef(true);\n const _localProxyFormState = React.useRef({\n isDirty: false,\n isLoading: false,\n dirtyFields: false,\n touchedFields: false,\n validatingFields: false,\n isValidating: false,\n isValid: false,\n errors: false,\n });\n const _name = React.useRef(name);\n\n _name.current = name;\n\n useSubscribe({\n disabled,\n next: (\n value: Partial> & { name?: InternalFieldName },\n ) =>\n _mounted.current &&\n shouldSubscribeByName(\n _name.current as InternalFieldName,\n value.name,\n exact,\n ) &&\n shouldRenderFormState(\n value,\n _localProxyFormState.current,\n control._updateFormState,\n ) &&\n updateFormState({\n ...control._formState,\n ...value,\n }),\n subject: control._subjects.state,\n });\n\n React.useEffect(() => {\n _mounted.current = true;\n _localProxyFormState.current.isValid && control._updateValid(true);\n\n return () => {\n _mounted.current = false;\n };\n }, [control]);\n\n return getProxyFormState(\n formState,\n control,\n _localProxyFormState.current,\n false,\n );\n}\n\nexport { useFormState };\n","import { ControllerProps, FieldPath, FieldValues } from './types';\nimport { useController } from './useController';\n\n/**\n * Component based on `useController` hook to work with controlled component.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)\n *\n * @param props - the path name to the form field value, and validation rules.\n *\n * @returns provide field handler functions, field and form state.\n *\n * @example\n * ```tsx\n * function App() {\n * const { control } = useForm({\n * defaultValues: {\n * test: \"\"\n * }\n * });\n *\n * return (\n * \n * );\n * }\n * ```\n */\nconst Controller = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath = FieldPath,\n>(\n props: ControllerProps,\n) => props.render(useController(props));\n\nexport { Controller };\n","import {\n InternalFieldErrors,\n InternalFieldName,\n ValidateResult,\n} from '../types';\n\nexport default (\n name: InternalFieldName,\n validateAllFieldCriteria: boolean,\n errors: InternalFieldErrors,\n type: string,\n message: ValidateResult,\n) =>\n validateAllFieldCriteria\n ? {\n ...errors[name],\n types: {\n ...(errors[name] && errors[name]!.types ? errors[name]!.types : {}),\n [type]: message || true,\n },\n }\n : {};\n","import { VALIDATION_MODE } from '../constants';\nimport { Mode, ValidationModeFlags } from '../types';\n\nexport default (mode?: Mode): ValidationModeFlags => ({\n isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,\n isOnBlur: mode === VALIDATION_MODE.onBlur,\n isOnChange: mode === VALIDATION_MODE.onChange,\n isOnAll: mode === VALIDATION_MODE.all,\n isOnTouch: mode === VALIDATION_MODE.onTouched,\n});\n","import { InternalFieldName, Names } from '../types';\n\nexport default (\n name: InternalFieldName,\n _names: Names,\n isBlurEvent?: boolean,\n) =>\n !isBlurEvent &&\n (_names.watchAll ||\n _names.watch.has(name) ||\n [..._names.watch].some(\n (watchName) =>\n name.startsWith(watchName) &&\n /^\\.\\w+/.test(name.slice(watchName.length)),\n ));\n","import { FieldRefs, InternalFieldName, Ref } from '../types';\nimport { get } from '../utils';\nimport isObject from '../utils/isObject';\n\nconst iterateFieldsByAction = (\n fields: FieldRefs,\n action: (ref: Ref, name: string) => 1 | undefined | void,\n fieldsNames?: Set | InternalFieldName[] | 0,\n abortEarly?: boolean,\n) => {\n for (const key of fieldsNames || Object.keys(fields)) {\n const field = get(fields, key);\n\n if (field) {\n const { _f, ...currentField } = field;\n\n if (_f) {\n if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {\n break;\n } else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {\n break;\n } else {\n iterateFieldsByAction(currentField, action);\n }\n } else if (isObject(currentField)) {\n iterateFieldsByAction(currentField, action);\n }\n }\n }\n};\n\nexport default iterateFieldsByAction;\n","import {\n FieldError,\n FieldErrors,\n FieldValues,\n InternalFieldName,\n} from '../types';\nimport compact from '../utils/compact';\nimport get from '../utils/get';\nimport set from '../utils/set';\n\nexport default (\n errors: FieldErrors,\n error: Partial>,\n name: InternalFieldName,\n): FieldErrors => {\n const fieldArrayErrors = compact(get(errors, name));\n set(fieldArrayErrors, 'root', error[name]);\n set(errors, name, fieldArrayErrors);\n return errors;\n};\n","import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'file';\n","export default (value: unknown): value is Function =>\n typeof value === 'function';\n","import isWeb from './isWeb';\n\nexport default (value: unknown): value is HTMLElement => {\n if (!isWeb) {\n return false;\n }\n\n const owner = value ? ((value as HTMLElement).ownerDocument as Document) : 0;\n return (\n value instanceof\n (owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement)\n );\n};\n","import { Message } from '../types';\nimport isString from '../utils/isString';\n\nexport default (value: unknown): value is Message => isString(value);\n","import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLInputElement =>\n element.type === 'radio';\n","export default (value: unknown): value is RegExp => value instanceof RegExp;\n","import isUndefined from '../utils/isUndefined';\n\ntype CheckboxFieldResult = {\n isValid: boolean;\n value: string | string[] | boolean | undefined;\n};\n\nconst defaultResult: CheckboxFieldResult = {\n value: false,\n isValid: false,\n};\n\nconst validResult = { value: true, isValid: true };\n\nexport default (options?: HTMLInputElement[]): CheckboxFieldResult => {\n if (Array.isArray(options)) {\n if (options.length > 1) {\n const values = options\n .filter((option) => option && option.checked && !option.disabled)\n .map((option) => option.value);\n return { value: values, isValid: !!values.length };\n }\n\n return options[0].checked && !options[0].disabled\n ? // @ts-expect-error expected to work in the browser\n options[0].attributes && !isUndefined(options[0].attributes.value)\n ? isUndefined(options[0].value) || options[0].value === ''\n ? validResult\n : { value: options[0].value, isValid: true }\n : validResult\n : defaultResult;\n }\n\n return defaultResult;\n};\n","type RadioFieldResult = {\n isValid: boolean;\n value: number | string | null;\n};\n\nconst defaultReturn: RadioFieldResult = {\n isValid: false,\n value: null,\n};\n\nexport default (options?: HTMLInputElement[]): RadioFieldResult =>\n Array.isArray(options)\n ? options.reduce(\n (previous, option): RadioFieldResult =>\n option && option.checked && !option.disabled\n ? {\n isValid: true,\n value: option.value,\n }\n : previous,\n defaultReturn,\n )\n : defaultReturn;\n","import { FieldError, Ref, ValidateResult } from '../types';\nimport isBoolean from '../utils/isBoolean';\nimport isMessage from '../utils/isMessage';\n\nexport default function getValidateError(\n result: ValidateResult,\n ref: Ref,\n type = 'validate',\n): FieldError | void {\n if (\n isMessage(result) ||\n (Array.isArray(result) && result.every(isMessage)) ||\n (isBoolean(result) && !result)\n ) {\n return {\n type,\n message: isMessage(result) ? result : '',\n ref,\n };\n }\n}\n","import { ValidationRule } from '../types';\nimport isObject from '../utils/isObject';\nimport isRegex from '../utils/isRegex';\n\nexport default (validationData?: ValidationRule) =>\n isObject(validationData) && !isRegex(validationData)\n ? validationData\n : {\n value: validationData,\n message: '',\n };\n","import { INPUT_VALIDATION_RULES } from '../constants';\nimport {\n Field,\n FieldError,\n FieldValues,\n InternalFieldErrors,\n MaxType,\n Message,\n MinType,\n NativeFieldValue,\n} from '../types';\nimport get from '../utils/get';\nimport isBoolean from '../utils/isBoolean';\nimport isCheckBoxInput from '../utils/isCheckBoxInput';\nimport isEmptyObject from '../utils/isEmptyObject';\nimport isFileInput from '../utils/isFileInput';\nimport isFunction from '../utils/isFunction';\nimport isHTMLElement from '../utils/isHTMLElement';\nimport isMessage from '../utils/isMessage';\nimport isNullOrUndefined from '../utils/isNullOrUndefined';\nimport isObject from '../utils/isObject';\nimport isRadioInput from '../utils/isRadioInput';\nimport isRegex from '../utils/isRegex';\nimport isString from '../utils/isString';\nimport isUndefined from '../utils/isUndefined';\n\nimport appendErrors from './appendErrors';\nimport getCheckboxValue from './getCheckboxValue';\nimport getRadioValue from './getRadioValue';\nimport getValidateError from './getValidateError';\nimport getValueAndMessage from './getValueAndMessage';\n\nexport default async (\n field: Field,\n formValues: T,\n validateAllFieldCriteria: boolean,\n shouldUseNativeValidation?: boolean,\n isFieldArray?: boolean,\n): Promise => {\n const {\n ref,\n refs,\n required,\n maxLength,\n minLength,\n min,\n max,\n pattern,\n validate,\n name,\n valueAsNumber,\n mount,\n disabled,\n } = field._f;\n const inputValue: NativeFieldValue = get(formValues, name);\n if (!mount || disabled) {\n return {};\n }\n const inputRef: HTMLInputElement = refs ? refs[0] : (ref as HTMLInputElement);\n const setCustomValidity = (message?: string | boolean) => {\n if (shouldUseNativeValidation && inputRef.reportValidity) {\n inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');\n inputRef.reportValidity();\n }\n };\n const error: InternalFieldErrors = {};\n const isRadio = isRadioInput(ref);\n const isCheckBox = isCheckBoxInput(ref);\n const isRadioOrCheckbox = isRadio || isCheckBox;\n const isEmpty =\n ((valueAsNumber || isFileInput(ref)) &&\n isUndefined(ref.value) &&\n isUndefined(inputValue)) ||\n (isHTMLElement(ref) && ref.value === '') ||\n inputValue === '' ||\n (Array.isArray(inputValue) && !inputValue.length);\n const appendErrorsCurry = appendErrors.bind(\n null,\n name,\n validateAllFieldCriteria,\n error,\n );\n const getMinMaxMessage = (\n exceedMax: boolean,\n maxLengthMessage: Message,\n minLengthMessage: Message,\n maxType: MaxType = INPUT_VALIDATION_RULES.maxLength,\n minType: MinType = INPUT_VALIDATION_RULES.minLength,\n ) => {\n const message = exceedMax ? maxLengthMessage : minLengthMessage;\n error[name] = {\n type: exceedMax ? maxType : minType,\n message,\n ref,\n ...appendErrorsCurry(exceedMax ? maxType : minType, message),\n };\n };\n\n if (\n isFieldArray\n ? !Array.isArray(inputValue) || !inputValue.length\n : required &&\n ((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||\n (isBoolean(inputValue) && !inputValue) ||\n (isCheckBox && !getCheckboxValue(refs).isValid) ||\n (isRadio && !getRadioValue(refs).isValid))\n ) {\n const { value, message } = isMessage(required)\n ? { value: !!required, message: required }\n : getValueAndMessage(required);\n\n if (value) {\n error[name] = {\n type: INPUT_VALIDATION_RULES.required,\n message,\n ref: inputRef,\n ...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(message);\n return error;\n }\n }\n }\n\n if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {\n let exceedMax;\n let exceedMin;\n const maxOutput = getValueAndMessage(max);\n const minOutput = getValueAndMessage(min);\n\n if (!isNullOrUndefined(inputValue) && !isNaN(inputValue as number)) {\n const valueNumber =\n (ref as HTMLInputElement).valueAsNumber ||\n (inputValue ? +inputValue : inputValue);\n if (!isNullOrUndefined(maxOutput.value)) {\n exceedMax = valueNumber > maxOutput.value;\n }\n if (!isNullOrUndefined(minOutput.value)) {\n exceedMin = valueNumber < minOutput.value;\n }\n } else {\n const valueDate =\n (ref as HTMLInputElement).valueAsDate || new Date(inputValue as string);\n const convertTimeToDate = (time: unknown) =>\n new Date(new Date().toDateString() + ' ' + time);\n const isTime = ref.type == 'time';\n const isWeek = ref.type == 'week';\n\n if (isString(maxOutput.value) && inputValue) {\n exceedMax = isTime\n ? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)\n : isWeek\n ? inputValue > maxOutput.value\n : valueDate > new Date(maxOutput.value);\n }\n\n if (isString(minOutput.value) && inputValue) {\n exceedMin = isTime\n ? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)\n : isWeek\n ? inputValue < minOutput.value\n : valueDate < new Date(minOutput.value);\n }\n }\n\n if (exceedMax || exceedMin) {\n getMinMaxMessage(\n !!exceedMax,\n maxOutput.message,\n minOutput.message,\n INPUT_VALIDATION_RULES.max,\n INPUT_VALIDATION_RULES.min,\n );\n if (!validateAllFieldCriteria) {\n setCustomValidity(error[name]!.message);\n return error;\n }\n }\n }\n\n if (\n (maxLength || minLength) &&\n !isEmpty &&\n (isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))\n ) {\n const maxLengthOutput = getValueAndMessage(maxLength);\n const minLengthOutput = getValueAndMessage(minLength);\n const exceedMax =\n !isNullOrUndefined(maxLengthOutput.value) &&\n inputValue.length > +maxLengthOutput.value;\n const exceedMin =\n !isNullOrUndefined(minLengthOutput.value) &&\n inputValue.length < +minLengthOutput.value;\n\n if (exceedMax || exceedMin) {\n getMinMaxMessage(\n exceedMax,\n maxLengthOutput.message,\n minLengthOutput.message,\n );\n if (!validateAllFieldCriteria) {\n setCustomValidity(error[name]!.message);\n return error;\n }\n }\n }\n\n if (pattern && !isEmpty && isString(inputValue)) {\n const { value: patternValue, message } = getValueAndMessage(pattern);\n\n if (isRegex(patternValue) && !inputValue.match(patternValue)) {\n error[name] = {\n type: INPUT_VALIDATION_RULES.pattern,\n message,\n ref,\n ...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(message);\n return error;\n }\n }\n }\n\n if (validate) {\n if (isFunction(validate)) {\n const result = await validate(inputValue, formValues);\n const validateError = getValidateError(result, inputRef);\n\n if (validateError) {\n error[name] = {\n ...validateError,\n ...appendErrorsCurry(\n INPUT_VALIDATION_RULES.validate,\n validateError.message,\n ),\n };\n if (!validateAllFieldCriteria) {\n setCustomValidity(validateError.message);\n return error;\n }\n }\n } else if (isObject(validate)) {\n let validationResult = {} as FieldError;\n\n for (const key in validate) {\n if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {\n break;\n }\n\n const validateError = getValidateError(\n await validate[key](inputValue, formValues),\n inputRef,\n key,\n );\n\n if (validateError) {\n validationResult = {\n ...validateError,\n ...appendErrorsCurry(key, validateError.message),\n };\n\n setCustomValidity(validateError.message);\n\n if (validateAllFieldCriteria) {\n error[name] = validationResult;\n }\n }\n }\n\n if (!isEmptyObject(validationResult)) {\n error[name] = {\n ref: inputRef,\n ...validationResult,\n };\n if (!validateAllFieldCriteria) {\n return error;\n }\n }\n }\n }\n\n setCustomValidity(true);\n return error;\n};\n","import isEmptyObject from './isEmptyObject';\nimport isKey from './isKey';\nimport isObject from './isObject';\nimport isUndefined from './isUndefined';\nimport stringToPath from './stringToPath';\n\nfunction baseGet(object: any, updatePath: (string | number)[]) {\n const length = updatePath.slice(0, -1).length;\n let index = 0;\n\n while (index < length) {\n object = isUndefined(object) ? index++ : object[updatePath[index++]];\n }\n\n return object;\n}\n\nfunction isEmptyArray(obj: unknown[]) {\n for (const key in obj) {\n if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {\n return false;\n }\n }\n return true;\n}\n\nexport default function unset(object: any, path: string | (string | number)[]) {\n const paths = Array.isArray(path)\n ? path\n : isKey(path)\n ? [path]\n : stringToPath(path);\n\n const childObject = paths.length === 1 ? object : baseGet(object, paths);\n\n const index = paths.length - 1;\n const key = paths[index];\n\n if (childObject) {\n delete childObject[key];\n }\n\n if (\n index !== 0 &&\n ((isObject(childObject) && isEmptyObject(childObject)) ||\n (Array.isArray(childObject) && isEmptyArray(childObject)))\n ) {\n unset(object, paths.slice(0, -1));\n }\n\n return object;\n}\n","import { Noop } from '../types';\n\nexport type Observer = {\n next: (value: T) => void;\n};\n\nexport type Subscription = {\n unsubscribe: Noop;\n};\n\nexport type Subject = {\n readonly observers: Observer[];\n subscribe: (value: Observer) => Subscription;\n unsubscribe: Noop;\n} & Observer;\n\nexport default (): Subject => {\n let _observers: Observer[] = [];\n\n const next = (value: T) => {\n for (const observer of _observers) {\n observer.next && observer.next(value);\n }\n };\n\n const subscribe = (observer: Observer): Subscription => {\n _observers.push(observer);\n return {\n unsubscribe: () => {\n _observers = _observers.filter((o) => o !== observer);\n },\n };\n };\n\n const unsubscribe = () => {\n _observers = [];\n };\n\n return {\n get observers() {\n return _observers;\n },\n next,\n subscribe,\n unsubscribe,\n };\n};\n","import { Primitive } from '../types';\n\nimport isNullOrUndefined from './isNullOrUndefined';\nimport { isObjectType } from './isObject';\n\nexport default (value: unknown): value is Primitive =>\n isNullOrUndefined(value) || !isObjectType(value);\n","import isObject from '../utils/isObject';\n\nimport isDateObject from './isDateObject';\nimport isPrimitive from './isPrimitive';\n\nexport default function deepEqual(object1: any, object2: any) {\n if (isPrimitive(object1) || isPrimitive(object2)) {\n return object1 === object2;\n }\n\n if (isDateObject(object1) && isDateObject(object2)) {\n return object1.getTime() === object2.getTime();\n }\n\n const keys1 = Object.keys(object1);\n const keys2 = Object.keys(object2);\n\n if (keys1.length !== keys2.length) {\n return false;\n }\n\n for (const key of keys1) {\n const val1 = object1[key];\n\n if (!keys2.includes(key)) {\n return false;\n }\n\n if (key !== 'ref') {\n const val2 = object2[key];\n\n if (\n (isDateObject(val1) && isDateObject(val2)) ||\n (isObject(val1) && isObject(val2)) ||\n (Array.isArray(val1) && Array.isArray(val2))\n ? !deepEqual(val1, val2)\n : val1 !== val2\n ) {\n return false;\n }\n }\n }\n\n return true;\n}\n","import { FieldElement } from '../types';\n\nexport default (element: FieldElement): element is HTMLSelectElement =>\n element.type === `select-multiple`;\n","import { FieldElement } from '../types';\n\nimport isCheckBoxInput from './isCheckBoxInput';\nimport isRadioInput from './isRadioInput';\n\nexport default (ref: FieldElement): ref is HTMLInputElement =>\n isRadioInput(ref) || isCheckBoxInput(ref);\n","import { Ref } from '../types';\n\nimport isHTMLElement from './isHTMLElement';\n\nexport default (ref: Ref) => isHTMLElement(ref) && ref.isConnected;\n","import isObject from './isObject';\n\nexport default (value: unknown): value is object =>\n isObject(value) && Object.values(value).some((val) => val);\n","import isFunction from './isFunction';\n\nexport default (data: T): boolean => {\n for (const key in data) {\n if (isFunction(data[key])) {\n return true;\n }\n }\n return false;\n};\n","import deepEqual from '../utils/deepEqual';\nimport isNullOrUndefined from '../utils/isNullOrUndefined';\nimport isObject from '../utils/isObject';\nimport isPrimitive from '../utils/isPrimitive';\nimport isUndefined from '../utils/isUndefined';\nimport objectHasFunction from '../utils/objectHasFunction';\n\nfunction markFieldsDirty(data: T, fields: Record = {}) {\n const isParentNodeArray = Array.isArray(data);\n\n if (isObject(data) || isParentNodeArray) {\n for (const key in data) {\n if (\n Array.isArray(data[key]) ||\n (isObject(data[key]) && !objectHasFunction(data[key]))\n ) {\n fields[key] = Array.isArray(data[key]) ? [] : {};\n markFieldsDirty(data[key], fields[key]);\n } else if (!isNullOrUndefined(data[key])) {\n fields[key] = true;\n }\n }\n }\n\n return fields;\n}\n\nfunction getDirtyFieldsFromDefaultValues(\n data: T,\n formValues: T,\n dirtyFieldsFromValues: Record<\n Extract,\n ReturnType | boolean\n >,\n) {\n const isParentNodeArray = Array.isArray(data);\n\n if (isObject(data) || isParentNodeArray) {\n for (const key in data) {\n if (\n Array.isArray(data[key]) ||\n (isObject(data[key]) && !objectHasFunction(data[key]))\n ) {\n if (\n isUndefined(formValues) ||\n isPrimitive(dirtyFieldsFromValues[key])\n ) {\n dirtyFieldsFromValues[key] = Array.isArray(data[key])\n ? markFieldsDirty(data[key], [])\n : { ...markFieldsDirty(data[key]) };\n } else {\n getDirtyFieldsFromDefaultValues(\n data[key],\n isNullOrUndefined(formValues) ? {} : formValues[key],\n dirtyFieldsFromValues[key],\n );\n }\n } else {\n dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);\n }\n }\n }\n\n return dirtyFieldsFromValues;\n}\n\nexport default (defaultValues: T, formValues: T) =>\n getDirtyFieldsFromDefaultValues(\n defaultValues,\n formValues,\n markFieldsDirty(formValues),\n );\n","import { Field, NativeFieldValue } from '../types';\nimport isString from '../utils/isString';\nimport isUndefined from '../utils/isUndefined';\n\nexport default (\n value: T,\n { valueAsNumber, valueAsDate, setValueAs }: Field['_f'],\n) =>\n isUndefined(value)\n ? value\n : valueAsNumber\n ? value === ''\n ? NaN\n : value\n ? +value\n : value\n : valueAsDate && isString(value)\n ? new Date(value)\n : setValueAs\n ? setValueAs(value)\n : value;\n","import { Field } from '../types';\nimport isCheckBox from '../utils/isCheckBoxInput';\nimport isFileInput from '../utils/isFileInput';\nimport isMultipleSelect from '../utils/isMultipleSelect';\nimport isRadioInput from '../utils/isRadioInput';\nimport isUndefined from '../utils/isUndefined';\n\nimport getCheckboxValue from './getCheckboxValue';\nimport getFieldValueAs from './getFieldValueAs';\nimport getRadioValue from './getRadioValue';\n\nexport default function getFieldValue(_f: Field['_f']) {\n const ref = _f.ref;\n\n if (_f.refs ? _f.refs.every((ref) => ref.disabled) : ref.disabled) {\n return;\n }\n\n if (isFileInput(ref)) {\n return ref.files;\n }\n\n if (isRadioInput(ref)) {\n return getRadioValue(_f.refs).value;\n }\n\n if (isMultipleSelect(ref)) {\n return [...ref.selectedOptions].map(({ value }) => value);\n }\n\n if (isCheckBox(ref)) {\n return getCheckboxValue(_f.refs).value;\n }\n\n return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);\n}\n","import {\n CriteriaMode,\n Field,\n FieldName,\n FieldRefs,\n FieldValues,\n InternalFieldName,\n} from '../types';\nimport { get } from '../utils';\nimport set from '../utils/set';\n\nexport default (\n fieldsNames: Set | InternalFieldName[],\n _fields: FieldRefs,\n criteriaMode?: CriteriaMode,\n shouldUseNativeValidation?: boolean | undefined,\n) => {\n const fields: Record = {};\n\n for (const name of fieldsNames) {\n const field: Field = get(_fields, name);\n\n field && set(fields, name, field._f);\n }\n\n return {\n criteriaMode,\n names: [...fieldsNames] as FieldName[],\n fields,\n shouldUseNativeValidation,\n };\n};\n","import {\n ValidationRule,\n ValidationValue,\n ValidationValueMessage,\n} from '../types';\nimport isObject from '../utils/isObject';\nimport isRegex from '../utils/isRegex';\nimport isUndefined from '../utils/isUndefined';\n\nexport default (\n rule?: ValidationRule | ValidationValueMessage,\n) =>\n isUndefined(rule)\n ? rule\n : isRegex(rule)\n ? rule.source\n : isObject(rule)\n ? isRegex(rule.value)\n ? rule.value.source\n : rule.value\n : rule;\n","import { Field } from '../types';\n\nexport default (options: Field['_f']) =>\n options.mount &&\n (options.required ||\n options.min ||\n options.max ||\n options.maxLength ||\n options.minLength ||\n options.pattern ||\n options.validate);\n","import { FieldError, FieldErrors, FieldValues } from '../types';\nimport get from '../utils/get';\nimport isKey from '../utils/isKey';\n\nexport default function schemaErrorLookup(\n errors: FieldErrors,\n _fields: FieldValues,\n name: string,\n): {\n error?: FieldError;\n name: string;\n} {\n const error = get(errors, name);\n\n if (error || isKey(name)) {\n return {\n error,\n name,\n };\n }\n\n const names = name.split('.');\n\n while (names.length) {\n const fieldName = names.join('.');\n const field = get(_fields, fieldName);\n const foundError = get(errors, fieldName);\n\n if (field && !Array.isArray(field) && name !== fieldName) {\n return { name };\n }\n\n if (foundError && foundError.type) {\n return {\n name: fieldName,\n error: foundError,\n };\n }\n\n names.pop();\n }\n\n return {\n name,\n };\n}\n","import { ValidationModeFlags } from '../types';\n\nexport default (\n isBlurEvent: boolean,\n isTouched: boolean,\n isSubmitted: boolean,\n reValidateMode: {\n isOnBlur: boolean;\n isOnChange: boolean;\n },\n mode: Partial,\n) => {\n if (mode.isOnAll) {\n return false;\n } else if (!isSubmitted && mode.isOnTouch) {\n return !(isTouched || isBlurEvent);\n } else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {\n return !isBlurEvent;\n } else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {\n return isBlurEvent;\n }\n return true;\n};\n","import compact from '../utils/compact';\nimport get from '../utils/get';\nimport unset from '../utils/unset';\n\nexport default (ref: T, name: string) =>\n !compact(get(ref, name)).length && unset(ref, name);\n","import { EVENTS, VALIDATION_MODE } from '../constants';\nimport {\n BatchFieldArrayUpdate,\n ChangeHandler,\n Control,\n DeepPartial,\n DelayCallback,\n EventType,\n Field,\n FieldError,\n FieldErrors,\n FieldNamesMarkedBoolean,\n FieldPath,\n FieldRefs,\n FieldValues,\n FormState,\n GetIsDirty,\n InternalFieldName,\n Names,\n Path,\n PathValue,\n ReadFormState,\n Ref,\n SetFieldValue,\n SetValueConfig,\n Subjects,\n UseFormClearErrors,\n UseFormGetFieldState,\n UseFormGetValues,\n UseFormHandleSubmit,\n UseFormProps,\n UseFormRegister,\n UseFormReset,\n UseFormResetField,\n UseFormReturn,\n UseFormSetError,\n UseFormSetFocus,\n UseFormSetValue,\n UseFormTrigger,\n UseFormUnregister,\n UseFormWatch,\n WatchInternal,\n WatchObserver,\n} from '../types';\nimport cloneObject from '../utils/cloneObject';\nimport compact from '../utils/compact';\nimport convertToArrayPayload from '../utils/convertToArrayPayload';\nimport createSubject from '../utils/createSubject';\nimport deepEqual from '../utils/deepEqual';\nimport get from '../utils/get';\nimport isBoolean from '../utils/isBoolean';\nimport isCheckBoxInput from '../utils/isCheckBoxInput';\nimport isDateObject from '../utils/isDateObject';\nimport isEmptyObject from '../utils/isEmptyObject';\nimport isFileInput from '../utils/isFileInput';\nimport isFunction from '../utils/isFunction';\nimport isHTMLElement from '../utils/isHTMLElement';\nimport isMultipleSelect from '../utils/isMultipleSelect';\nimport isNullOrUndefined from '../utils/isNullOrUndefined';\nimport isObject from '../utils/isObject';\nimport isPrimitive from '../utils/isPrimitive';\nimport isRadioOrCheckbox from '../utils/isRadioOrCheckbox';\nimport isString from '../utils/isString';\nimport isUndefined from '../utils/isUndefined';\nimport isWeb from '../utils/isWeb';\nimport live from '../utils/live';\nimport objectHasTruthyValue from '../utils/objectHasTruthyValue';\nimport set from '../utils/set';\nimport unset from '../utils/unset';\n\nimport generateWatchOutput from './generateWatchOutput';\nimport getDirtyFields from './getDirtyFields';\nimport getEventValue from './getEventValue';\nimport getFieldValue from './getFieldValue';\nimport getFieldValueAs from './getFieldValueAs';\nimport getResolverOptions from './getResolverOptions';\nimport getRuleValue from './getRuleValue';\nimport getValidationModes from './getValidationModes';\nimport hasValidation from './hasValidation';\nimport isNameInFieldArray from './isNameInFieldArray';\nimport isWatched from './isWatched';\nimport iterateFieldsByAction from './iterateFieldsByAction';\nimport schemaErrorLookup from './schemaErrorLookup';\nimport skipValidation from './skipValidation';\nimport unsetEmptyArray from './unsetEmptyArray';\nimport updateFieldArrayRootError from './updateFieldArrayRootError';\nimport validateField from './validateField';\n\nconst defaultOptions = {\n mode: VALIDATION_MODE.onSubmit,\n reValidateMode: VALIDATION_MODE.onChange,\n shouldFocusError: true,\n} as const;\n\nexport function createFormControl<\n TFieldValues extends FieldValues = FieldValues,\n TContext = any,\n>(\n props: UseFormProps = {},\n): Omit, 'formState'> {\n let _options = {\n ...defaultOptions,\n ...props,\n };\n let _formState: FormState = {\n submitCount: 0,\n isDirty: false,\n isLoading: isFunction(_options.defaultValues),\n isValidating: false,\n isSubmitted: false,\n isSubmitting: false,\n isSubmitSuccessful: false,\n isValid: false,\n touchedFields: {},\n dirtyFields: {},\n validatingFields: {},\n errors: _options.errors || {},\n disabled: _options.disabled || false,\n };\n let _fields: FieldRefs = {};\n let _defaultValues =\n isObject(_options.defaultValues) || isObject(_options.values)\n ? cloneObject(_options.defaultValues || _options.values) || {}\n : {};\n let _formValues = _options.shouldUnregister\n ? {}\n : cloneObject(_defaultValues);\n let _state = {\n action: false,\n mount: false,\n watch: false,\n };\n let _names: Names = {\n mount: new Set(),\n unMount: new Set(),\n array: new Set(),\n watch: new Set(),\n };\n let delayErrorCallback: DelayCallback | null;\n let timer = 0;\n const _proxyFormState: ReadFormState = {\n isDirty: false,\n dirtyFields: false,\n validatingFields: false,\n touchedFields: false,\n isValidating: false,\n isValid: false,\n errors: false,\n };\n const _subjects: Subjects = {\n values: createSubject(),\n array: createSubject(),\n state: createSubject(),\n };\n const validationModeBeforeSubmit = getValidationModes(_options.mode);\n const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);\n const shouldDisplayAllAssociatedErrors =\n _options.criteriaMode === VALIDATION_MODE.all;\n\n const debounce =\n (callback: T) =>\n (wait: number) => {\n clearTimeout(timer);\n timer = setTimeout(callback, wait);\n };\n\n const _updateValid = async (shouldUpdateValid?: boolean) => {\n if (_proxyFormState.isValid || shouldUpdateValid) {\n const isValid = _options.resolver\n ? isEmptyObject((await _executeSchema()).errors)\n : await executeBuiltInValidation(_fields, true);\n\n if (isValid !== _formState.isValid) {\n _subjects.state.next({\n isValid,\n });\n }\n }\n };\n\n const _updateIsValidating = (isValidating: boolean, names: string[]) => {\n if (!(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {\n return;\n }\n names.forEach((name) => {\n set(_formState.validatingFields, name, isValidating);\n });\n _formState.isValidating = objectHasTruthyValue(_formState.validatingFields);\n _subjects.state.next({\n validatingFields: _formState.validatingFields,\n isValidating: _formState.isValidating,\n });\n };\n\n const _updateFieldArray: BatchFieldArrayUpdate = (\n name,\n values = [],\n method,\n args,\n shouldSetValues = true,\n shouldUpdateFieldsAndState = true,\n ) => {\n if (args && method) {\n _state.action = true;\n if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {\n const fieldValues = method(get(_fields, name), args.argA, args.argB);\n shouldSetValues && set(_fields, name, fieldValues);\n }\n\n if (\n shouldUpdateFieldsAndState &&\n Array.isArray(get(_formState.errors, name))\n ) {\n const errors = method(\n get(_formState.errors, name),\n args.argA,\n args.argB,\n );\n shouldSetValues && set(_formState.errors, name, errors);\n unsetEmptyArray(_formState.errors, name);\n }\n\n if (\n _proxyFormState.touchedFields &&\n shouldUpdateFieldsAndState &&\n Array.isArray(get(_formState.touchedFields, name))\n ) {\n const touchedFields = method(\n get(_formState.touchedFields, name),\n args.argA,\n args.argB,\n );\n shouldSetValues && set(_formState.touchedFields, name, touchedFields);\n }\n\n if (_proxyFormState.dirtyFields) {\n _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);\n }\n\n _subjects.state.next({\n name,\n isDirty: _getDirty(name, values),\n dirtyFields: _formState.dirtyFields,\n errors: _formState.errors,\n isValid: _formState.isValid,\n });\n } else {\n set(_formValues, name, values);\n }\n };\n\n const updateErrors = (name: InternalFieldName, error: FieldError) => {\n set(_formState.errors, name, error);\n _subjects.state.next({\n errors: _formState.errors,\n });\n };\n\n const _setErrors = (errors: FieldErrors) => {\n _formState.errors = errors;\n _subjects.state.next({\n errors: _formState.errors,\n isValid: false,\n });\n };\n\n const updateValidAndValue = (\n name: InternalFieldName,\n shouldSkipSetValueAs: boolean,\n value?: unknown,\n ref?: Ref,\n ) => {\n const field: Field = get(_fields, name);\n\n if (field) {\n const defaultValue = get(\n _formValues,\n name,\n isUndefined(value) ? get(_defaultValues, name) : value,\n );\n\n isUndefined(defaultValue) ||\n (ref && (ref as HTMLInputElement).defaultChecked) ||\n shouldSkipSetValueAs\n ? set(\n _formValues,\n name,\n shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f),\n )\n : setFieldValue(name, defaultValue);\n\n _state.mount && _updateValid();\n }\n };\n\n const updateTouchAndDirty = (\n name: InternalFieldName,\n fieldValue: unknown,\n isBlurEvent?: boolean,\n shouldDirty?: boolean,\n shouldRender?: boolean,\n ): Partial<\n Pick, 'dirtyFields' | 'isDirty' | 'touchedFields'>\n > => {\n let shouldUpdateField = false;\n let isPreviousDirty = false;\n const output: Partial> & { name: string } = {\n name,\n };\n const disabledField = !!(\n get(_fields, name) && get(_fields, name)._f.disabled\n );\n\n if (!isBlurEvent || shouldDirty) {\n if (_proxyFormState.isDirty) {\n isPreviousDirty = _formState.isDirty;\n _formState.isDirty = output.isDirty = _getDirty();\n shouldUpdateField = isPreviousDirty !== output.isDirty;\n }\n\n const isCurrentFieldPristine =\n disabledField || deepEqual(get(_defaultValues, name), fieldValue);\n\n isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));\n isCurrentFieldPristine || disabledField\n ? unset(_formState.dirtyFields, name)\n : set(_formState.dirtyFields, name, true);\n output.dirtyFields = _formState.dirtyFields;\n shouldUpdateField =\n shouldUpdateField ||\n (_proxyFormState.dirtyFields &&\n isPreviousDirty !== !isCurrentFieldPristine);\n }\n\n if (isBlurEvent) {\n const isPreviousFieldTouched = get(_formState.touchedFields, name);\n\n if (!isPreviousFieldTouched) {\n set(_formState.touchedFields, name, isBlurEvent);\n output.touchedFields = _formState.touchedFields;\n shouldUpdateField =\n shouldUpdateField ||\n (_proxyFormState.touchedFields &&\n isPreviousFieldTouched !== isBlurEvent);\n }\n }\n\n shouldUpdateField && shouldRender && _subjects.state.next(output);\n\n return shouldUpdateField ? output : {};\n };\n\n const shouldRenderByError = (\n name: InternalFieldName,\n isValid?: boolean,\n error?: FieldError,\n fieldState?: {\n dirty?: FieldNamesMarkedBoolean;\n isDirty?: boolean;\n touched?: FieldNamesMarkedBoolean;\n },\n ) => {\n const previousFieldError = get(_formState.errors, name);\n const shouldUpdateValid =\n _proxyFormState.isValid &&\n isBoolean(isValid) &&\n _formState.isValid !== isValid;\n\n if (props.delayError && error) {\n delayErrorCallback = debounce(() => updateErrors(name, error));\n delayErrorCallback(props.delayError);\n } else {\n clearTimeout(timer);\n delayErrorCallback = null;\n error\n ? set(_formState.errors, name, error)\n : unset(_formState.errors, name);\n }\n\n if (\n (error ? !deepEqual(previousFieldError, error) : previousFieldError) ||\n !isEmptyObject(fieldState) ||\n shouldUpdateValid\n ) {\n const updatedFormState = {\n ...fieldState,\n ...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),\n errors: _formState.errors,\n name,\n };\n\n _formState = {\n ..._formState,\n ...updatedFormState,\n };\n\n _subjects.state.next(updatedFormState);\n }\n\n _updateIsValidating(\n false,\n Object.keys(_formState.validatingFields).filter((key) => key === name),\n );\n };\n\n const _executeSchema = async (name?: InternalFieldName[]) =>\n _options.resolver!(\n _formValues as TFieldValues,\n _options.context,\n getResolverOptions(\n name || _names.mount,\n _fields,\n _options.criteriaMode,\n _options.shouldUseNativeValidation,\n ),\n );\n\n const executeSchemaAndUpdateState = async (names?: InternalFieldName[]) => {\n const { errors } = await _executeSchema(names);\n\n if (names) {\n for (const name of names) {\n const error = get(errors, name);\n error\n ? set(_formState.errors, name, error)\n : unset(_formState.errors, name);\n }\n } else {\n _formState.errors = errors;\n }\n\n return errors;\n };\n\n const executeBuiltInValidation = async (\n fields: FieldRefs,\n shouldOnlyCheckValid?: boolean,\n context: {\n valid: boolean;\n } = {\n valid: true,\n },\n ) => {\n for (const name in fields) {\n const field = fields[name];\n\n if (field) {\n const { _f, ...fieldValue } = field;\n\n if (_f) {\n const isFieldArrayRoot = _names.array.has(_f.name);\n const fieldError = await validateField(\n field,\n _formValues,\n shouldDisplayAllAssociatedErrors,\n _options.shouldUseNativeValidation && !shouldOnlyCheckValid,\n isFieldArrayRoot,\n );\n\n if (fieldError[_f.name]) {\n context.valid = false;\n if (shouldOnlyCheckValid) {\n break;\n }\n }\n\n !shouldOnlyCheckValid &&\n (get(fieldError, _f.name)\n ? isFieldArrayRoot\n ? updateFieldArrayRootError(\n _formState.errors,\n fieldError,\n _f.name,\n )\n : set(_formState.errors, _f.name, fieldError[_f.name])\n : unset(_formState.errors, _f.name));\n }\n\n fieldValue &&\n (await executeBuiltInValidation(\n fieldValue,\n shouldOnlyCheckValid,\n context,\n ));\n }\n }\n\n return context.valid;\n };\n\n const _removeUnmounted = () => {\n for (const name of _names.unMount) {\n const field: Field = get(_fields, name);\n\n field &&\n (field._f.refs\n ? field._f.refs.every((ref) => !live(ref))\n : !live(field._f.ref)) &&\n unregister(name as FieldPath);\n }\n\n _names.unMount = new Set();\n };\n\n const _getDirty: GetIsDirty = (name, data) => (\n name && data && set(_formValues, name, data),\n !deepEqual(getValues(), _defaultValues)\n );\n\n const _getWatch: WatchInternal = (\n names,\n defaultValue,\n isGlobal,\n ) =>\n generateWatchOutput(\n names,\n _names,\n {\n ...(_state.mount\n ? _formValues\n : isUndefined(defaultValue)\n ? _defaultValues\n : isString(names)\n ? { [names]: defaultValue }\n : defaultValue),\n },\n isGlobal,\n defaultValue,\n );\n\n const _getFieldArray = (\n name: InternalFieldName,\n ): Partial[] =>\n compact(\n get(\n _state.mount ? _formValues : _defaultValues,\n name,\n props.shouldUnregister ? get(_defaultValues, name, []) : [],\n ),\n );\n\n const setFieldValue = (\n name: InternalFieldName,\n value: SetFieldValue,\n options: SetValueConfig = {},\n ) => {\n const field: Field = get(_fields, name);\n let fieldValue: unknown = value;\n\n if (field) {\n const fieldReference = field._f;\n\n if (fieldReference) {\n !fieldReference.disabled &&\n set(_formValues, name, getFieldValueAs(value, fieldReference));\n\n fieldValue =\n isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)\n ? ''\n : value;\n\n if (isMultipleSelect(fieldReference.ref)) {\n [...fieldReference.ref.options].forEach(\n (optionRef) =>\n (optionRef.selected = (\n fieldValue as InternalFieldName[]\n ).includes(optionRef.value)),\n );\n } else if (fieldReference.refs) {\n if (isCheckBoxInput(fieldReference.ref)) {\n fieldReference.refs.length > 1\n ? fieldReference.refs.forEach(\n (checkboxRef) =>\n (!checkboxRef.defaultChecked || !checkboxRef.disabled) &&\n (checkboxRef.checked = Array.isArray(fieldValue)\n ? !!(fieldValue as []).find(\n (data: string) => data === checkboxRef.value,\n )\n : fieldValue === checkboxRef.value),\n )\n : fieldReference.refs[0] &&\n (fieldReference.refs[0].checked = !!fieldValue);\n } else {\n fieldReference.refs.forEach(\n (radioRef: HTMLInputElement) =>\n (radioRef.checked = radioRef.value === fieldValue),\n );\n }\n } else if (isFileInput(fieldReference.ref)) {\n fieldReference.ref.value = '';\n } else {\n fieldReference.ref.value = fieldValue;\n\n if (!fieldReference.ref.type) {\n _subjects.values.next({\n name,\n values: { ..._formValues },\n });\n }\n }\n }\n }\n\n (options.shouldDirty || options.shouldTouch) &&\n updateTouchAndDirty(\n name,\n fieldValue,\n options.shouldTouch,\n options.shouldDirty,\n true,\n );\n\n options.shouldValidate && trigger(name as Path);\n };\n\n const setValues = <\n T extends InternalFieldName,\n K extends SetFieldValue,\n U extends SetValueConfig,\n >(\n name: T,\n value: K,\n options: U,\n ) => {\n for (const fieldKey in value) {\n const fieldValue = value[fieldKey];\n const fieldName = `${name}.${fieldKey}`;\n const field = get(_fields, fieldName);\n\n (_names.array.has(name) ||\n !isPrimitive(fieldValue) ||\n (field && !field._f)) &&\n !isDateObject(fieldValue)\n ? setValues(fieldName, fieldValue, options)\n : setFieldValue(fieldName, fieldValue, options);\n }\n };\n\n const setValue: UseFormSetValue = (\n name,\n value,\n options = {},\n ) => {\n const field = get(_fields, name);\n const isFieldArray = _names.array.has(name);\n const cloneValue = cloneObject(value);\n\n set(_formValues, name, cloneValue);\n\n if (isFieldArray) {\n _subjects.array.next({\n name,\n values: { ..._formValues },\n });\n\n if (\n (_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&\n options.shouldDirty\n ) {\n _subjects.state.next({\n name,\n dirtyFields: getDirtyFields(_defaultValues, _formValues),\n isDirty: _getDirty(name, cloneValue),\n });\n }\n } else {\n field && !field._f && !isNullOrUndefined(cloneValue)\n ? setValues(name, cloneValue, options)\n : setFieldValue(name, cloneValue, options);\n }\n\n isWatched(name, _names) && _subjects.state.next({ ..._formState });\n _subjects.values.next({\n name: _state.mount ? name : undefined,\n values: { ..._formValues },\n });\n };\n\n const onChange: ChangeHandler = async (event) => {\n const target = event.target;\n let name = target.name as string;\n let isFieldValueUpdated = true;\n const field: Field = get(_fields, name);\n const getCurrentFieldValue = () =>\n target.type ? getFieldValue(field._f) : getEventValue(event);\n const _updateIsFieldValueUpdated = (fieldValue: any): void => {\n isFieldValueUpdated =\n Number.isNaN(fieldValue) ||\n fieldValue === get(_formValues, name, fieldValue);\n };\n\n if (field) {\n let error;\n let isValid;\n const fieldValue = getCurrentFieldValue();\n const isBlurEvent =\n event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;\n const shouldSkipValidation =\n (!hasValidation(field._f) &&\n !_options.resolver &&\n !get(_formState.errors, name) &&\n !field._f.deps) ||\n skipValidation(\n isBlurEvent,\n get(_formState.touchedFields, name),\n _formState.isSubmitted,\n validationModeAfterSubmit,\n validationModeBeforeSubmit,\n );\n const watched = isWatched(name, _names, isBlurEvent);\n\n set(_formValues, name, fieldValue);\n\n if (isBlurEvent) {\n field._f.onBlur && field._f.onBlur(event);\n delayErrorCallback && delayErrorCallback(0);\n } else if (field._f.onChange) {\n field._f.onChange(event);\n }\n\n const fieldState = updateTouchAndDirty(\n name,\n fieldValue,\n isBlurEvent,\n false,\n );\n\n const shouldRender = !isEmptyObject(fieldState) || watched;\n\n !isBlurEvent &&\n _subjects.values.next({\n name,\n type: event.type,\n values: { ..._formValues },\n });\n\n if (shouldSkipValidation) {\n _proxyFormState.isValid && _updateValid();\n\n return (\n shouldRender &&\n _subjects.state.next({ name, ...(watched ? {} : fieldState) })\n );\n }\n\n !isBlurEvent && watched && _subjects.state.next({ ..._formState });\n\n _updateIsValidating(true, [name]);\n\n if (_options.resolver) {\n const { errors } = await _executeSchema([name]);\n\n _updateIsFieldValueUpdated(fieldValue);\n\n if (isFieldValueUpdated) {\n const previousErrorLookupResult = schemaErrorLookup(\n _formState.errors,\n _fields,\n name,\n );\n const errorLookupResult = schemaErrorLookup(\n errors,\n _fields,\n previousErrorLookupResult.name || name,\n );\n\n error = errorLookupResult.error;\n name = errorLookupResult.name;\n\n isValid = isEmptyObject(errors);\n }\n } else {\n error = (\n await validateField(\n field,\n _formValues,\n shouldDisplayAllAssociatedErrors,\n _options.shouldUseNativeValidation,\n )\n )[name];\n\n _updateIsFieldValueUpdated(fieldValue);\n\n if (isFieldValueUpdated) {\n if (error) {\n isValid = false;\n } else if (_proxyFormState.isValid) {\n isValid = await executeBuiltInValidation(_fields, true);\n }\n }\n }\n\n if (isFieldValueUpdated) {\n field._f.deps &&\n trigger(\n field._f.deps as\n | FieldPath\n | FieldPath[],\n );\n shouldRenderByError(name, isValid, error, fieldState);\n }\n }\n };\n\n const _focusInput = (ref: Ref, key: string) => {\n if (get(_formState.errors, key) && ref.focus) {\n ref.focus();\n return 1;\n }\n return;\n };\n\n const trigger: UseFormTrigger = async (name, options = {}) => {\n let isValid;\n let validationResult;\n const fieldNames = convertToArrayPayload(name) as InternalFieldName[];\n\n _updateIsValidating(true, fieldNames);\n\n if (_options.resolver) {\n const errors = await executeSchemaAndUpdateState(\n isUndefined(name) ? name : fieldNames,\n );\n\n isValid = isEmptyObject(errors);\n validationResult = name\n ? !fieldNames.some((name) => get(errors, name))\n : isValid;\n } else if (name) {\n validationResult = (\n await Promise.all(\n fieldNames.map(async (fieldName) => {\n const field = get(_fields, fieldName);\n return await executeBuiltInValidation(\n field && field._f ? { [fieldName]: field } : field,\n );\n }),\n )\n ).every(Boolean);\n !(!validationResult && !_formState.isValid) && _updateValid();\n } else {\n validationResult = isValid = await executeBuiltInValidation(_fields);\n }\n\n _subjects.state.next({\n ...(!isString(name) ||\n (_proxyFormState.isValid && isValid !== _formState.isValid)\n ? {}\n : { name }),\n ...(_options.resolver || !name ? { isValid } : {}),\n errors: _formState.errors,\n isValidating: false,\n });\n\n options.shouldFocus &&\n !validationResult &&\n iterateFieldsByAction(\n _fields,\n _focusInput,\n name ? fieldNames : _names.mount,\n );\n\n return validationResult;\n };\n\n const getValues: UseFormGetValues = (\n fieldNames?:\n | FieldPath\n | ReadonlyArray>,\n ) => {\n const values = {\n ..._defaultValues,\n ...(_state.mount ? _formValues : {}),\n };\n\n return isUndefined(fieldNames)\n ? values\n : isString(fieldNames)\n ? get(values, fieldNames)\n : fieldNames.map((name) => get(values, name));\n };\n\n const getFieldState: UseFormGetFieldState = (\n name,\n formState,\n ) => ({\n invalid: !!get((formState || _formState).errors, name),\n isDirty: !!get((formState || _formState).dirtyFields, name),\n isTouched: !!get((formState || _formState).touchedFields, name),\n isValidating: !!get((formState || _formState).validatingFields, name),\n error: get((formState || _formState).errors, name),\n });\n\n const clearErrors: UseFormClearErrors = (name) => {\n name &&\n convertToArrayPayload(name).forEach((inputName) =>\n unset(_formState.errors, inputName),\n );\n\n _subjects.state.next({\n errors: name ? _formState.errors : {},\n });\n };\n\n const setError: UseFormSetError = (name, error, options) => {\n const ref = (get(_fields, name, { _f: {} })._f || {}).ref;\n\n set(_formState.errors, name, {\n ...error,\n ref,\n });\n\n _subjects.state.next({\n name,\n errors: _formState.errors,\n isValid: false,\n });\n\n options && options.shouldFocus && ref && ref.focus && ref.focus();\n };\n\n const watch: UseFormWatch = (\n name?:\n | FieldPath\n | ReadonlyArray>\n | WatchObserver,\n defaultValue?: DeepPartial,\n ) =>\n isFunction(name)\n ? _subjects.values.subscribe({\n next: (payload) =>\n name(\n _getWatch(undefined, defaultValue),\n payload as {\n name?: FieldPath;\n type?: EventType;\n value?: unknown;\n },\n ),\n })\n : _getWatch(\n name as InternalFieldName | InternalFieldName[],\n defaultValue,\n true,\n );\n\n const unregister: UseFormUnregister = (name, options = {}) => {\n for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {\n _names.mount.delete(fieldName);\n _names.array.delete(fieldName);\n\n if (!options.keepValue) {\n unset(_fields, fieldName);\n unset(_formValues, fieldName);\n }\n\n !options.keepError && unset(_formState.errors, fieldName);\n !options.keepDirty && unset(_formState.dirtyFields, fieldName);\n !options.keepTouched && unset(_formState.touchedFields, fieldName);\n !options.keepIsValidating &&\n unset(_formState.validatingFields, fieldName);\n !_options.shouldUnregister &&\n !options.keepDefaultValue &&\n unset(_defaultValues, fieldName);\n }\n\n _subjects.values.next({\n values: { ..._formValues },\n });\n\n _subjects.state.next({\n ..._formState,\n ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),\n });\n\n !options.keepIsValid && _updateValid();\n };\n\n const _updateDisabledField: Control['_updateDisabledField'] = ({\n disabled,\n name,\n field,\n fields,\n value,\n }) => {\n if (isBoolean(disabled)) {\n const inputValue = disabled\n ? undefined\n : isUndefined(value)\n ? getFieldValue(field ? field._f : get(fields, name)._f)\n : value;\n set(_formValues, name, inputValue);\n updateTouchAndDirty(name, inputValue, false, false, true);\n }\n };\n\n const register: UseFormRegister = (name, options = {}) => {\n let field = get(_fields, name);\n const disabledIsDefined = isBoolean(options.disabled);\n\n set(_fields, name, {\n ...(field || {}),\n _f: {\n ...(field && field._f ? field._f : { ref: { name } }),\n name,\n mount: true,\n ...options,\n },\n });\n _names.mount.add(name);\n\n if (field) {\n _updateDisabledField({\n field,\n disabled: options.disabled,\n name,\n value: options.value,\n });\n } else {\n updateValidAndValue(name, true, options.value);\n }\n\n return {\n ...(disabledIsDefined ? { disabled: options.disabled } : {}),\n ...(_options.progressive\n ? {\n required: !!options.required,\n min: getRuleValue(options.min),\n max: getRuleValue(options.max),\n minLength: getRuleValue(options.minLength) as number,\n maxLength: getRuleValue(options.maxLength) as number,\n pattern: getRuleValue(options.pattern) as string,\n }\n : {}),\n name,\n onChange,\n onBlur: onChange,\n ref: (ref: HTMLInputElement | null): void => {\n if (ref) {\n register(name, options);\n field = get(_fields, name);\n\n const fieldRef = isUndefined(ref.value)\n ? ref.querySelectorAll\n ? (ref.querySelectorAll('input,select,textarea')[0] as Ref) || ref\n : ref\n : ref;\n const radioOrCheckbox = isRadioOrCheckbox(fieldRef);\n const refs = field._f.refs || [];\n\n if (\n radioOrCheckbox\n ? refs.find((option: Ref) => option === fieldRef)\n : fieldRef === field._f.ref\n ) {\n return;\n }\n\n set(_fields, name, {\n _f: {\n ...field._f,\n ...(radioOrCheckbox\n ? {\n refs: [\n ...refs.filter(live),\n fieldRef,\n ...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),\n ],\n ref: { type: fieldRef.type, name },\n }\n : { ref: fieldRef }),\n },\n });\n\n updateValidAndValue(name, false, undefined, fieldRef);\n } else {\n field = get(_fields, name, {});\n\n if (field._f) {\n field._f.mount = false;\n }\n\n (_options.shouldUnregister || options.shouldUnregister) &&\n !(isNameInFieldArray(_names.array, name) && _state.action) &&\n _names.unMount.add(name);\n }\n },\n };\n };\n\n const _focusError = () =>\n _options.shouldFocusError &&\n iterateFieldsByAction(_fields, _focusInput, _names.mount);\n\n const _disableForm = (disabled?: boolean) => {\n if (isBoolean(disabled)) {\n _subjects.state.next({ disabled });\n iterateFieldsByAction(\n _fields,\n (ref, name) => {\n let requiredDisabledState = disabled;\n const currentField = get(_fields, name);\n if (currentField && isBoolean(currentField._f.disabled)) {\n requiredDisabledState ||= currentField._f.disabled;\n }\n\n ref.disabled = requiredDisabledState;\n },\n 0,\n false,\n );\n }\n };\n\n const handleSubmit: UseFormHandleSubmit =\n (onValid, onInvalid) => async (e) => {\n let onValidError = undefined;\n if (e) {\n e.preventDefault && e.preventDefault();\n e.persist && e.persist();\n }\n let fieldValues = cloneObject(_formValues);\n\n _subjects.state.next({\n isSubmitting: true,\n });\n\n if (_options.resolver) {\n const { errors, values } = await _executeSchema();\n _formState.errors = errors;\n fieldValues = values;\n } else {\n await executeBuiltInValidation(_fields);\n }\n\n unset(_formState.errors, 'root');\n\n if (isEmptyObject(_formState.errors)) {\n _subjects.state.next({\n errors: {},\n });\n try {\n await onValid(fieldValues as TFieldValues, e);\n } catch (error) {\n onValidError = error;\n }\n } else {\n if (onInvalid) {\n await onInvalid({ ..._formState.errors }, e);\n }\n _focusError();\n setTimeout(_focusError);\n }\n\n _subjects.state.next({\n isSubmitted: true,\n isSubmitting: false,\n isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,\n submitCount: _formState.submitCount + 1,\n errors: _formState.errors,\n });\n if (onValidError) {\n throw onValidError;\n }\n };\n\n const resetField: UseFormResetField = (name, options = {}) => {\n if (get(_fields, name)) {\n if (isUndefined(options.defaultValue)) {\n setValue(name, cloneObject(get(_defaultValues, name)));\n } else {\n setValue(\n name,\n options.defaultValue as PathValue<\n TFieldValues,\n FieldPath\n >,\n );\n set(_defaultValues, name, cloneObject(options.defaultValue));\n }\n\n if (!options.keepTouched) {\n unset(_formState.touchedFields, name);\n }\n\n if (!options.keepDirty) {\n unset(_formState.dirtyFields, name);\n _formState.isDirty = options.defaultValue\n ? _getDirty(name, cloneObject(get(_defaultValues, name)))\n : _getDirty();\n }\n\n if (!options.keepError) {\n unset(_formState.errors, name);\n _proxyFormState.isValid && _updateValid();\n }\n\n _subjects.state.next({ ..._formState });\n }\n };\n\n const _reset: UseFormReset = (\n formValues,\n keepStateOptions = {},\n ) => {\n const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;\n const cloneUpdatedValues = cloneObject(updatedValues);\n const isEmptyResetValues = isEmptyObject(formValues);\n const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;\n\n if (!keepStateOptions.keepDefaultValues) {\n _defaultValues = updatedValues;\n }\n\n if (!keepStateOptions.keepValues) {\n if (keepStateOptions.keepDirtyValues) {\n for (const fieldName of _names.mount) {\n get(_formState.dirtyFields, fieldName)\n ? set(values, fieldName, get(_formValues, fieldName))\n : setValue(\n fieldName as FieldPath,\n get(values, fieldName),\n );\n }\n } else {\n if (isWeb && isUndefined(formValues)) {\n for (const name of _names.mount) {\n const field = get(_fields, name);\n if (field && field._f) {\n const fieldReference = Array.isArray(field._f.refs)\n ? field._f.refs[0]\n : field._f.ref;\n\n if (isHTMLElement(fieldReference)) {\n const form = fieldReference.closest('form');\n if (form) {\n form.reset();\n break;\n }\n }\n }\n }\n }\n\n _fields = {};\n }\n\n _formValues = props.shouldUnregister\n ? keepStateOptions.keepDefaultValues\n ? cloneObject(_defaultValues)\n : {}\n : cloneObject(values);\n\n _subjects.array.next({\n values: { ...values },\n });\n\n _subjects.values.next({\n values: { ...values },\n });\n }\n\n _names = {\n mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),\n unMount: new Set(),\n array: new Set(),\n watch: new Set(),\n watchAll: false,\n focus: '',\n };\n\n _state.mount =\n !_proxyFormState.isValid ||\n !!keepStateOptions.keepIsValid ||\n !!keepStateOptions.keepDirtyValues;\n\n _state.watch = !!props.shouldUnregister;\n\n _subjects.state.next({\n submitCount: keepStateOptions.keepSubmitCount\n ? _formState.submitCount\n : 0,\n isDirty: isEmptyResetValues\n ? false\n : keepStateOptions.keepDirty\n ? _formState.isDirty\n : !!(\n keepStateOptions.keepDefaultValues &&\n !deepEqual(formValues, _defaultValues)\n ),\n isSubmitted: keepStateOptions.keepIsSubmitted\n ? _formState.isSubmitted\n : false,\n dirtyFields: isEmptyResetValues\n ? []\n : keepStateOptions.keepDirtyValues\n ? keepStateOptions.keepDefaultValues && _formValues\n ? getDirtyFields(_defaultValues, _formValues)\n : _formState.dirtyFields\n : keepStateOptions.keepDefaultValues && formValues\n ? getDirtyFields(_defaultValues, formValues)\n : {},\n touchedFields: keepStateOptions.keepTouched\n ? _formState.touchedFields\n : {},\n errors: keepStateOptions.keepErrors ? _formState.errors : {},\n isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful\n ? _formState.isSubmitSuccessful\n : false,\n isSubmitting: false,\n });\n };\n\n const reset: UseFormReset = (formValues, keepStateOptions) =>\n _reset(\n isFunction(formValues)\n ? formValues(_formValues as TFieldValues)\n : formValues,\n keepStateOptions,\n );\n\n const setFocus: UseFormSetFocus = (name, options = {}) => {\n const field = get(_fields, name);\n const fieldReference = field && field._f;\n\n if (fieldReference) {\n const fieldRef = fieldReference.refs\n ? fieldReference.refs[0]\n : fieldReference.ref;\n\n if (fieldRef.focus) {\n fieldRef.focus();\n options.shouldSelect && fieldRef.select();\n }\n }\n };\n\n const _updateFormState = (\n updatedFormState: Partial>,\n ) => {\n _formState = {\n ..._formState,\n ...updatedFormState,\n };\n };\n\n const _resetDefaultValues = () =>\n isFunction(_options.defaultValues) &&\n _options.defaultValues().then((values) => {\n reset(values, _options.resetOptions);\n _subjects.state.next({\n isLoading: false,\n });\n });\n\n return {\n control: {\n register,\n unregister,\n getFieldState,\n handleSubmit,\n setError,\n _executeSchema,\n _getWatch,\n _getDirty,\n _updateValid,\n _removeUnmounted,\n _updateFieldArray,\n _updateDisabledField,\n _getFieldArray,\n _reset,\n _resetDefaultValues,\n _updateFormState,\n _disableForm,\n _subjects,\n _proxyFormState,\n _setErrors,\n get _fields() {\n return _fields;\n },\n get _formValues() {\n return _formValues;\n },\n get _state() {\n return _state;\n },\n set _state(value) {\n _state = value;\n },\n get _defaultValues() {\n return _defaultValues;\n },\n get _names() {\n return _names;\n },\n set _names(value) {\n _names = value;\n },\n get _formState() {\n return _formState;\n },\n set _formState(value) {\n _formState = value;\n },\n get _options() {\n return _options;\n },\n set _options(value) {\n _options = {\n ..._options,\n ...value,\n };\n },\n },\n trigger,\n register,\n handleSubmit,\n watch,\n setValue,\n getValues,\n reset,\n resetField,\n clearErrors,\n unregister,\n setError,\n setFocus,\n getFieldState,\n };\n}\n","import React from 'react';\n\nimport { createFormControl } from './logic/createFormControl';\nimport getProxyFormState from './logic/getProxyFormState';\nimport shouldRenderFormState from './logic/shouldRenderFormState';\nimport deepEqual from './utils/deepEqual';\nimport isFunction from './utils/isFunction';\nimport {\n FieldValues,\n FormState,\n InternalFieldName,\n UseFormProps,\n UseFormReturn,\n} from './types';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * Custom hook to manage the entire form.\n *\n * @remarks\n * [API](https://react-hook-form.com/docs/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)\n *\n * @param props - form configuration and validation parameters.\n *\n * @returns methods - individual functions to manage the form state. {@link UseFormReturn}\n *\n * @example\n * ```tsx\n * function App() {\n * const { register, handleSubmit, watch, formState: { errors } } = useForm();\n * const onSubmit = data => console.log(data);\n *\n * console.log(watch(\"example\"));\n *\n * return (\n * \n * );\n * }\n * ```\n */\nexport function useForm<\n TFieldValues extends FieldValues = FieldValues,\n TContext = any,\n TTransformedValues extends FieldValues | undefined = undefined,\n>(\n props: UseFormProps = {},\n): UseFormReturn {\n const _formControl = React.useRef<\n UseFormReturn | undefined\n >();\n const _values = React.useRef();\n const [formState, updateFormState] = React.useState>({\n isDirty: false,\n isValidating: false,\n isLoading: isFunction(props.defaultValues),\n isSubmitted: false,\n isSubmitting: false,\n isSubmitSuccessful: false,\n isValid: false,\n submitCount: 0,\n dirtyFields: {},\n touchedFields: {},\n validatingFields: {},\n errors: props.errors || {},\n disabled: props.disabled || false,\n defaultValues: isFunction(props.defaultValues)\n ? undefined\n : props.defaultValues,\n });\n\n if (!_formControl.current) {\n _formControl.current = {\n ...createFormControl(props),\n formState,\n };\n }\n\n const control = _formControl.current.control;\n control._options = props;\n\n useSubscribe({\n subject: control._subjects.state,\n next: (\n value: Partial> & { name?: InternalFieldName },\n ) => {\n if (\n shouldRenderFormState(\n value,\n control._proxyFormState,\n control._updateFormState,\n true,\n )\n ) {\n updateFormState({ ...control._formState });\n }\n },\n });\n\n React.useEffect(\n () => control._disableForm(props.disabled),\n [control, props.disabled],\n );\n\n React.useEffect(() => {\n if (control._proxyFormState.isDirty) {\n const isDirty = control._getDirty();\n if (isDirty !== formState.isDirty) {\n control._subjects.state.next({\n isDirty,\n });\n }\n }\n }, [control, formState.isDirty]);\n\n React.useEffect(() => {\n if (props.values && !deepEqual(props.values, _values.current)) {\n control._reset(props.values, control._options.resetOptions);\n _values.current = props.values;\n updateFormState((state) => ({ ...state }));\n } else {\n control._resetDefaultValues();\n }\n }, [props.values, control]);\n\n React.useEffect(() => {\n if (props.errors) {\n control._setErrors(props.errors);\n }\n }, [props.errors, control]);\n\n React.useEffect(() => {\n if (!control._state.mount) {\n control._updateValid();\n control._state.mount = true;\n }\n\n if (control._state.watch) {\n control._state.watch = false;\n control._subjects.state.next({ ...control._formState });\n }\n\n control._removeUnmounted();\n });\n\n React.useEffect(() => {\n props.shouldUnregister &&\n control._subjects.values.next({\n values: control._getWatch(),\n });\n }, [props.shouldUnregister, control]);\n\n _formControl.current.formState = getProxyFormState(formState, control);\n\n return _formControl.current;\n}\n","/**\n * Removes `key` and its value from the hash.\n *\n * @private\n * @name delete\n * @memberOf Hash\n * @param {Object} hash The hash to modify.\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction hashDelete(key) {\n var result = this.has(key) && delete this.__data__[key];\n this.size -= result ? 1 : 0;\n return result;\n}\n\nmodule.exports = hashDelete;\n","var isBrowser = \"object\" !== 'undefined';\nfunction getRegisteredStyles(registered, registeredStyles, classNames) {\n var rawClassName = '';\n classNames.split(' ').forEach(function (className) {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className] + \";\");\n } else {\n rawClassName += className + \" \";\n }\n });\n return rawClassName;\n}\nvar registerStyles = function registerStyles(cache, serialized, isStringTag) {\n var className = cache.key + \"-\" + serialized.name;\n\n if ( // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false || // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n isBrowser === false ) && cache.registered[className] === undefined) {\n cache.registered[className] = serialized.styles;\n }\n};\nvar insertStyles = function insertStyles(cache, serialized, isStringTag) {\n registerStyles(cache, serialized, isStringTag);\n var className = cache.key + \"-\" + serialized.name;\n\n if (cache.inserted[serialized.name] === undefined) {\n var current = serialized;\n\n do {\n cache.insert(serialized === current ? \".\" + className : '', current, cache.sheet, true);\n\n current = current.next;\n } while (current !== undefined);\n }\n};\n\nexport { getRegisteredStyles, insertStyles, registerStyles };\n","var unitlessKeys = {\n animationIterationCount: 1,\n aspectRatio: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport { unitlessKeys as default };\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport { memoize as default };\n","import hashString from '@emotion/hash';\nimport unitless from '@emotion/unitless';\nimport memoize from '@emotion/memoize';\n\nvar ILLEGAL_ESCAPE_SEQUENCE_ERROR = \"You have illegal escape sequence in your template literal, most likely inside content's property value.\\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\\"content: '\\\\00d7';\\\" should become \\\"content: '\\\\\\\\00d7';\\\".\\nYou can read more about this here:\\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences\";\nvar UNDEFINED_AS_OBJECT_KEY_ERROR = \"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).\";\nvar hyphenateRegex = /[A-Z]|^ms/g;\nvar animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;\n\nvar isCustomProperty = function isCustomProperty(property) {\n return property.charCodeAt(1) === 45;\n};\n\nvar isProcessableValue = function isProcessableValue(value) {\n return value != null && typeof value !== 'boolean';\n};\n\nvar processStyleName = /* #__PURE__ */memoize(function (styleName) {\n return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();\n});\n\nvar processStyleValue = function processStyleValue(key, value) {\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n if (typeof value === 'string') {\n return value.replace(animationRegex, function (match, p1, p2) {\n cursor = {\n name: p1,\n styles: p2,\n next: cursor\n };\n return p1;\n });\n }\n }\n }\n\n if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {\n return value + 'px';\n }\n\n return value;\n};\n\nif (process.env.NODE_ENV !== 'production') {\n var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\\(|(no-)?(open|close)-quote/;\n var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];\n var oldProcessStyleValue = processStyleValue;\n var msPattern = /^-ms-/;\n var hyphenPattern = /-(.)/g;\n var hyphenatedCache = {};\n\n processStyleValue = function processStyleValue(key, value) {\n if (key === 'content') {\n if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '\"' && value.charAt(0) !== \"'\")) {\n throw new Error(\"You seem to be using a value for 'content' without quotes, try replacing it with `content: '\\\"\" + value + \"\\\"'`\");\n }\n }\n\n var processed = oldProcessStyleValue(key, value);\n\n if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {\n hyphenatedCache[key] = true;\n console.error(\"Using kebab-case for css properties in objects is not supported. Did you mean \" + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {\n return _char.toUpperCase();\n }) + \"?\");\n }\n\n return processed;\n };\n}\n\nvar noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';\n\nfunction handleInterpolation(mergedProps, registered, interpolation) {\n if (interpolation == null) {\n return '';\n }\n\n if (interpolation.__emotion_styles !== undefined) {\n if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {\n throw new Error(noComponentSelectorMessage);\n }\n\n return interpolation;\n }\n\n switch (typeof interpolation) {\n case 'boolean':\n {\n return '';\n }\n\n case 'object':\n {\n if (interpolation.anim === 1) {\n cursor = {\n name: interpolation.name,\n styles: interpolation.styles,\n next: cursor\n };\n return interpolation.name;\n }\n\n if (interpolation.styles !== undefined) {\n var next = interpolation.next;\n\n if (next !== undefined) {\n // not the most efficient thing ever but this is a pretty rare case\n // and there will be very few iterations of this generally\n while (next !== undefined) {\n cursor = {\n name: next.name,\n styles: next.styles,\n next: cursor\n };\n next = next.next;\n }\n }\n\n var styles = interpolation.styles + \";\";\n\n if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {\n styles += interpolation.map;\n }\n\n return styles;\n }\n\n return createStringFromObject(mergedProps, registered, interpolation);\n }\n\n case 'function':\n {\n if (mergedProps !== undefined) {\n var previousCursor = cursor;\n var result = interpolation(mergedProps);\n cursor = previousCursor;\n return handleInterpolation(mergedProps, registered, result);\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('Functions that are interpolated in css calls will be stringified.\\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\\n' + 'It can be called directly with props or interpolated in a styled call like this\\n' + \"let SomeComponent = styled('div')`${dynamicStyle}`\");\n }\n\n break;\n }\n\n case 'string':\n if (process.env.NODE_ENV !== 'production') {\n var matched = [];\n var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {\n var fakeVarName = \"animation\" + matched.length;\n matched.push(\"const \" + fakeVarName + \" = keyframes`\" + p2.replace(/^@keyframes animation-\\w+/, '') + \"`\");\n return \"${\" + fakeVarName + \"}\";\n });\n\n if (matched.length) {\n console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\\n\\n' + 'Instead of doing this:\\n\\n' + [].concat(matched, [\"`\" + replaced + \"`\"]).join('\\n') + '\\n\\nYou should wrap it with `css` like this:\\n\\n' + (\"css`\" + replaced + \"`\"));\n }\n }\n\n break;\n } // finalize string values (regular strings and functions interpolated into css calls)\n\n\n if (registered == null) {\n return interpolation;\n }\n\n var cached = registered[interpolation];\n return cached !== undefined ? cached : interpolation;\n}\n\nfunction createStringFromObject(mergedProps, registered, obj) {\n var string = '';\n\n if (Array.isArray(obj)) {\n for (var i = 0; i < obj.length; i++) {\n string += handleInterpolation(mergedProps, registered, obj[i]) + \";\";\n }\n } else {\n for (var _key in obj) {\n var value = obj[_key];\n\n if (typeof value !== 'object') {\n if (registered != null && registered[value] !== undefined) {\n string += _key + \"{\" + registered[value] + \"}\";\n } else if (isProcessableValue(value)) {\n string += processStyleName(_key) + \":\" + processStyleValue(_key, value) + \";\";\n }\n } else {\n if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {\n throw new Error(noComponentSelectorMessage);\n }\n\n if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {\n for (var _i = 0; _i < value.length; _i++) {\n if (isProcessableValue(value[_i])) {\n string += processStyleName(_key) + \":\" + processStyleValue(_key, value[_i]) + \";\";\n }\n }\n } else {\n var interpolated = handleInterpolation(mergedProps, registered, value);\n\n switch (_key) {\n case 'animation':\n case 'animationName':\n {\n string += processStyleName(_key) + \":\" + interpolated + \";\";\n break;\n }\n\n default:\n {\n if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {\n console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);\n }\n\n string += _key + \"{\" + interpolated + \"}\";\n }\n }\n }\n }\n }\n }\n\n return string;\n}\n\nvar labelPattern = /label:\\s*([^\\s;\\n{]+)\\s*(;|$)/g;\nvar sourceMapPattern;\n\nif (process.env.NODE_ENV !== 'production') {\n sourceMapPattern = /\\/\\*#\\ssourceMappingURL=data:application\\/json;\\S+\\s+\\*\\//g;\n} // this is the cursor for keyframes\n// keyframes are stored on the SerializedStyles object as a linked list\n\n\nvar cursor;\nvar serializeStyles = function serializeStyles(args, registered, mergedProps) {\n if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {\n return args[0];\n }\n\n var stringMode = true;\n var styles = '';\n cursor = undefined;\n var strings = args[0];\n\n if (strings == null || strings.raw === undefined) {\n stringMode = false;\n styles += handleInterpolation(mergedProps, registered, strings);\n } else {\n if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[0];\n } // we start at 1 since we've already handled the first arg\n\n\n for (var i = 1; i < args.length; i++) {\n styles += handleInterpolation(mergedProps, registered, args[i]);\n\n if (stringMode) {\n if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[i];\n }\n }\n\n var sourceMap;\n\n if (process.env.NODE_ENV !== 'production') {\n styles = styles.replace(sourceMapPattern, function (match) {\n sourceMap = match;\n return '';\n });\n } // using a global regex with .exec is stateful so lastIndex has to be reset each time\n\n\n labelPattern.lastIndex = 0;\n var identifierName = '';\n var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5\n\n while ((match = labelPattern.exec(styles)) !== null) {\n identifierName += '-' + // $FlowFixMe we know it's not null\n match[1];\n }\n\n var name = hashString(styles) + identifierName;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)\n return {\n name: name,\n styles: styles,\n map: sourceMap,\n next: cursor,\n toString: function toString() {\n return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\";\n }\n };\n }\n\n return {\n name: name,\n styles: styles,\n next: cursor\n };\n};\n\nexport { serializeStyles };\n","/* eslint-disable */\n// Inspired by https://github.com/garycourt/murmurhash-js\n// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86\nfunction murmur2(str) {\n // 'm' and 'r' are mixing constants generated offline.\n // They're not really 'magic', they just happen to work well.\n // const m = 0x5bd1e995;\n // const r = 24;\n // Initialize the hash\n var h = 0; // Mix 4 bytes at a time into the hash\n\n var k,\n i = 0,\n len = str.length;\n\n for (; len >= 4; ++i, len -= 4) {\n k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;\n k =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);\n k ^=\n /* k >>> r: */\n k >>> 24;\n h =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Handle the last few bytes of the input array\n\n\n switch (len) {\n case 3:\n h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n\n case 2:\n h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n\n case 1:\n h ^= str.charCodeAt(i) & 0xff;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Do a few final mixes of the hash to ensure the last few\n // bytes are well-incorporated.\n\n\n h ^= h >>> 13;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n return ((h ^ h >>> 15) >>> 0).toString(36);\n}\n\nexport { murmur2 as default };\n","import * as React from 'react';\n\nvar syncFallback = function syncFallback(create) {\n return create();\n};\n\nvar useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;\nvar useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;\nvar useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;\n\nexport { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwn = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwn as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwn, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-43c6fea0.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-43c6fea0.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.4\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.3\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.2\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwn.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other >>1,e=a[d];if(0>>1;dg(C,c))ng(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(ng(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}\nfunction g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D=\"function\"===typeof setTimeout?setTimeout:null,E=\"function\"===typeof clearTimeout?clearTimeout:null,F=\"undefined\"!==typeof setImmediate?setImmediate:null;\n\"undefined\"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}}\nfunction J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if(\"function\"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1;\nfunction M(){return exports.unstable_now()-Qa||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","var nativeCreate = require('./_nativeCreate');\n\n/**\n * Removes all key-value entries from the hash.\n *\n * @private\n * @name clear\n * @memberOf Hash\n */\nfunction hashClear() {\n this.__data__ = nativeCreate ? nativeCreate(null) : {};\n this.size = 0;\n}\n\nmodule.exports = hashClear;\n","/**\n * Gets the stack value for `key`.\n *\n * @private\n * @name get\n * @memberOf Stack\n * @param {string} key The key of the value to get.\n * @returns {*} Returns the entry value.\n */\nfunction stackGet(key) {\n return this.__data__.get(key);\n}\n\nmodule.exports = stackGet;\n","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nfunction _unsupportedIterableToArray(r, a) {\n if (r) {\n if (\"string\" == typeof r) return arrayLikeToArray(r, a);\n var t = {}.toString.call(r).slice(8, -1);\n return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? arrayLikeToArray(r, a) : void 0;\n }\n}\nexport { _unsupportedIterableToArray as default };","/**\n * The base implementation of `_.hasIn` without support for deep paths.\n *\n * @private\n * @param {Object} [object] The object to query.\n * @param {Array|string} key The key to check.\n * @returns {boolean} Returns `true` if `key` exists, else `false`.\n */\nfunction baseHasIn(object, key) {\n return object != null && key in Object(object);\n}\n\nmodule.exports = baseHasIn;\n","var baseSlice = require('./_baseSlice');\n\n/**\n * Casts `array` to a slice if it's needed.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {number} start The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the cast slice.\n */\nfunction castSlice(array, start, end) {\n var length = array.length;\n end = end === undefined ? length : end;\n return (!start && end >= length) ? array : baseSlice(array, start, end);\n}\n\nmodule.exports = castSlice;\n","var arrayLikeKeys = require('./_arrayLikeKeys'),\n baseKeys = require('./_baseKeys'),\n isArrayLike = require('./isArrayLike');\n\n/**\n * Creates an array of the own enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects. See the\n * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * for more details.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keys(new Foo);\n * // => ['a', 'b'] (iteration order is not guaranteed)\n *\n * _.keys('hi');\n * // => ['0', '1']\n */\nfunction keys(object) {\n return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);\n}\n\nmodule.exports = keys;\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('../cjs/use-sync-external-store-shim.production.min.js');\n} else {\n module.exports = require('../cjs/use-sync-external-store-shim.development.js');\n}\n","var assocIndexOf = require('./_assocIndexOf');\n\n/** Used for built-in method references. */\nvar arrayProto = Array.prototype;\n\n/** Built-in value references. */\nvar splice = arrayProto.splice;\n\n/**\n * Removes `key` and its value from the list cache.\n *\n * @private\n * @name delete\n * @memberOf ListCache\n * @param {string} key The key of the value to remove.\n * @returns {boolean} Returns `true` if the entry was removed, else `false`.\n */\nfunction listCacheDelete(key) {\n var data = this.__data__,\n index = assocIndexOf(data, key);\n\n if (index < 0) {\n return false;\n }\n var lastIndex = data.length - 1;\n if (index == lastIndex) {\n data.pop();\n } else {\n splice.call(data, index, 1);\n }\n --this.size;\n return true;\n}\n\nmodule.exports = listCacheDelete;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nvar Plus = forwardRef(function (_ref, ref) {\n var _ref$color = _ref.color,\n color = _ref$color === void 0 ? 'currentColor' : _ref$color,\n _ref$size = _ref.size,\n size = _ref$size === void 0 ? 24 : _ref$size,\n rest = _objectWithoutProperties(_ref, [\"color\", \"size\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n ref: ref,\n xmlns: \"http://www.w3.org/2000/svg\",\n width: size,\n height: size,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: color,\n strokeWidth: \"2\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n }, rest), /*#__PURE__*/React.createElement(\"line\", {\n x1: \"12\",\n y1: \"5\",\n x2: \"12\",\n y2: \"19\"\n }), /*#__PURE__*/React.createElement(\"line\", {\n x1: \"5\",\n y1: \"12\",\n x2: \"19\",\n y2: \"12\"\n }));\n});\nPlus.propTypes = {\n color: PropTypes.string,\n size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n};\nPlus.displayName = 'Plus';\nexport default Plus;","module.exports = function (id) {\r\n (function (c, l, a, r, i, t, y) {\r\n c[a] =\r\n c[a] ||\r\n function () {\r\n (c[a].q = c[a].q || []).push(arguments);\r\n };\r\n t = l.createElement(r);\r\n t.async = 1;\r\n t.src = \"https://www.clarity.ms/tag/\" + i;\r\n y = l.getElementsByTagName(r)[0];\r\n y.parentNode.insertBefore(t, y);\r\n })(window, document, \"clarity\", \"script\", id);\r\n};\r\n","////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Actions represent the type of change to a location value.\n */\nexport enum Action {\n /**\n * A POP indicates a change to an arbitrary index in the history stack, such\n * as a back or forward navigation. It does not describe the direction of the\n * navigation, only that the current index changed.\n *\n * Note: This is the default action for newly created history objects.\n */\n Pop = \"POP\",\n\n /**\n * A PUSH indicates a new entry being added to the history stack, such as when\n * a link is clicked and a new page loads. When this happens, all subsequent\n * entries in the stack are lost.\n */\n Push = \"PUSH\",\n\n /**\n * A REPLACE indicates the entry at the current index in the history stack\n * being replaced by a new one.\n */\n Replace = \"REPLACE\",\n}\n\n/**\n * The pathname, search, and hash values of a URL.\n */\nexport interface Path {\n /**\n * A URL pathname, beginning with a /.\n */\n pathname: string;\n\n /**\n * A URL search string, beginning with a ?.\n */\n search: string;\n\n /**\n * A URL fragment identifier, beginning with a #.\n */\n hash: string;\n}\n\n// TODO: (v7) Change the Location generic default from `any` to `unknown` and\n// remove Remix `useLocation` wrapper.\n\n/**\n * An entry in a history stack. A location contains information about the\n * URL path, as well as possibly some arbitrary state and a key.\n */\nexport interface Location extends Path {\n /**\n * A value of arbitrary data associated with this location.\n */\n state: State;\n\n /**\n * A unique string associated with this location. May be used to safely store\n * and retrieve data in some other storage API, like `localStorage`.\n *\n * Note: This value is always \"default\" on the initial location.\n */\n key: string;\n}\n\n/**\n * A change to the current location.\n */\nexport interface Update {\n /**\n * The action that triggered the change.\n */\n action: Action;\n\n /**\n * The new location.\n */\n location: Location;\n\n /**\n * The delta between this location and the former location in the history stack\n */\n delta: number | null;\n}\n\n/**\n * A function that receives notifications about location changes.\n */\nexport interface Listener {\n (update: Update): void;\n}\n\n/**\n * Describes a location that is the destination of some navigation, either via\n * `history.push` or `history.replace`. This may be either a URL or the pieces\n * of a URL path.\n */\nexport type To = string | Partial;\n\n/**\n * A history is an interface to the navigation stack. The history serves as the\n * source of truth for the current location, as well as provides a set of\n * methods that may be used to change it.\n *\n * It is similar to the DOM's `window.history` object, but with a smaller, more\n * focused API.\n */\nexport interface History {\n /**\n * The last action that modified the current location. This will always be\n * Action.Pop when a history instance is first created. This value is mutable.\n */\n readonly action: Action;\n\n /**\n * The current location. This value is mutable.\n */\n readonly location: Location;\n\n /**\n * Returns a valid href for the given `to` value that may be used as\n * the value of an attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Returns a URL for the given `to` value\n *\n * @param to - The destination URL\n */\n createURL(to: To): URL;\n\n /**\n * Encode a location the same way window.history would do (no-op for memory\n * history) so we ensure our PUSH/REPLACE navigations for data routers\n * behave the same as POP\n *\n * @param to Unencoded path\n */\n encodeLocation(to: To): Path;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n idx: number;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n function createHref(to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref,\n createURL(to) {\n return new URL(createHref(to), \"http://localhost\");\n },\n encodeLocation(to: To) {\n let path = typeof to === \"string\" ? parsePath(to) : to;\n return {\n pathname: path.pathname || \"\",\n search: path.search || \"\",\n hash: path.hash || \"\",\n };\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 1 });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 0 });\n }\n },\n go(delta) {\n action = Action.Pop;\n let nextIndex = clampIndex(index + delta);\n let nextLocation = entries[nextIndex];\n index = nextIndex;\n if (listener) {\n listener({ action, location: nextLocation, delta });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n\n // Hash URL should always have a leading / just like window.location.pathname\n // does, so if an app ends up at a route like /#something then we add a\n // leading slash so all of our path-matching behaves the same as if it would\n // in a browser router. This is particularly important when there exists a\n // root splat route () since that matches internally against\n // \"/*\" and we'd expect /#something to 404 in a hash router app.\n if (!pathname.startsWith(\"/\") && !pathname.startsWith(\".\")) {\n pathname = \"/\" + pathname;\n }\n\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * @private\n */\nexport function invariant(value: boolean, message?: string): asserts value;\nexport function invariant(\n value: T | null | undefined,\n message?: string\n): asserts value is T;\nexport function invariant(value: any, message?: string) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\n\nexport function warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience, so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location, index: number): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n idx: index,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n let index = getIndex()!;\n // Index should only be null when we initialize. If not, it's because the\n // user called history.pushState or history.replaceState directly, in which\n // case we should log a warning as it will result in bugs.\n if (index == null) {\n index = 0;\n globalHistory.replaceState({ ...globalHistory.state, idx: index }, \"\");\n }\n\n function getIndex(): number {\n let state = globalHistory.state || { idx: null };\n return state.idx;\n }\n\n function handlePop() {\n action = Action.Pop;\n let nextIndex = getIndex();\n let delta = nextIndex == null ? null : nextIndex - index;\n index = nextIndex;\n if (listener) {\n listener({ action, location: history.location, delta });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex() + 1;\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // If the exception is because `state` can't be serialized, let that throw\n // outwards just like a replace call would so the dev knows the cause\n // https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps\n // https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal\n if (error instanceof DOMException && error.name === \"DataCloneError\") {\n throw error;\n }\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 1 });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex();\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 0 });\n }\n }\n\n function createURL(to: To): URL {\n // window.location.origin is \"null\" (the literal string value) in Firefox\n // under certain conditions, notably when serving from a local HTML file\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297\n let base =\n window.location.origin !== \"null\"\n ? window.location.origin\n : window.location.href;\n\n let href = typeof to === \"string\" ? to : createPath(to);\n // Treating this as a full URL will strip any trailing spaces so we need to\n // pre-encode them since they might be part of a matching splat param from\n // an ancestor route\n href = href.replace(/ $/, \"%20\");\n invariant(\n base,\n `No window.location.(origin|href) available to create URL for href: ${href}`\n );\n return new URL(href, base);\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n createURL,\n encodeLocation(to) {\n // Encode a Location the same way window.location would\n let url = createURL(to);\n return {\n pathname: url.pathname,\n search: url.search,\n hash: url.hash,\n };\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","import type { Location, Path, To } from \"./history\";\nimport { invariant, parsePath, warning } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: any;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n status: number;\n location: string;\n revalidate: boolean;\n reloadDocument?: boolean;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: any;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\ntype LowerCaseFormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\ntype UpperCaseFormMethod = Uppercase;\n\n/**\n * Users can specify either lowercase or uppercase form methods on ` 
: 
}\r\n