diff --git a/iframe.html b/iframe.html index 26e9de80..9adfbaf4 100644 --- a/iframe.html +++ b/iframe.html @@ -70,4 +70,4 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/main.51668712737fdc4b8d8d.bundle.js b/main.51668712737fdc4b8d8d.bundle.js
deleted file mode 100644
index 671313d4..00000000
--- a/main.51668712737fdc4b8d8d.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(0).__importStar(__webpack_require__(1)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(609);exports.createMemo=createMemo_1.default;var createReducer_1=__webpack_require__(610);exports.createReducer=createReducer_1.default;var useAsync_1=__webpack_require__(275);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(177);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(611);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(612);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(614);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(615);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(616);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(617);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(618);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(279);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(621);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(627);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(628);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(629);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(630);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(631);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(126);exports.useEffectOnce=useEffectOnce_1.default;var useEnsuredForwardedRef_1=__webpack_require__(632);exports.useEnsuredForwardedRef=useEnsuredForwardedRef_1.default,exports.ensuredForwardRef=useEnsuredForwardedRef_1.ensuredForwardRef;var useEvent_1=__webpack_require__(282);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(633);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(634);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(636);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(280);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(637);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(638);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(640);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(283);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(641);exports.useIdle=useIdle_1.default;var useIntersection_1=__webpack_require__(643);exports.useIntersection=useIntersection_1.default;var useInterval_1=__webpack_require__(644);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(284);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(178);exports.useKey=useKey_1.default;var createBreakpoint_1=__webpack_require__(645);exports.createBreakpoint=createBreakpoint_1.default;var useKeyPress_1=__webpack_require__(285);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(646);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(647);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(286);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(648);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(649);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(650);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(651);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(652);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(653);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(654);exports.useMediaDevices=useMediaDevices_1.default;var useMediatedState_1=__webpack_require__(287);exports.useMediatedState=useMediatedState_1.useMediatedState;var useMotion_1=__webpack_require__(655);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(179);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(59);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(288);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(656);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(657);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(658);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(659);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(660);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(661);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(662);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(663);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(664);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(665);exports.usePromise=usePromise_1.default;var useQueue_1=__webpack_require__(666);exports.useQueue=useQueue_1.default;var useRaf_1=__webpack_require__(289);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(667);exports.useRafLoop=useRafLoop_1.default;var useRafState_1=__webpack_require__(92);exports.useRafState=useRafState_1.default;var useSearchParam_1=__webpack_require__(668);exports.useSearchParam=useSearchParam_1.default;var useScroll_1=__webpack_require__(669);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(670);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(671);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(125);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(672);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(673);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(674);exports.useStartTyping=useStartTyping_1.default;var useStateList_1=__webpack_require__(675);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(676);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(677);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(678);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(290);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(679);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(278);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(680);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(127);exports.useUnmount=useUnmount_1.default;var useUpdate_1=__webpack_require__(91);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(70);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(682);exports.useUpsert=useUpsert_1.default;var useVibrate_1=__webpack_require__(683);exports.useVibrate=useVibrate_1.default;var useVideo_1=__webpack_require__(684);exports.useVideo=useVideo_1.default;var useStateValidator_1=__webpack_require__(291);exports.useStateValidator=useStateValidator_1.default;var useMultiStateValidator_1=__webpack_require__(685);exports.useMultiStateValidator=useMultiStateValidator_1.useMultiStateValidator;var useWindowScroll_1=__webpack_require__(686);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(687);exports.useWindowSize=useWindowSize_1.default;var useMeasure_1=__webpack_require__(688);exports.useMeasure=useMeasure_1.default},,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isClient="object"==typeof window,exports.on=function(obj){for(var args=[],_i=1;_i=b[1]?1:-1}))}),[breakpoints]);return sortedBreakpoints.reduce((function(acc,_a){var name=_a[0],width=_a[1];return screen>=width?name:acc}),sortedBreakpoints[0][0])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(285)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(70));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(mount,unmount){react_1.useEffect((function(){return mount&&mount(),function(){unmount&&unmount()}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(20);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState((function(){try{var localStorageValue=localStorage.getItem(key);return"string"!=typeof localStorageValue?(localStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?localStorageValue:JSON.parse(localStorageValue||"null")}catch(_a){return initialValue}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){try{var serializedState=raw?String(state):JSON.stringify(state);localStorage.setItem(key,serializedState)}catch(_a){}}),[state]),[state,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(20),patchHistoryMethod=function(method){var original=history[method];history[method]=function(state){var result=original.apply(this,arguments),event=new Event(method.toLowerCase());return event.state=state,window.dispatchEvent(event),result}};util_1.isClient&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function(trigger){return{trigger:trigger,state:history.state,length:history.length,hash:location.hash,host:location.host,hostname:location.hostname,href:location.href,origin:location.origin,pathname:location.pathname,port:location.port,protocol:location.protocol,search:location.search}};exports.default=util_1.isClient?function(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var onPopstate=function(){return setState(buildState("popstate"))},onPushstate=function(){return setState(buildState("pushstate"))},onReplacestate=function(){return setState(buildState("replacestate"))};return util_1.on(window,"popstate",onPopstate),util_1.on(window,"pushstate",onPushstate),util_1.on(window,"replacestate",onReplacestate),function(){util_1.off(window,"popstate",onPopstate),util_1.off(window,"pushstate",onPushstate),util_1.off(window,"replacestate",onReplacestate)}}),[]),state}:function(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}exports.getClosestBody=getClosestBody;var bodies=new Map,doc="object"==typeof document?document:void 0;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body){var bodyInfo=bodies.get(body);locked?bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),body.style.overflow="hidden"):bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))}}),[locked,elementRef.current])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(126)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(70));exports.default=function(componentName){for(var rest=[],_i=1;_i=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useMountedState_1=tslib_1.__importDefault(__webpack_require__(59)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(91)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(70));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var isMounted=useMountedState_1.default(),update=useUpdate_1.default(),index=react_1.useRef(0);return useUpdateEffect_1.default((function(){stateSet.length<=index.current&&(index.current=stateSet.length-1,update())}),[stateSet.length]),{state:stateSet[index.current],next:react_1.useCallback((function(){isMounted()&&stateSet.length&&(index.current=(index.current+1)%stateSet.length,update())}),[stateSet,index]),prev:react_1.useCallback((function(){isMounted()&&stateSet.length&&(index.current=index.current-1<0?stateSet.length-1:index.current-1,update())}),[stateSet,index])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(127));exports.default=function(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextValue=react_1.useRef(null),hasNextValue=react_1.useRef(0);return react_1.useEffect((function(){if(timeout.current)nextValue.current=value,hasNextValue.current=!0;else{setState(value);var timeoutCallback_1=function(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),[value]),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(127));exports.default=function(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextArgs=react_1.useRef(null),hasNextArgs=react_1.useRef(!1);return react_1.useEffect((function(){if(timeout.current)nextArgs.current=args,hasNextArgs.current=!0;else{setState(fn.apply(void 0,args));var timeoutCallback_1=function(){hasNextArgs.current?(hasNextArgs.current=!1,setState(fn.apply(void 0,nextArgs.current)),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),args),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(290)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(91));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default="undefined"!=typeof document?function useTitle(title){var t=react_1.useRef();t.current!==title&&(document.title=t.current=title)}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),ts_easing_1=__webpack_require__(681),useRaf_1=tslib_1.__importDefault(__webpack_require__(289));exports.default=function(easingName,ms,delay){return void 0===easingName&&(easingName="inCirc"),void 0===ms&&(ms=200),void 0===delay&&(delay=0),(0,ts_easing_1.easing[easingName])(useRaf_1.default(ms,delay))}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useList_1=tslib_1.__importDefault(__webpack_require__(286));exports.default=function(comparisonFunction,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),items=_a[0],actions=_a[1];return[items,tslib_1.__assign(tslib_1.__assign({},actions),{upsert:function(upsertedItem){for(var itemWasFound=!1,i=0;i.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(698)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsync
\n
React hook that resolves an async function or a function that returns\na promise;
\n
Usage
\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n
Reference
\n
useAsync(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return callback()}},"Start"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(700)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncFn
\n
React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.
\n
Usage
\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n
Reference
\n
useAsyncFn(fn, deps?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(58),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return state.retry()}},"Retry"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncRetry",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(702)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncRetry
\n
Uses useAsync with an additional retry method to easily retry/refresh the async function;
\n
Usage
\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n
Reference
\n
useAsyncRetry(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAudio({src:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",autoPlay:!0}),audio=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,audio,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function(){return controls.seek(state.time+5)}},"+5 sec"))};react_1.storiesOf("UI|useAudio",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(704)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAudio
\n
Creates <audio> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n
audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{audio}</div>
\n
state tracks the state of the audio and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <audio> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=__1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(706)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBattery
\n
React sensor hook that tracks battery status.
\n
\n
Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.
\n
\n
Usage
\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n
Reference
\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return __1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),React.createElement("div",null,dirty&&React.createElement("p",null,"Try to reload or close tab"),React.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(708)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBeforeUnload
\n
React side-effect hook that shows browser alert when user try to reload or close the page.
\n
Usage
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useBoolean(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:function(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useBoolean",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(292)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_actions_1=__webpack_require__(128),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return __1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(723)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useClickAway
\n
React UI hook that triggers a callback when user\nclicks outside the target element.
\n
Usage
\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n
Reference
\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=__1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function(){return copyToClipboard(text)}},"copy text"),state.error?React.createElement("p",null,"Unable to copy value: ",state.error.message):state.value&&React.createElement(React.Fragment,null,React.createElement("p",null,"Copied ",state.value," ",state.noUserInteraction?"without":"with"," user interaction"),React.createElement("input",{type:"text",placeholder:"Paste it in here to check"})))};react_1.storiesOf("Side-effects|useCopyToClipboard",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(725)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCopyToClipboard
\n
Copy text to a user's clipboard.
\n
Usage
\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n
Reference
\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — catched error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(1),min=_a[0],_b=_a[1],incMin=_b.inc,decMin=_b.dec,_c=__1.useCounter(10),max=_c[0],_d=_c[1],incMax=_d.inc,decMax=_d.dec,_e=__1.useCounter(5,max,min),value=_e[0],_f=_e[1],inc=_f.inc,dec=_f.dec,set=_f.set,reset=_f.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){return inc()}},"Increment"),React.createElement("button",{onClick:function(){return dec()}},"Decrement"),React.createElement("button",{onClick:function(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function(){return reset()}},"Reset"),React.createElement("button",{onClick:function(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function(){return incMin()}},"Increment"),React.createElement("button",{onClick:function(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function(){return incMax()}},"Increment"),React.createElement("button",{onClick:function(){return decMax()}},"Decrement"))};react_1.storiesOf("State|useCounter",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(727)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCounter
\n
React state hook that tracks a numeric value.
\n
useNumber is an alias for useCounter.
\n
Usage
\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\n  const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n  const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n  return (\n    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n
Reference
\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, 20: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var className=__1.useCss({color:"red",border:"1px solid red","&:hover":{color:"blue"}});return React.createElement("div",{className:className},"hello")};react_1.storiesOf("UI|useCss",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(729)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCss
\n
React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.
\n
Usage
\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n
Examples
\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1];return __1.useDebounce((function(){setState("Typing stopped"),setDebouncedValue(val)}),2e3,[val]),React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue))};react_1.storiesOf("Side effects|useDebounce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(731)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDebounce
\n
React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
\n
The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.
\n
Usage
\n
import React, { useState } from 'react';\nimport { useDebounce } from 'react-use';\n\nconst Demo = () => {\n  const [state, setState] = React.useState('Typing stopped');\n  const [val, setVal] = React.useState('');\n  const [debouncedValue, setDebouncedValue] = React.useState('');\n\n  useDebounce(\n    () => {\n      setState('Typing stopped');\n      setDebouncedValue(val);\n    },\n    2000,\n    [val]\n  );\n\n  return (\n    <div>\n      <input\n        type="text"\n        value={val}\n        placeholder="Debounced input"\n        onChange={({ currentTarget }) => {\n          setState('Waiting for typing to stop...');\n          setVal(currentTarget.value);\n        }}\n      />\n      <div>{state}</div>\n      <div>Debounced value: {debouncedValue}</div>\n    </div>\n  );\n};
\n
Reference
\n
useDebounce(fn, ms: number, args: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=__1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal",module).add("Demo",(function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function(){return alert("Q pressed!")}}))}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKey_1=tslib_1.__importDefault(__webpack_require__(178)),UseKey=tslib_1.__importDefault(__webpack_require__(893)).default(useKey_1.default,(function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,tslib_1.__rest(_a,["filter","fn","deps"]),deps]}));exports.default=UseKey},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function(props){return[props]};exports.default=function(hook,mapPropsToArgs){void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs);return function(props){var state=hook.apply(void 0,mapPropsToArgs(props)),children=props.children,_a=props.render,render=void 0===_a?children:_a;return render&&render(state)||null}}}],[[304,1,2]]]);
-//# sourceMappingURL=main.51668712737fdc4b8d8d.bundle.js.map
\ No newline at end of file
diff --git a/main.51668712737fdc4b8d8d.bundle.js.map b/main.51668712737fdc4b8d8d.bundle.js.map
deleted file mode 100644
index e6446d84..00000000
--- a/main.51668712737fdc4b8d8d.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.51668712737fdc4b8d8d.bundle.js","sources":["webpack:///main.51668712737fdc4b8d8d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/main.c1be7a5dba51b8b103f0.bundle.js b/main.c1be7a5dba51b8b103f0.bundle.js
new file mode 100644
index 00000000..9a7031b3
--- /dev/null
+++ b/main.c1be7a5dba51b8b103f0.bundle.js
@@ -0,0 +1,2 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=__webpack_require__(0).__importStar(__webpack_require__(1)).createElement;exports.default=function(props){return h("div",{},h("div",{style:{padding:"0 20px"},dangerouslySetInnerHTML:{__html:props.md.default}}),h("style",{dangerouslySetInnerHTML:{__html:"\n@import url(https://fonts.googleapis.com/css?family=Merriweather:300italic,300);\n\nh1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {\n  color: #333;\n}\n\nhtml {\n  font-size: 16px;\n  max-width: 700px;\n  margin: auto;\n}\n\nbody {\n  color: #444;\n  font-family: 'Merriweather', Georgia, serif;\n  max-width: 700px;\n  margin: auto;\n}\n\n/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */\n\ndiv {\n  width: 100%;\n}\n\ndiv img {\n  width: 100%;\n}\n\nblockquote p {\n  font-size: 1.5rem;\n  font-style: italic;\n  margin: 1rem auto 1rem;\n  max-width: 48rem;\n}\n\nli {\n  margin-left: 2rem;\n}\n\n/* Counteract the specificity of the gross *:not() chain. */\nh1 {\n  padding: 1m 0 !important;\n}\n/*  === End gross hack */\n\np {\n  color: #555;\n  height: auto;\n  line-height: 1.45;\n}\n\npre, code {\n  font-family: Menlo, Monaco, \"Courier New\", monospace;\n  color: #42b983;\n}\n\npre, pre code {\n  color: #000;\n}\n\npre {\n  background-color: #fafafa;\n  font-size: .8rem;\n  overflow-x: scroll;\n  padding: 1.125em;\n}\n\na, a pre, a code,\na:visited {\n  color: #3498db;\n}\n\na:hover,\na:focus,\na:active {\n  color: #2980b9;\n}\n        "}}))}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var createMemo_1=__webpack_require__(609);exports.createMemo=createMemo_1.default;var createReducer_1=__webpack_require__(610);exports.createReducer=createReducer_1.default;var useAsync_1=__webpack_require__(276);exports.useAsync=useAsync_1.default;var useAsyncFn_1=__webpack_require__(177);exports.useAsyncFn=useAsyncFn_1.default;var useAsyncRetry_1=__webpack_require__(611);exports.useAsyncRetry=useAsyncRetry_1.default;var useAudio_1=__webpack_require__(612);exports.useAudio=useAudio_1.default;var useBattery_1=__webpack_require__(614);exports.useBattery=useBattery_1.default;var useBeforeUnload_1=__webpack_require__(615);exports.useBeforeUnload=useBeforeUnload_1.default;var useBoolean_1=__webpack_require__(616);exports.useBoolean=useBoolean_1.default;var useClickAway_1=__webpack_require__(617);exports.useClickAway=useClickAway_1.default;var useCopyToClipboard_1=__webpack_require__(618);exports.useCopyToClipboard=useCopyToClipboard_1.default;var useCounter_1=__webpack_require__(280);exports.useCounter=useCounter_1.default;var useCss_1=__webpack_require__(621);exports.useCss=useCss_1.default;var useDebounce_1=__webpack_require__(627);exports.useDebounce=useDebounce_1.default;var useDeepCompareEffect_1=__webpack_require__(628);exports.useDeepCompareEffect=useDeepCompareEffect_1.default;var useDefault_1=__webpack_require__(629);exports.useDefault=useDefault_1.default;var useDrop_1=__webpack_require__(630);exports.useDrop=useDrop_1.default;var useDropArea_1=__webpack_require__(631);exports.useDropArea=useDropArea_1.default;var useEffectOnce_1=__webpack_require__(126);exports.useEffectOnce=useEffectOnce_1.default;var useEnsuredForwardedRef_1=__webpack_require__(632);exports.useEnsuredForwardedRef=useEnsuredForwardedRef_1.default,exports.ensuredForwardRef=useEnsuredForwardedRef_1.ensuredForwardRef;var useEvent_1=__webpack_require__(283);exports.useEvent=useEvent_1.default;var useFavicon_1=__webpack_require__(633);exports.useFavicon=useFavicon_1.default;var useFullscreen_1=__webpack_require__(634);exports.useFullscreen=useFullscreen_1.default;var useGeolocation_1=__webpack_require__(636);exports.useGeolocation=useGeolocation_1.default;var useGetSet_1=__webpack_require__(281);exports.useGetSet=useGetSet_1.default;var useGetSetState_1=__webpack_require__(637);exports.useGetSetState=useGetSetState_1.default;var useHarmonicIntervalFn_1=__webpack_require__(638);exports.useHarmonicIntervalFn=useHarmonicIntervalFn_1.default;var useHover_1=__webpack_require__(640);exports.useHover=useHover_1.default;var useHoverDirty_1=__webpack_require__(284);exports.useHoverDirty=useHoverDirty_1.default;var useIdle_1=__webpack_require__(641);exports.useIdle=useIdle_1.default;var useIntersection_1=__webpack_require__(643);exports.useIntersection=useIntersection_1.default;var useInterval_1=__webpack_require__(644);exports.useInterval=useInterval_1.default;var useIsomorphicLayoutEffect_1=__webpack_require__(285);exports.useIsomorphicLayoutEffect=useIsomorphicLayoutEffect_1.default;var useKey_1=__webpack_require__(179);exports.useKey=useKey_1.default;var createBreakpoint_1=__webpack_require__(645);exports.createBreakpoint=createBreakpoint_1.default;var useKeyPress_1=__webpack_require__(286);exports.useKeyPress=useKeyPress_1.default;var useKeyPressEvent_1=__webpack_require__(646);exports.useKeyPressEvent=useKeyPressEvent_1.default;var useLifecycles_1=__webpack_require__(647);exports.useLifecycles=useLifecycles_1.default;var useList_1=__webpack_require__(287);exports.useList=useList_1.default;var useLocalStorage_1=__webpack_require__(648);exports.useLocalStorage=useLocalStorage_1.default;var useLocation_1=__webpack_require__(649);exports.useLocation=useLocation_1.default;var useLockBodyScroll_1=__webpack_require__(650);exports.useLockBodyScroll=useLockBodyScroll_1.default;var useLogger_1=__webpack_require__(651);exports.useLogger=useLogger_1.default;var useMap_1=__webpack_require__(652);exports.useMap=useMap_1.default;var useMedia_1=__webpack_require__(653);exports.useMedia=useMedia_1.default;var useMediaDevices_1=__webpack_require__(654);exports.useMediaDevices=useMediaDevices_1.default;var useMediatedState_1=__webpack_require__(288);exports.useMediatedState=useMediatedState_1.useMediatedState;var useMotion_1=__webpack_require__(655);exports.useMotion=useMotion_1.default;var useMount_1=__webpack_require__(180);exports.useMount=useMount_1.default;var useMountedState_1=__webpack_require__(59);exports.useMountedState=useMountedState_1.default;var useMouse_1=__webpack_require__(289);exports.useMouse=useMouse_1.default;var useMouseHovered_1=__webpack_require__(656);exports.useMouseHovered=useMouseHovered_1.default;var useNetwork_1=__webpack_require__(657);exports.useNetwork=useNetwork_1.default;var useNumber_1=__webpack_require__(658);exports.useNumber=useNumber_1.default;var useObservable_1=__webpack_require__(659);exports.useObservable=useObservable_1.default;var useOrientation_1=__webpack_require__(660);exports.useOrientation=useOrientation_1.default;var usePageLeave_1=__webpack_require__(661);exports.usePageLeave=usePageLeave_1.default;var usePermission_1=__webpack_require__(662);exports.usePermission=usePermission_1.default;var usePrevious_1=__webpack_require__(663);exports.usePrevious=usePrevious_1.default;var usePreviousDistinct_1=__webpack_require__(664);exports.usePreviousDistinct=usePreviousDistinct_1.default;var usePromise_1=__webpack_require__(665);exports.usePromise=usePromise_1.default;var useQueue_1=__webpack_require__(666);exports.useQueue=useQueue_1.default;var useRaf_1=__webpack_require__(290);exports.useRaf=useRaf_1.default;var useRafLoop_1=__webpack_require__(667);exports.useRafLoop=useRafLoop_1.default;var useRafState_1=__webpack_require__(92);exports.useRafState=useRafState_1.default;var useSearchParam_1=__webpack_require__(668);exports.useSearchParam=useSearchParam_1.default;var useScroll_1=__webpack_require__(669);exports.useScroll=useScroll_1.default;var useScrolling_1=__webpack_require__(670);exports.useScrolling=useScrolling_1.default;var useSessionStorage_1=__webpack_require__(671);exports.useSessionStorage=useSessionStorage_1.default;var useSetState_1=__webpack_require__(125);exports.useSetState=useSetState_1.default;var useSize_1=__webpack_require__(672);exports.useSize=useSize_1.default;var useSpeech_1=__webpack_require__(673);exports.useSpeech=useSpeech_1.default;var useStartTyping_1=__webpack_require__(674);exports.useStartTyping=useStartTyping_1.default;var useStateList_1=__webpack_require__(675);exports.useStateList=useStateList_1.default;var useThrottle_1=__webpack_require__(676);exports.useThrottle=useThrottle_1.default;var useThrottleFn_1=__webpack_require__(677);exports.useThrottleFn=useThrottleFn_1.default;var useTimeout_1=__webpack_require__(678);exports.useTimeout=useTimeout_1.default;var useTimeoutFn_1=__webpack_require__(178);exports.useTimeoutFn=useTimeoutFn_1.default;var useTitle_1=__webpack_require__(679);exports.useTitle=useTitle_1.default;var useToggle_1=__webpack_require__(279);exports.useToggle=useToggle_1.default;var useTween_1=__webpack_require__(680);exports.useTween=useTween_1.default;var useUnmount_1=__webpack_require__(127);exports.useUnmount=useUnmount_1.default;var useUpdate_1=__webpack_require__(91);exports.useUpdate=useUpdate_1.default;var useUpdateEffect_1=__webpack_require__(90);exports.useUpdateEffect=useUpdateEffect_1.default;var useUpsert_1=__webpack_require__(682);exports.useUpsert=useUpsert_1.default;var useVibrate_1=__webpack_require__(683);exports.useVibrate=useVibrate_1.default;var useVideo_1=__webpack_require__(684);exports.useVideo=useVideo_1.default;var useStateValidator_1=__webpack_require__(291);exports.useStateValidator=useStateValidator_1.default;var useMultiStateValidator_1=__webpack_require__(685);exports.useMultiStateValidator=useMultiStateValidator_1.useMultiStateValidator;var useWindowScroll_1=__webpack_require__(686);exports.useWindowScroll=useWindowScroll_1.default;var useWindowSize_1=__webpack_require__(687);exports.useWindowSize=useWindowSize_1.default;var useMeasure_1=__webpack_require__(688);exports.useMeasure=useMeasure_1.default},,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.isClient="object"==typeof window,exports.on=function(obj){for(var args=[],_i=1;_i=b[1]?1:-1}))}),[breakpoints]);return sortedBreakpoints.reduce((function(acc,_a){var name=_a[0],width=_a[1];return screen>=width?name:acc}),sortedBreakpoints[0][0])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKeyPress_1=tslib_1.__importDefault(__webpack_require__(286)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(90));exports.default=function(key,keydown,keyup,useKeyPress){void 0===useKeyPress&&(useKeyPress=useKeyPress_1.default);var _a=useKeyPress(key),pressed=_a[0],event=_a[1];useUpdateEffect_1.default((function(){!pressed&&keyup?keyup(event):pressed&&keydown&&keydown(event)}),[pressed])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default=function(mount,unmount){react_1.useEffect((function(){return mount&&mount(),function(){unmount&&unmount()}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(20);exports.default=function(key,initialValue,raw){if(!util_1.isClient)return[initialValue,function(){}];var _a=react_1.useState((function(){try{var localStorageValue=localStorage.getItem(key);return"string"!=typeof localStorageValue?(localStorage.setItem(key,raw?String(initialValue):JSON.stringify(initialValue)),initialValue):raw?localStorageValue:JSON.parse(localStorageValue||"null")}catch(_a){return initialValue}})),state=_a[0],setState=_a[1];return react_1.useEffect((function(){try{var serializedState=raw?String(state):JSON.stringify(state);localStorage.setItem(key,serializedState)}catch(_a){}}),[state]),[state,setState]}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1),util_1=__webpack_require__(20),patchHistoryMethod=function(method){var original=history[method];history[method]=function(state){var result=original.apply(this,arguments),event=new Event(method.toLowerCase());return event.state=state,window.dispatchEvent(event),result}};util_1.isClient&&(patchHistoryMethod("pushState"),patchHistoryMethod("replaceState"));var buildState=function(trigger){return{trigger:trigger,state:history.state,length:history.length,hash:location.hash,host:location.host,hostname:location.hostname,href:location.href,origin:location.origin,pathname:location.pathname,port:location.port,protocol:location.protocol,search:location.search}};exports.default=util_1.isClient?function(){var _a=react_1.useState(buildState("load")),state=_a[0],setState=_a[1];return react_1.useEffect((function(){var onPopstate=function(){return setState(buildState("popstate"))},onPushstate=function(){return setState(buildState("pushstate"))},onReplacestate=function(){return setState(buildState("replacestate"))};return util_1.on(window,"popstate",onPopstate),util_1.on(window,"pushstate",onPushstate),util_1.on(window,"replacestate",onReplacestate),function(){util_1.off(window,"popstate",onPopstate),util_1.off(window,"pushstate",onPushstate),util_1.off(window,"replacestate",onReplacestate)}}),[]),state}:function(){return{trigger:"load",length:1}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);function getClosestBody(el){if(!el)return null;if("BODY"===el.tagName)return el;if("IFRAME"===el.tagName){var document=el.contentDocument;return document?document.body:null}return el.offsetParent?getClosestBody(el.offsetParent):null}exports.getClosestBody=getClosestBody;var bodies=new Map,doc="object"==typeof document?document:void 0;exports.default=doc?function useLockBody(locked,elementRef){void 0===locked&&(locked=!0),elementRef=elementRef||react_1.useRef(doc.body),react_1.useEffect((function(){var body=getClosestBody(elementRef.current);if(body){var bodyInfo=bodies.get(body);locked?bodyInfo?bodies.set(body,{counter:bodyInfo.counter+1,initialOverflow:bodyInfo.initialOverflow}):(bodies.set(body,{counter:1,initialOverflow:body.style.overflow}),body.style.overflow="hidden"):bodyInfo&&(1===bodyInfo.counter?(bodies.delete(body),body.style.overflow=bodyInfo.initialOverflow):bodies.set(body,{counter:bodyInfo.counter-1,initialOverflow:bodyInfo.initialOverflow}))}}),[locked,elementRef.current])}:function useLockBodyMock(_locked,_elementRef){void 0===_locked&&(_locked=!0)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useEffectOnce_1=tslib_1.__importDefault(__webpack_require__(126)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(90));exports.default=function(componentName){for(var rest=[],_i=1;_i=48&&keyCode<=57||keyCode>=65&&keyCode<=90))&&onStartTyping(event)};return document.addEventListener("keydown",keydown),function(){document.removeEventListener("keydown",keydown)}}),[])}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useMountedState_1=tslib_1.__importDefault(__webpack_require__(59)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(91)),useUpdateEffect_1=tslib_1.__importDefault(__webpack_require__(90));exports.default=function useStateList(stateSet){void 0===stateSet&&(stateSet=[]);var isMounted=useMountedState_1.default(),update=useUpdate_1.default(),index=react_1.useRef(0);return useUpdateEffect_1.default((function(){stateSet.length<=index.current&&(index.current=stateSet.length-1,update())}),[stateSet.length]),{state:stateSet[index.current],next:react_1.useCallback((function(){isMounted()&&stateSet.length&&(index.current=(index.current+1)%stateSet.length,update())}),[stateSet,index]),prev:react_1.useCallback((function(){isMounted()&&stateSet.length&&(index.current=index.current-1<0?stateSet.length-1:index.current-1,update())}),[stateSet,index])}}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(127));exports.default=function(value,ms){void 0===ms&&(ms=200);var _a=react_1.useState(value),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextValue=react_1.useRef(null),hasNextValue=react_1.useRef(0);return react_1.useEffect((function(){if(timeout.current)nextValue.current=value,hasNextValue.current=!0;else{setState(value);var timeoutCallback_1=function(){hasNextValue.current?(hasNextValue.current=!1,setState(nextValue.current),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),[value]),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(1),useUnmount_1=tslib_1.__importDefault(__webpack_require__(127));exports.default=function(fn,ms,args){void 0===ms&&(ms=200);var _a=react_1.useState(null),state=_a[0],setState=_a[1],timeout=react_1.useRef(),nextArgs=react_1.useRef(null),hasNextArgs=react_1.useRef(!1);return react_1.useEffect((function(){if(timeout.current)nextArgs.current=args,hasNextArgs.current=!0;else{setState(fn.apply(void 0,args));var timeoutCallback_1=function(){hasNextArgs.current?(hasNextArgs.current=!1,setState(fn.apply(void 0,nextArgs.current)),timeout.current=setTimeout(timeoutCallback_1,ms)):timeout.current=void 0};timeout.current=setTimeout(timeoutCallback_1,ms)}}),args),useUnmount_1.default((function(){timeout.current&&clearTimeout(timeout.current)})),state}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useTimeoutFn_1=tslib_1.__importDefault(__webpack_require__(178)),useUpdate_1=tslib_1.__importDefault(__webpack_require__(91));exports.default=function useTimeout(ms){void 0===ms&&(ms=0);var update=useUpdate_1.default();return useTimeoutFn_1.default(update,ms)}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__webpack_require__(1);exports.default="undefined"!=typeof document?function useTitle(title){var t=react_1.useRef();t.current!==title&&(document.title=t.current=title)}:function(_title){}},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),ts_easing_1=__webpack_require__(681),useRaf_1=tslib_1.__importDefault(__webpack_require__(290));exports.default=function(easingName,ms,delay){return void 0===easingName&&(easingName="inCirc"),void 0===ms&&(ms=200),void 0===delay&&(delay=0),(0,ts_easing_1.easing[easingName])(useRaf_1.default(ms,delay))}},,function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useList_1=tslib_1.__importDefault(__webpack_require__(287));exports.default=function(comparisonFunction,initialList){void 0===initialList&&(initialList=[]);var _a=useList_1.default(initialList),items=_a[0],actions=_a[1];return[items,tslib_1.__assign(tslib_1.__assign({},actions),{upsert:function(upsertedItem){for(var itemWasFound=!1,i=0;i.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsync",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(698)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsync
\n
React hook that resolves an async function or a function that returns\na promise;
\n
Usage
\n
import {useAsync} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsync(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n    </div>\n  );\n};
\n
Reference
\n
useAsync(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAsyncFn((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),1e3)}))})),state=_a[0],callback=_a[1];return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return callback()}},"Start"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncFn",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(700)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncFn
\n
React hook that returns state and a callback for an async function or a\nfunction that returns a promise. The state is of the same shape as useAsync.
\n
Usage
\n
import {useAsyncFn} from 'react-use';\n\nconst Demo = ({url}) => {\n  const [state, fetch] = useAsyncFn(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      <button onClick={() => fetch()}>Start loading</button>\n    </div>\n  );\n};
\n
Reference
\n
useAsyncFn(fn, deps?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_knobs_1=__webpack_require__(58),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(_a){var delay=_a.delay,state=__1.useAsyncRetry((function(){return new Promise((function(resolve,reject){setTimeout((function(){Math.random()>.5?resolve("✌️"):reject(new Error("A pseudo random error occurred"))}),delay)}))}),[delay]);return React.createElement("div",null,state.loading?React.createElement("p",null,"Loading..."):state.error?React.createElement("p",null,"Error: ",state.error.message):React.createElement("p",null,"Value: ",state.value),React.createElement("button",{onClick:function(){return state.retry()}},"Retry"),React.createElement("pre",null,JSON.stringify(state,null,2)))};react_1.storiesOf("Side effects|useAsyncRetry",module).addDecorator(addon_knobs_1.withKnobs).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(702)})})).add("Demo",(function(){var delay=addon_knobs_1.number("delay",1e3,{range:!0,min:100,max:5e3,step:100});return React.createElement(Demo,{delay:delay})}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAsyncRetry
\n
Uses useAsync with an additional retry method to easily retry/refresh the async function;
\n
Usage
\n
import {useAsyncRetry} from 'react-use';\n\nconst Demo = ({url}) => {\n  const state = useAsyncRetry(async () => {\n    const response = await fetch(url);\n    const result = await response.text();\n    return result;\n  }, [url]);\n\n  return (\n    <div>\n      {state.loading\n        ? <div>Loading...</div>\n        : state.error\n          ? <div>Error: {state.error.message}</div>\n          : <div>Value: {state.value}</div>\n      }\n      {!loading && <button onClick={() => state.retry()}>Start loading</button>}\n    </div>\n  );\n};
\n
Reference
\n
useAsyncRetry(fn, args?: any[]);
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useAudio({src:"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",autoPlay:!0}),audio=_a[0],state=_a[1],controls=_a[2];_a[3];return React.createElement("div",null,audio,React.createElement("pre",null,JSON.stringify(state,null,2)),React.createElement("button",{onClick:controls.pause},"Pause"),React.createElement("button",{onClick:controls.play},"Play"),React.createElement("br",null),React.createElement("button",{onClick:controls.mute},"Mute"),React.createElement("button",{onClick:controls.unmute},"Un-mute"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.volume(.1)}},"Volume: 10%"),React.createElement("button",{onClick:function(){return controls.volume(.5)}},"Volume: 50%"),React.createElement("button",{onClick:function(){return controls.volume(1)}},"Volume: 100%"),React.createElement("br",null),React.createElement("button",{onClick:function(){return controls.seek(state.time-5)}},"-5 sec"),React.createElement("button",{onClick:function(){return controls.seek(state.time+5)}},"+5 sec"))};react_1.storiesOf("UI|useAudio",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(704)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useAudio
\n
Creates <audio> element, tracks its state and exposes playback controls.
\n
Usage
\n
import {useAudio} from 'react-use';\n\nconst Demo = () => {\n  const [audio, state, controls, ref] = useAudio({\n    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',\n    autoPlay: true,\n  });\n\n  return (\n    <div>\n      {audio}\n      <pre>{JSON.stringify(state, null, 2)}</pre>\n      <button onClick={controls.pause}>Pause</button>\n      <button onClick={controls.play}>Play</button>\n      <br/>\n      <button onClick={controls.mute}>Mute</button>\n      <button onClick={controls.unmute}>Un-mute</button>\n      <br/>\n      <button onClick={() => controls.volume(.1)}>Volume: 10%</button>\n      <button onClick={() => controls.volume(.5)}>Volume: 50%</button>\n      <button onClick={() => controls.volume(1)}>Volume: 100%</button>\n      <br/>\n      <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>\n      <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>\n    </div>\n  );\n};
\n
Reference
\n
const [audio, state, controls, ref] = useAudio(props);\nconst [audio, state, controls] = useAudio(<audio {...props}/>);
\n
audio is React's <audio> element that you have to insert somewhere in your\nrender tree, for example:
\n
<div>{audio}</div>
\n
state tracks the state of the audio and has the following shape:
\n
{\n  "buffered": [\n    {\n      "start": 0,\n      "end": 425.952625\n    }\n  ],\n  "time": 5.244996,\n  "duration": 425.952625,\n  "paused": false,\n  "muted": false,\n  "volume": 1\n}
\n
controls is a list collection of methods that allow you to control the\nplayback of the audio, it has the following interface:
\n
interface AudioControls {\n  play: () => Promise<void> | void;\n  pause: () => void;\n  mute: () => void;\n  unmute: () => void;\n  volume: (volume: number) => void;\n  seek: (time: number) => void;\n}
\n
ref is a React reference to HTML <audio> element, you can access the element by\nref.current, note that it may be null.
\n
And finally, props — all props that <audio> accepts.
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var batteryState=__1.useBattery();return batteryState.isSupported?batteryState.fetched?React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),":   ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetched")," ",React.createElement("br",null),React.createElement("strong",null,"Charge level"),":   ",React.createElement("span",null,(100*batteryState.level).toFixed(0),"%")," ",React.createElement("br",null),React.createElement("strong",null,"Charging"),":   ",React.createElement("span",null,batteryState.charging?"yes":"no")," ",React.createElement("br",null),React.createElement("strong",null,"Charging time"),":  ",React.createElement("span",null,batteryState.chargingTime?batteryState.chargingTime:"finished")," ",React.createElement("br",null),React.createElement("strong",null,"Discharging time"),":   ",React.createElement("span",null,batteryState.dischargingTime)):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"supported")," ",React.createElement("br",null),React.createElement("strong",null,"Battery state"),": ",React.createElement("span",null,"fetching")):React.createElement("div",null,React.createElement("strong",null,"Battery sensor"),": ",React.createElement("span",null,"not supported"))};react_1.storiesOf("Sensors|useBattery",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(706)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBattery
\n
React sensor hook that tracks battery status.
\n
\n
Note: current BatteryManager API state is obsolete.
Although it may still work in some browsers, its use is discouraged since it could be removed at any time.
\n
\n
Usage
\n
import {useBattery} from 'react-use';\n\nconst Demo = () => {\n  const batteryState = useBattery();\n\n  if (!batteryState.isSupported) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>not supported</span>\n      </div>\n    );\n  }\n\n  if (!batteryState.fetched) {\n    return (\n      <div>\n        <strong>Battery sensor</strong>: <span>supported</span> <br />\n        <strong>Battery state</strong>: <span>fetching</span>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <strong>Battery sensor</strong>:&nbsp;&nbsp; <span>supported</span> <br />\n      <strong>Battery state</strong>: <span>fetched</span> <br />\n      <strong>Charge level</strong>:&nbsp;&nbsp; <span>{ (batteryState.level * 100).toFixed(0) }%</span> <br />\n      <strong>Charging</strong>:&nbsp;&nbsp; <span>{ batteryState.charging ? 'yes' : 'no' }</span> <br />\n      <strong>Charging time</strong>:&nbsp;&nbsp;\n      <span>{ batteryState.chargingTime ? batteryState.chargingTime : 'finished' }</span> <br />\n      <strong>Discharging time</strong>:&nbsp;&nbsp; <span>{ batteryState.dischargingTime }</span>\n    </div>\n  );\n};
\n
Reference
\n
const {isSupported, level, charging, dischargingTime, chargingTime} = useBattery();
\n
    \n
  • isSupported: boolean - whether browser/devise supports BatteryManager;
    • \n
  • fetched: boolean - whether battery state is fetched;
    • \n
  • level: number - representing the system's battery charge level scaled to a value between 0.0 and 1.0.
    • \n
  • charging: boolean - indicating whether or not the battery is currently being charged.
    • \n
  • dischargingTime: number - remaining time in seconds until the battery is completely discharged and the system will suspend.
    • \n
  • chargingTime: number - remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useToggle(!1),dirty=_a[0],toggleDirty=_a[1];return __1.useBeforeUnload(dirty,"You have unsaved changes, are you sure?"),React.createElement("div",null,dirty&&React.createElement("p",null,"Try to reload or close tab"),React.createElement("button",{onClick:function(){return toggleDirty()}},dirty?"Disable":"Enable"))};react_1.storiesOf("Side effects|useBeforeUnload",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(708)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useBeforeUnload
\n
React side-effect hook that shows browser alert when user try to reload or close the page.
\n
Usage
\n
import {useBeforeUnload} from 'react-use';\n\nconst Demo = () => {\n  const [dirty, toggleDirty] = useToggle(false);\n  useBeforeUnload(dirty, 'You have unsaved changes, are you sure?');\n\n  return (\n    <div>\n      {dirty && <p>Try to reload or close tab</p>}\n      <button onClick={() => toggleDirty()}>{dirty ? 'Disable' : 'Enable'}</button>\n    </div>\n  );\n};
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useBoolean(!0),on=_a[0],toggle=_a[1];return React.createElement("div",null,React.createElement("div",null,on?"ON":"OFF"),React.createElement("button",{onClick:function(){return toggle()}},"Toggle"),React.createElement("button",{onClick:function(){return toggle(!0)}},"set ON"),React.createElement("button",{onClick:function(){return toggle(!1)}},"set OFF"))};react_1.storiesOf("State|useBoolean",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(292)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),addon_actions_1=__webpack_require__(128),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),react_2=__webpack_require__(1),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var ref=react_2.useRef(null);return __1.useClickAway(ref,addon_actions_1.action("outside clicked")),React.createElement("div",{ref:ref,style:{width:200,height:200,background:"red"}})};react_1.storiesOf("UI|useClickAway",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(723)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useClickAway
\n
React UI hook that triggers a callback when user\nclicks outside the target element.
\n
Usage
\n
import {useClickAway} from 'react-use';\n\nconst Demo = () => {\n  const ref = useRef(null);\n  useClickAway(ref, () => {\n    console.log('OUTSIDE CLICKED');\n  });\n\n  return (\n    <div ref={ref} style={{\n      width: 200,\n      height: 200,\n      background: 'red',\n    }} />\n  );\n};
\n
Reference
\n
useClickAway(ref, onMouseEvent)\nuseClickAway(ref, onMouseEvent, ['click'])\nuseClickAway(ref, onMouseEvent, ['mousedown', 'touchstart'])
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState(""),text=_a[0],setText=_a[1],_b=__1.useCopyToClipboard(),state=_b[0],copyToClipboard=_b[1];return React.createElement("div",null,React.createElement("input",{value:text,onChange:function(e){return setText(e.target.value)}}),React.createElement("button",{type:"button",onClick:function(){return copyToClipboard(text)}},"copy text"),state.error?React.createElement("p",null,"Unable to copy value: ",state.error.message):state.value&&React.createElement(React.Fragment,null,React.createElement("p",null,"Copied ",state.value," ",state.noUserInteraction?"without":"with"," user interaction"),React.createElement("input",{type:"text",placeholder:"Paste it in here to check"})))};react_1.storiesOf("Side-effects|useCopyToClipboard",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(725)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCopyToClipboard
\n
Copy text to a user's clipboard.
\n
Usage
\n
const Demo = () => {\n  const [text, setText] = React.useState('');\n  const [state, copyToClipboard] = useCopyToClipboard();\n\n  return (\n    <div>\n      <input value={text} onChange={e => setText(e.target.value)} />\n      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>\n      {state.error\n        ? <p>Unable to copy value: {state.error.message}</p>\n        : state.value && <p>Copied {state.value}</p>}\n    </div>\n  )\n}
\n
Reference
\n
const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
\n
    \n
  • value — value that was copied to clipboard, undefined when nothing was copied.
    • \n
  • error — catched error when trying to copy to clipboard.
    • \n
  • noUserInteraction — boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying copy-to-clipboard library.
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(1),min=_a[0],_b=_a[1],incMin=_b.inc,decMin=_b.dec,_c=__1.useCounter(10),max=_c[0],_d=_c[1],incMax=_d.inc,decMax=_d.dec,_e=__1.useCounter(5,max,min),value=_e[0],_f=_e[1],inc=_f.inc,dec=_f.dec,set=_f.set,reset=_f.reset;return React.createElement("div",null,React.createElement("div",null,"current: ",value," [min: ",min,"; max: ",max,"]"),React.createElement("br",null),"Current value: ",React.createElement("button",{onClick:function(){return inc()}},"Increment"),React.createElement("button",{onClick:function(){return dec()}},"Decrement"),React.createElement("button",{onClick:function(){return inc(5)}},"Increment (+5)"),React.createElement("button",{onClick:function(){return dec(5)}},"Decrement (-5)"),React.createElement("button",{onClick:function(){return set(100)}},"Set 100"),React.createElement("button",{onClick:function(){return reset()}},"Reset"),React.createElement("button",{onClick:function(){return reset(25)}},"Reset (25)"),React.createElement("br",null),React.createElement("br",null),"Min value:",React.createElement("button",{onClick:function(){return incMin()}},"Increment"),React.createElement("button",{onClick:function(){return decMin()}},"Decrement"),React.createElement("br",null),React.createElement("br",null),"Max value:",React.createElement("button",{onClick:function(){return incMax()}},"Increment"),React.createElement("button",{onClick:function(){return decMax()}},"Decrement"))};react_1.storiesOf("State|useCounter",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(727)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCounter
\n
React state hook that tracks a numeric value.
\n
useNumber is an alias for useCounter.
\n
Usage
\n
import {useCounter, useNumber} from 'react-use';\n\nconst Demo = () => {\n  const [min, { inc: incMin, dec: decMin }] = useCounter(1);\n  const [max, { inc: incMax, dec: decMax }] = useCounter(10);\n  const [value, { inc, dec, set, reset }] = useCounter(5, max, min);\n\n  return (\n    <div>\n      <div>\n        current: { value } [min: { min }; max: { max }]\n      </div>\n\n      <br />\n      Current value: <button onClick={ () => inc() }>Increment</button>\n      <button onClick={ () => dec() }>Decrement</button>\n      <button onClick={ () => inc(5) }>Increment (+5)</button>\n      <button onClick={ () => dec(5) }>Decrement (-5)</button>\n      <button onClick={ () => set(100) }>Set 100</button>\n      <button onClick={ () => reset() }>Reset</button>\n      <button onClick={ () => reset(25) }>Reset (25)</button>\n\n      <br />\n      <br />\n      Min value:\n      <button onClick={ () => incMin() }>Increment</button>\n      <button onClick={ () => decMin() }>Decrement</button>\n\n      <br />\n      <br />\n      Max value:\n      <button onClick={ () => incMax() }>Increment</button>\n      <button onClick={ () => decMax() }>Decrement</button>\n    </div>\n  );\n};
\n
Reference
\n
const [ current, { inc, dec, get, set, reset } ] = useCounter(initial: number, max: number | null = null, 20: number | null = null);
\n
    \n
  • current - current counter value;
    • \n
  • get(): number - getter of current counter value;
    • \n
  • inc(delta: number): void - increment current value;
    • \n
  • dec(delta: number): void - decrement current value;
    • \n
  • set(value: number): void - set arbitrary value;
    • \n
  • reset(value: number): void - as the set, but also will assign value by reference to the initial parameter;
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var className=__1.useCss({color:"red",border:"1px solid red","&:hover":{color:"blue"}});return React.createElement("div",{className:className},"hello")};react_1.storiesOf("UI|useCss",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(729)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useCss
\n
React UI hook that changes CSS dynamically. Works like "virtual CSS" —\nit re-renders only CSS rules that change. It is different from inline styles, because\nyou can use media queries and pseudo selectors.
\n
Usage
\n
import {useCss} from 'react-use';\n\nconst Demo = () => {\n  const className = useCss({\n    color: 'red',\n    border: '1px solid red',\n    '&:hover': {\n      color: 'blue',\n    },\n  });\n\n  return (\n    <div className={className}>\n      Hover me!\n    </div>\n  );\n};
\n
Examples
\n
const className = useCss({\n  color: 'tomato',\n  '&:hover': {\n    color: 'orange',\n  },\n});\n\nconst className = useCss({\n  svg: {\n    fill: 'tomato',\n  },\n  '.global_class &:hover svg': {\n    fill: 'orange',\n  },\n});\n\nconst className = useCss({\n  color: 'tomato',\n  '@media only screen and (max-width: 600px)': {\n    color: 'orange',\n    '&:hover': {\n      color: 'red',\n    }\n  },\n});
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=React.useState("Typing stopped"),state=_a[0],setState=_a[1],_b=React.useState(""),val=_b[0],setVal=_b[1],_c=React.useState(""),debouncedValue=_c[0],setDebouncedValue=_c[1],cancel=__1.useDebounce((function(){setState("Typing stopped"),setDebouncedValue(val)}),2e3,[val])[1];return React.createElement("div",null,React.createElement("input",{type:"text",value:val,placeholder:"Debounced input",onChange:function(_a){var currentTarget=_a.currentTarget;setState("Waiting for typing to stop..."),setVal(currentTarget.value)}}),React.createElement("div",null,state),React.createElement("div",null,"Debounced value: ",debouncedValue,React.createElement("button",{onClick:cancel},"Cancel debounce")))};react_1.storiesOf("Side effects|useDebounce",module).add("Docs",(function(){return React.createElement(ShowDocs_1.default,{md:__webpack_require__(731)})})).add("Demo",(function(){return React.createElement(Demo,null)}))}).call(this,__webpack_require__(2)(module))},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_exports__.default='
useDebounce
\n
React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.
\n
The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.
\n
Usage
\n
const Demo = () => {\n  const [state, setState] = React.useState('Typing stopped');\n  const [val, setVal] = React.useState('');\n  const [debouncedValue, setDebouncedValue] = React.useState('');\n\n  const [, cancel] = useDebounce(\n    () => {\n      setState('Typing stopped');\n      setDebouncedValue(val);\n    },\n    2000,\n    [val]\n  );\n\n  return (\n    <div>\n      <input\n        type="text"\n        value={val}\n        placeholder="Debounced input"\n        onChange={({ currentTarget }) => {\n          setState('Waiting for typing to stop...');\n          setVal(currentTarget.value);\n        }}\n      />\n      <div>{state}</div>\n      <div>\n        Debounced value: {debouncedValue}\n        <button onClick={cancel}>Cancel debounce</button>\n      </div>\n    </div>\n  );\n};
\n
Reference
\n
const [\n    isReady: () => boolean | null,\n    cancel: () => void,\n] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);
\n
    \n
  • fn: Function - function that will be called;
    • \n
  • ms: number - delay in milliseconds;
    • \n
  • deps: DependencyList - array of values that the debounce depends on, in the same manner as useEffect;
    • \n
  • isReady: ()=>boolean|null - function returning current debounce state:
      \n
    • false - pending
      • \n
    • true - called
      • \n
    • null - cancelled
      • \n
    \n
    • \n
  • cancel: ()=>void - cancel the debounce
    • \n
\n'},function(module,exports,__webpack_require__){"use strict";(function(module){Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),react_1=__webpack_require__(3),React=tslib_1.__importStar(__webpack_require__(1)),__1=__webpack_require__(5),ShowDocs_1=tslib_1.__importDefault(__webpack_require__(4)),Demo=function(){var _a=__1.useCounter(0),countNormal=_a[0],incNormal=_a[1].inc,_b=__1.useCounter(0),countDeep=_b[0],incDeep=_b[1].inc,options={max:500};return React.useEffect((function(){countNormal",module).add("Demo",(function(){return React.createElement("div",null,'Press "q" key!',React.createElement(UseKey_1.default,{filter:"q",fn:function(){return alert("Q pressed!")}}))}))}).call(this,__webpack_require__(2)(module))},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib_1=__webpack_require__(0),useKey_1=tslib_1.__importDefault(__webpack_require__(179)),UseKey=tslib_1.__importDefault(__webpack_require__(893)).default(useKey_1.default,(function(_a){var filter=_a.filter,fn=_a.fn,deps=_a.deps;return[filter,fn,tslib_1.__rest(_a,["filter","fn","deps"]),deps]}));exports.default=UseKey},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var defaultMapPropsToArgs=function(props){return[props]};exports.default=function(hook,mapPropsToArgs){void 0===mapPropsToArgs&&(mapPropsToArgs=defaultMapPropsToArgs);return function(props){var state=hook.apply(void 0,mapPropsToArgs(props)),children=props.children,_a=props.render,render=void 0===_a?children:_a;return render&&render(state)||null}}}],[[304,1,2]]]);
+//# sourceMappingURL=main.c1be7a5dba51b8b103f0.bundle.js.map
\ No newline at end of file
diff --git a/main.c1be7a5dba51b8b103f0.bundle.js.map b/main.c1be7a5dba51b8b103f0.bundle.js.map
new file mode 100644
index 00000000..5b977beb
--- /dev/null
+++ b/main.c1be7a5dba51b8b103f0.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.c1be7a5dba51b8b103f0.bundle.js","sources":["webpack:///main.c1be7a5dba51b8b103f0.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.51668712737fdc4b8d8d.bundle.js.map b/runtime~main.51668712737fdc4b8d8d.bundle.js.map
deleted file mode 100644
index 415dcd38..00000000
--- a/runtime~main.51668712737fdc4b8d8d.bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"runtime~main.51668712737fdc4b8d8d.bundle.js","sources":["webpack:///runtime~main.51668712737fdc4b8d8d.bundle.js"],"mappings":"AAAA","sourceRoot":""}
\ No newline at end of file
diff --git a/runtime~main.51668712737fdc4b8d8d.bundle.js b/runtime~main.c1be7a5dba51b8b103f0.bundle.js
similarity index 97%
rename from runtime~main.51668712737fdc4b8d8d.bundle.js
rename to runtime~main.c1be7a5dba51b8b103f0.bundle.js
index 8f038d20..48885e7e 100644
--- a/runtime~main.51668712737fdc4b8d8d.bundle.js
+++ b/runtime~main.c1be7a5dba51b8b103f0.bundle.js
@@ -1,2 +1,2 @@
 !function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}function __param(paramIndex,decorator){return function(target,key){decorator(target,key,paramIndex)}}function __metadata(metadataKey,metadataValue){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(metadataKey,metadataValue)}function __awaiter(thisArg,_arguments,P,generator){return new(P||(P=Promise))((function(resolve,reject){function fulfilled(value){try{step(generator.next(value))}catch(e){reject(e)}}function rejected(value){try{step(generator.throw(value))}catch(e){reject(e)}}function step(result){result.done?resolve(result.value):new P((function(resolve){resolve(result.value)})).then(fulfilled,rejected)}step((generator=generator.apply(thisArg,_arguments||[])).next())}))}function __generator(thisArg,body){var f,y,t,g,_={label:0,sent:function(){if(1&t[0])throw t[1];return t[1]},trys:[],ops:[]};return g={next:verb(0),throw:verb(1),return:verb(2)},"function"==typeof Symbol&&(g[Symbol.iterator]=function(){return this}),g;function verb(n){return function(v){return function step(op){if(f)throw new TypeError("Generator is already executing.");for(;_;)try{if(f=1,y&&(t=2&op[0]?y.return:op[0]?y.throw||((t=y.return)&&t.call(y),0):y.next)&&!(t=t.call(y,op[1])).done)return t;switch(y=0,t&&(op=[2&op[0],t.value]),op[0]){case 0:case 1:t=op;break;case 4:return _.label++,{value:op[1],done:!1};case 5:_.label++,y=op[1],op=[0];continue;case 7:op=_.ops.pop(),_.trys.pop();continue;default:if(!(t=(t=_.trys).length>0&&t[t.length-1])&&(6===op[0]||2===op[0])){_=0;continue}if(3===op[0]&&(!t||op[1]>t[0]&&op[1]=o.length&&(o=void 0),{value:o&&o[i++],done:!o}}}}function __read(o,n){var m="function"==typeof Symbol&&o[Symbol.iterator];if(!m)return o;var r,e,i=m.call(o),ar=[];try{for(;(void 0===n||n-- >0)&&!(r=i.next()).done;)ar.push(r.value)}catch(error){e={error:error}}finally{try{r&&!r.done&&(m=i.return)&&m.call(i)}finally{if(e)throw e.error}}return ar}function __spread(){for(var ar=[],i=0;i1||resume(n,v)}))})}function resume(n,v){try{!function step(r){r.value instanceof __await?Promise.resolve(r.value.v).then(fulfill,reject):settle(q[0][2],r)}(g[n](v))}catch(e){settle(q[0][3],e)}}function fulfill(value){resume("next",value)}function reject(value){resume("throw",value)}function settle(f,v){f(v),q.shift(),q.length&&resume(q[0][0],q[0][1])}}function __asyncDelegator(o){var i,p;return i={},verb("next"),verb("throw",(function(e){throw e})),verb("return"),i[Symbol.iterator]=function(){return this},i;function verb(n,f){i[n]=o[n]?function(v){return(p=!p)?{value:__await(o[n](v)),done:"return"===n}:f?f(v):v}:f}}function __asyncValues(o){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var i,m=o[Symbol.asyncIterator];return m?m.call(o):(o=__values(o),i={},verb("next"),verb("throw"),verb("return"),i[Symbol.asyncIterator]=function(){return this},i);function verb(n){i[n]=o[n]&&function(v){return new Promise((function(resolve,reject){(function settle(resolve,reject,d,v){Promise.resolve(v).then((function(v){resolve({value:v,done:d})}),reject)})(resolve,reject,(v=o[n](v)).done,v.value)}))}}}function __makeTemplateObject(cooked,raw){return Object.defineProperty?Object.defineProperty(cooked,"raw",{value:raw}):cooked.raw=raw,cooked}function __importStar(mod){if(mod&&mod.__esModule)return mod;var result={};if(null!=mod)for(var k in mod)Object.hasOwnProperty.call(mod,k)&&(result[k]=mod[k]);return result.default=mod,result}function __importDefault(mod){return mod&&mod.__esModule?mod:{default:mod}}},function(module,exports,__webpack_require__){"use strict";module.exports=__webpack_require__(575)},function(module,exports){module.exports=function(module){return module.webpackPolyfill||(module.deprecate=function(){},module.paths=[],module.children||(module.children=[]),Object.defineProperty(module,"loaded",{enumerable:!0,get:function(){return module.l}}),Object.defineProperty(module,"id",{enumerable:!0,get:function(){return module.i}}),module.webpackPolyfill=1),module}},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(6),Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"storiesOf",{enumerable:!0,get:function get(){return _preview.storiesOf}}),Object.defineProperty(exports,"setAddon",{enumerable:!0,get:function get(){return _preview.setAddon}}),Object.defineProperty(exports,"addDecorator",{enumerable:!0,get:function get(){return _preview.addDecorator}}),Object.defineProperty(exports,"DecoratorFn",{enumerable:!0,get:function get(){return _preview.DecoratorFn}}),Object.defineProperty(exports,"addParameters",{enumerable:!0,get:function get(){return _preview.addParameters}}),Object.defineProperty(exports,"configure",{enumerable:!0,get:function get(){return _preview.configure}}),Object.defineProperty(exports,"getStorybook",{enumerable:!0,get:function get(){return _preview.getStorybook}}),Object.defineProperty(exports,"raw",{enumerable:!0,get:function get(){return _preview.raw}}),Object.defineProperty(exports,"forceReRender",{enumerable:!0,get:function get(){return _preview.forceReRender}});var _preview=__webpack_require__(423);module&&module.hot&&module.hot.decline&&module.hot.decline()}).call(this,__webpack_require__(2)(module))},,,function(module,exports,__webpack_require__){var $=__webpack_require__(7),DESCRIPTORS=__webpack_require__(17);$({target:"Object",stat:!0,forced:!DESCRIPTORS,sham:!DESCRIPTORS},{defineProperty:__webpack_require__(24).f})},function(module,exports,__webpack_require__){var global=__webpack_require__(8),getOwnPropertyDescriptor=__webpack_require__(61).f,createNonEnumerableProperty=__webpack_require__(36),redefine=__webpack_require__(37),setGlobal=__webpack_require__(141),copyConstructorProperties=__webpack_require__(213),isForced=__webpack_require__(100);module.exports=function(options,source){var target,key,targetProperty,sourceProperty,descriptor,TARGET=options.target,GLOBAL=options.global,STATIC=options.stat;if(target=GLOBAL?global:STATIC?global[TARGET]||setGlobal(TARGET,{}):(global[TARGET]||{}).prototype)for(key in source){if(sourceProperty=source[key],targetProperty=options.noTargetGet?(descriptor=getOwnPropertyDescriptor(target,key))&&descriptor.value:target[key],!isForced(GLOBAL?key:TARGET+(STATIC?".":"#")+key,options.forced)&&void 0!==targetProperty){if(typeof sourceProperty==typeof targetProperty)continue;copyConstructorProperties(sourceProperty,targetProperty)}(options.sham||targetProperty&&targetProperty.sham)&&createNonEnumerableProperty(sourceProperty,"sham",!0),redefine(target,key,sourceProperty,options)}}},function(module,exports,__webpack_require__){(function(global){var check=function(it){return it&&it.Math==Math&&it};module.exports=check("object"==typeof globalThis&&globalThis)||check("object"==typeof window&&window)||check("object"==typeof self&&self)||check("object"==typeof global&&global)||Function("return this")()}).call(this,__webpack_require__(21))},function(module,exports,__webpack_require__){"use strict";var keys=__webpack_require__(132),hasSymbols="function"==typeof Symbol&&"symbol"==typeof Symbol("foo"),toStr=Object.prototype.toString,concat=Array.prototype.concat,origDefineProperty=Object.defineProperty,supportsDescriptors=origDefineProperty&&function(){var obj={};try{for(var _ in origDefineProperty(obj,"x",{enumerable:!1,value:obj}),obj)return!1;return obj.x===obj}catch(e){return!1}}(),defineProperty=function(object,name,value,predicate){var fn;name in object&&("function"!=typeof(fn=predicate)||"[object Function]"!==toStr.call(fn)||!predicate())||(supportsDescriptors?origDefineProperty(object,name,{configurable:!0,enumerable:!1,value:value,writable:!0}):object[name]=value)},defineProperties=function(object,map){var predicates=arguments.length>2?arguments[2]:{},props=keys(map);hasSymbols&&(props=concat.call(props,Object.getOwnPropertySymbols(map)));for(var i=0;i1&&"boolean"!=typeof allowMissing)throw new TypeError('"allowMissing" argument must be a boolean');var parts=stringToPath(name);if(0===parts.length)return getBaseIntrinsic(name,allowMissing);for(var value=getBaseIntrinsic("%"+parts[0]+"%",allowMissing),i=1;iindex;)args.push(arguments[index++]);if($replacer=replacer=args[1],(isObject(replacer)||void 0!==it)&&!isSymbol(it))return isArray(replacer)||(replacer=function(key,value){if("function"==typeof $replacer&&(value=$replacer.call(this,key,value)),!isSymbol(value))return value}),args[1]=replacer,nativeJSONStringify.apply(JSON,args)}}),$Symbol.prototype[TO_PRIMITIVE]||createNonEnumerableProperty($Symbol.prototype,TO_PRIMITIVE,$Symbol.prototype.valueOf),setToStringTag($Symbol,"Symbol"),hiddenKeys[HIDDEN]=!0},function(module,exports,__webpack_require__){"use strict";var toIndexedObject=__webpack_require__(44),addToUnscopables=__webpack_require__(149),Iterators=__webpack_require__(84),InternalStateModule=__webpack_require__(50),defineIterator=__webpack_require__(150),setInternalState=InternalStateModule.set,getInternalState=InternalStateModule.getterFor("Array Iterator");module.exports=defineIterator(Array,"Array",(function(iterated,kind){setInternalState(this,{type:"Array Iterator",target:toIndexedObject(iterated),index:0,kind:kind})}),(function(){var state=getInternalState(this),target=state.target,kind=state.kind,index=state.index++;return!target||index>=target.length?(state.target=void 0,{value:void 0,done:!0}):"keys"==kind?{value:index,done:!1}:"values"==kind?{value:target[index],done:!1}:{value:[index,target[index]],done:!1}}),"values"),Iterators.Arguments=Iterators.Array,addToUnscopables("keys"),addToUnscopables("values"),addToUnscopables("entries")},function(module,exports,__webpack_require__){"use strict";var implementation=__webpack_require__(316);module.exports=Function.prototype.bind||implementation},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(7),fails=__webpack_require__(10),isArray=__webpack_require__(80),isObject=__webpack_require__(12),toObject=__webpack_require__(32),toLength=__webpack_require__(31),createProperty=__webpack_require__(101),arraySpeciesCreate=__webpack_require__(147),arrayMethodHasSpeciesSupport=__webpack_require__(81),wellKnownSymbol=__webpack_require__(11),V8_VERSION=__webpack_require__(148),IS_CONCAT_SPREADABLE=wellKnownSymbol("isConcatSpreadable"),IS_CONCAT_SPREADABLE_SUPPORT=V8_VERSION>=51||!fails((function(){var array=[];return array[IS_CONCAT_SPREADABLE]=!1,array.concat()[0]!==array})),SPECIES_SUPPORT=arrayMethodHasSpeciesSupport("concat"),isConcatSpreadable=function(O){if(!isObject(O))return!1;var spreadable=O[IS_CONCAT_SPREADABLE];return void 0!==spreadable?!!spreadable:isArray(O)};$({target:"Array",proto:!0,forced:!IS_CONCAT_SPREADABLE_SUPPORT||!SPECIES_SUPPORT},{concat:function concat(arg){var i,k,length,len,E,O=toObject(this),A=arraySpeciesCreate(O,0),n=0;for(i=-1,length=arguments.length;i9007199254740991)throw TypeError("Maximum allowed index exceeded");for(k=0;k=9007199254740991)throw TypeError("Maximum allowed index exceeded");createProperty(A,n++,E)}return A.length=n,A}})},function(module,exports,__webpack_require__){var global=__webpack_require__(8),DOMIterables=__webpack_require__(223),ArrayIteratorMethods=__webpack_require__(26),createNonEnumerableProperty=__webpack_require__(36),wellKnownSymbol=__webpack_require__(11),ITERATOR=wellKnownSymbol("iterator"),TO_STRING_TAG=wellKnownSymbol("toStringTag"),ArrayValues=ArrayIteratorMethods.values;for(var COLLECTION_NAME in DOMIterables){var Collection=global[COLLECTION_NAME],CollectionPrototype=Collection&&Collection.prototype;if(CollectionPrototype){if(CollectionPrototype[ITERATOR]!==ArrayValues)try{createNonEnumerableProperty(CollectionPrototype,ITERATOR,ArrayValues)}catch(error){CollectionPrototype[ITERATOR]=ArrayValues}if(CollectionPrototype[TO_STRING_TAG]||createNonEnumerableProperty(CollectionPrototype,TO_STRING_TAG,COLLECTION_NAME),DOMIterables[COLLECTION_NAME])for(var METHOD_NAME in ArrayIteratorMethods)if(CollectionPrototype[METHOD_NAME]!==ArrayIteratorMethods[METHOD_NAME])try{createNonEnumerableProperty(CollectionPrototype,METHOD_NAME,ArrayIteratorMethods[METHOD_NAME])}catch(error){CollectionPrototype[METHOD_NAME]=ArrayIteratorMethods[METHOD_NAME]}}}},function(module,exports,__webpack_require__){var $=__webpack_require__(7),assign=__webpack_require__(430);$({target:"Object",stat:!0,forced:Object.assign!==assign},{assign:assign})},function(module,exports,__webpack_require__){var toInteger=__webpack_require__(79),min=Math.min;module.exports=function(argument){return argument>0?min(toInteger(argument),9007199254740991):0}},function(module,exports,__webpack_require__){var requireObjectCoercible=__webpack_require__(42);module.exports=function(argument){return Object(requireObjectCoercible(argument))}},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(7),DESCRIPTORS=__webpack_require__(17),global=__webpack_require__(8),has=__webpack_require__(23),isObject=__webpack_require__(12),defineProperty=__webpack_require__(24).f,copyConstructorProperties=__webpack_require__(213),NativeSymbol=global.Symbol;if(DESCRIPTORS&&"function"==typeof NativeSymbol&&(!("description"in NativeSymbol.prototype)||void 0!==NativeSymbol().description)){var EmptyStringDescriptionStore={},SymbolWrapper=function Symbol(){var description=arguments.length<1||void 0===arguments[0]?void 0:String(arguments[0]),result=this instanceof SymbolWrapper?new NativeSymbol(description):void 0===description?NativeSymbol():NativeSymbol(description);return""===description&&(EmptyStringDescriptionStore[result]=!0),result};copyConstructorProperties(SymbolWrapper,NativeSymbol);var symbolPrototype=SymbolWrapper.prototype=NativeSymbol.prototype;symbolPrototype.constructor=SymbolWrapper;var symbolToString=symbolPrototype.toString,native="Symbol(test)"==String(NativeSymbol("test")),regexp=/^Symbol\((.*)\)[^)]+$/;defineProperty(symbolPrototype,"description",{configurable:!0,get:function description(){var symbol=isObject(this)?this.valueOf():this,string=symbolToString.call(symbol);if(has(EmptyStringDescriptionStore,symbol))return"";var desc=native?string.slice(7,-1):string.replace(regexp,"$1");return""===desc?void 0:desc}}),$({global:!0,forced:!0},{Symbol:SymbolWrapper})}},function(module,exports,__webpack_require__){__webpack_require__(14)("iterator")},function(module,exports,__webpack_require__){"use strict";var charAt=__webpack_require__(229).charAt,InternalStateModule=__webpack_require__(50),defineIterator=__webpack_require__(150),setInternalState=InternalStateModule.set,getInternalState=InternalStateModule.getterFor("String Iterator");defineIterator(String,"String",(function(iterated){setInternalState(this,{type:"String Iterator",string:String(iterated),index:0})}),(function next(){var point,state=getInternalState(this),string=state.string,index=state.index;return index>=string.length?{value:void 0,done:!0}:(point=charAt(string,index),state.index+=point.length,{value:point,done:!1})}))},function(module,exports,__webpack_require__){var DESCRIPTORS=__webpack_require__(17),definePropertyModule=__webpack_require__(24),createPropertyDescriptor=__webpack_require__(73);module.exports=DESCRIPTORS?function(object,key,value){return definePropertyModule.f(object,key,createPropertyDescriptor(1,value))}:function(object,key,value){return object[key]=value,object}},function(module,exports,__webpack_require__){var global=__webpack_require__(8),shared=__webpack_require__(75),createNonEnumerableProperty=__webpack_require__(36),has=__webpack_require__(23),setGlobal=__webpack_require__(141),nativeFunctionToString=__webpack_require__(211),InternalStateModule=__webpack_require__(50),getInternalState=InternalStateModule.get,enforceInternalState=InternalStateModule.enforce,TEMPLATE=String(nativeFunctionToString).split("toString");shared("inspectSource",(function(it){return nativeFunctionToString.call(it)})),(module.exports=function(O,key,value,options){var unsafe=!!options&&!!options.unsafe,simple=!!options&&!!options.enumerable,noTargetGet=!!options&&!!options.noTargetGet;"function"==typeof value&&("string"!=typeof key||has(value,"name")||createNonEnumerableProperty(value,"name",key),enforceInternalState(value).source=TEMPLATE.join("string"==typeof key?key:"")),O!==global?(unsafe?!noTargetGet&&O[key]&&(simple=!0):delete O[key],simple?O[key]=value:createNonEnumerableProperty(O,key,value)):simple?O[key]=value:setGlobal(key,value)})(Function.prototype,"toString",(function toString(){return"function"==typeof this&&getInternalState(this).source||nativeFunctionToString.call(this)}))},function(module,exports,__webpack_require__){(function(global){var win;win="undefined"!=typeof window?window:void 0!==global?global:"undefined"!=typeof self?self:{},module.exports=win}).call(this,__webpack_require__(21))},function(module,exports,__webpack_require__){__webpack_require__(7)({target:"Array",stat:!0},{isArray:__webpack_require__(80)})},function(module,exports,__webpack_require__){var freeGlobal=__webpack_require__(247),freeSelf="object"==typeof self&&self&&self.Object===Object&&self,root=freeGlobal||freeSelf||Function("return this")();module.exports=root},function(module,exports,__webpack_require__){"use strict";(function(global){var origSymbol=global.Symbol,hasSymbolSham=__webpack_require__(325);module.exports=function hasNativeSymbols(){return"function"==typeof origSymbol&&("function"==typeof Symbol&&("symbol"==typeof origSymbol("foo")&&("symbol"==typeof Symbol("bar")&&hasSymbolSham())))}}).call(this,__webpack_require__(21))},function(module,exports){module.exports=function(it){if(null==it)throw TypeError("Can't call method on "+it);return it}},function(module,exports,__webpack_require__){var redefine=__webpack_require__(37),DatePrototype=Date.prototype,nativeDateToString=DatePrototype.toString,getTime=DatePrototype.getTime;new Date(NaN)+""!="Invalid Date"&&redefine(DatePrototype,"toString",(function toString(){var value=getTime.call(this);return value==value?nativeDateToString.call(this):"Invalid Date"}))},function(module,exports,__webpack_require__){var IndexedObject=__webpack_require__(96),requireObjectCoercible=__webpack_require__(42);module.exports=function(it){return IndexedObject(requireObjectCoercible(it))}},function(module,exports){var toString={}.toString;module.exports=function(it){return toString.call(it).slice(8,-1)}},function(module,exports,__webpack_require__){"use strict";var $=__webpack_require__(7),exec=__webpack_require__(112);$({target:"RegExp",proto:!0,forced:/./.exec!==exec},{exec:exec})},function(module,exports){module.exports=function isObject(value){var type=typeof value;return null!=value&&("object"==type||"function"==type)}},function(module,exports,__webpack_require__){"use strict";var bind=__webpack_require__(27);module.exports=bind.call(Function.call,Object.prototype.hasOwnProperty)},function(module,exports,__webpack_require__){"use strict";var GetIntrinsic=__webpack_require__(13),callBind=__webpack_require__(94),$indexOf=callBind(GetIntrinsic("String.prototype.indexOf"));module.exports=function callBoundIntrinsic(name,allowMissing){var intrinsic=GetIntrinsic(name,!!allowMissing);return"function"==typeof intrinsic&&$indexOf(name,".prototype.")?callBind(intrinsic):intrinsic}},function(module,exports,__webpack_require__){var set,get,has,NATIVE_WEAK_MAP=__webpack_require__(212),global=__webpack_require__(8),isObject=__webpack_require__(12),createNonEnumerableProperty=__webpack_require__(36),objectHas=__webpack_require__(23),sharedKey=__webpack_require__(97),hiddenKeys=__webpack_require__(77),WeakMap=global.WeakMap;if(NATIVE_WEAK_MAP){var store=new WeakMap,wmget=store.get,wmhas=store.has,wmset=store.set;set=function(it,metadata){return wmset.call(store,it,metadata),metadata},get=function(it){return wmget.call(store,it)||{}},has=function(it){return wmhas.call(store,it)}}else{var STATE=sharedKey("state");hiddenKeys[STATE]=!0,set=function(it,metadata){return createNonEnumerableProperty(it,STATE,metadata),metadata},get=function(it){return objectHas(it,STATE)?it[STATE]:{}},has=function(it){return objectHas(it,STATE)}}module.exports={set:set,get:get,has:has,enforce:function(it){return has(it)?get(it):set(it,{})},getterFor:function(TYPE){return function(it){var state;if(!isObject(it)||(state=get(it)).type!==TYPE)throw TypeError("Incompatible receiver, "+TYPE+" required");return state}}}},function(module,exports,__webpack_require__){var bind=__webpack_require__(83),IndexedObject=__webpack_require__(96),toObject=__webpack_require__(32),toLength=__webpack_require__(31),arraySpeciesCreate=__webpack_require__(147),push=[].push,createMethod=function(TYPE){var IS_MAP=1==TYPE,IS_FILTER=2==TYPE,IS_SOME=3==TYPE,IS_EVERY=4==TYPE,IS_FIND_INDEX=6==TYPE,NO_HOLES=5==TYPE||IS_FIND_INDEX;return function($this,callbackfn,that,specificCreate){for(var value,result,O=toObject($this),self=IndexedObject(O),boundFunction=bind(callbackfn,that,3),length=toLength(self.length),index=0,create=specificCreate||arraySpeciesCreate,target=IS_MAP?create($this,length):IS_FILTER?create($this,0):void 0;length>index;index++)if((NO_HOLES||index in self)&&(result=boundFunction(value=self[index],index,O),TYPE))if(IS_MAP)target[index]=result;else if(result)switch(TYPE){case 3:return!0;case 5:return value;case 6:return index;case 2:push.call(target,value)}else if(IS_EVERY)return!1;return IS_FIND_INDEX?-1:IS_SOME||IS_EVERY?IS_EVERY:target}};module.exports={forEach:createMethod(0),map:createMethod(1),filter:createMethod(2),some:createMethod(3),every:createMethod(4),find:createMethod(5),findIndex:createMethod(6)}},function(module,exports,__webpack_require__){"use strict";__webpack_require__(15),__webpack_require__(6),__webpack_require__(19),__webpack_require__(16),Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={};exports.default=void 0;var _index=__webpack_require__(431);Object.keys(_index).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _index[key]}}))}));var _makeDecorator=__webpack_require__(437);Object.keys(_makeDecorator).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _makeDecorator[key]}}))}));var _types=__webpack_require__(233);Object.keys(_types).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _types[key]}}))}));var _storybookChannelMock=__webpack_require__(438);Object.keys(_storybookChannelMock).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _storybookChannelMock[key]}}))}));var _hooks=__webpack_require__(441);Object.keys(_hooks).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _hooks[key]}}))}));var _default=_index.addons;exports.default=_default},function(module,exports,__webpack_require__){var defineProperty=__webpack_require__(24).f,has=__webpack_require__(23),TO_STRING_TAG=__webpack_require__(11)("toStringTag");module.exports=function(it,TAG,STATIC){it&&!has(it=STATIC?it:it.prototype,TO_STRING_TAG)&&defineProperty(it,TO_STRING_TAG,{configurable:!0,value:TAG})}},function(module,exports){module.exports=function(it){if("function"!=typeof it)throw TypeError(String(it)+" is not a function");return it}},function(module,exports){var isArray=Array.isArray;module.exports=isArray},function(module,exports){module.exports=function isObjectLike(value){return null!=value&&"object"==typeof value}},function(module,exports,__webpack_require__){var baseIsNative=__webpack_require__(484),getValue=__webpack_require__(487);module.exports=function getNative(object,key){var value=getValue(object,key);return baseIsNative(value)?value:void 0}},function(module,exports,__webpack_require__){"use strict";(function(module){__webpack_require__(15),__webpack_require__(43),__webpack_require__(30),__webpack_require__(6),__webpack_require__(153),__webpack_require__(19),__webpack_require__(16),Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={knob:!0,text:!0,boolean:!0,number:!0,color:!0,object:!0,select:!0,radios:!0,array:!0,date:!0,button:!0,files:!0,optionsKnob:!0,withKnobs:!0};exports.knob=function knob(name,options){return _registerKnobs.manager.knob(name,options)},exports.text=function text(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"text",value:value,groupId:groupId})},exports.boolean=function _boolean(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"boolean",value:value,groupId:groupId})},exports.number=function number(name,value){var options=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},groupId=arguments.length>3?arguments[3]:void 0,mergedOptions=options.range?Object.assign({},{min:0,max:10,step:1},{},options):options,finalOptions=Object.assign({type:"number"},mergedOptions,{value:value,groupId:groupId});return _registerKnobs.manager.knob(name,finalOptions)},exports.color=function color(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"color",value:value,groupId:groupId})},exports.object=function object(name,value,groupId){return _registerKnobs.manager.knob(name,{type:"object",value:value,groupId:groupId})},exports.select=function select(name,options,value,groupId){return _registerKnobs.manager.knob(name,{type:"select",selectV2:!0,options:options,value:value,groupId:groupId})},exports.radios=function radios(name,options,value,groupId){return _registerKnobs.manager.knob(name,{type:"radios",options:options,value:value,groupId:groupId})},exports.array=function array(name,value){var separator=arguments.length>2&&void 0!==arguments[2]?arguments[2]:",",groupId=arguments.length>3?arguments[3]:void 0;return _registerKnobs.manager.knob(name,{type:"array",value:value,separator:separator,groupId:groupId})},exports.date=function date(name){var value=arguments.length>1&&void 0!==arguments[1]?arguments[1]:new Date,groupId=arguments.length>2?arguments[2]:void 0,proxyValue=value?value.getTime():(new Date).getTime();return _registerKnobs.manager.knob(name,{type:"date",value:proxyValue,groupId:groupId})},exports.button=function button(name,callback,groupId){return _registerKnobs.manager.knob(name,{type:"button",callback:callback,hideLabel:!0,groupId:groupId})},exports.files=function files(name,accept){var value=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],groupId=arguments.length>3?arguments[3]:void 0;return _registerKnobs.manager.knob(name,{type:"files",accept:accept,value:value,groupId:groupId})},exports.optionsKnob=function optionsKnob(name,valuesObj,value,optionsObj,groupId){return _registerKnobs.manager.knob(name,{type:"options",options:valuesObj,value:value,optionsObj:optionsObj,groupId:groupId})},exports.withKnobs=void 0;var _addons=function _interopRequireWildcard(obj){if(obj&&obj.__esModule)return obj;var newObj={};if(null!=obj)for(var key in obj)if(Object.prototype.hasOwnProperty.call(obj,key)){var desc=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):{};desc.get||desc.set?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,newObj}(__webpack_require__(52)),_shared=__webpack_require__(176);Object.keys(_shared).forEach((function(key){"default"!==key&&"__esModule"!==key&&(Object.prototype.hasOwnProperty.call(_exportNames,key)||Object.defineProperty(exports,key,{enumerable:!0,get:function get(){return _shared[key]}}))}));var _registerKnobs=__webpack_require__(600);var defaultOptions={escapeHTML:!0},withKnobs=(0,_addons.makeDecorator)({name:"withKnobs",parameterName:"knobs",skipIfNoParametersOrOptions:!1,allowDeprecatedUsage:!0,wrapper:function wrapper(getStory,context,_ref){var options=_ref.options,storyOptions=_ref.parameters||options,allOptions=Object.assign({},defaultOptions,{},storyOptions),channel=_addons.default.getChannel();return _registerKnobs.manager.setChannel(channel),_registerKnobs.manager.setOptions(allOptions),channel.emit(_shared.SET_OPTIONS,allOptions),(0,_registerKnobs.registerKnobs)(),getStory(context)}});exports.withKnobs=withKnobs,module&&module.hot&&module.hot.decline&&module.hot.decline()}).call(this,__webpack_require__(2)(module))},,function(module,exports,__webpack_require__){"use strict";var trimStart=__webpack_require__(359),trimEnd=__webpack_require__(361),inspect=__webpack_require__(133),ES2018=__webpack_require__(138),assign=__webpack_require__(71),MAX_SAFE_INTEGER=__webpack_require__(191),$TypeError=__webpack_require__(13)("%TypeError%"),ES2019=assign(assign({},ES2018),{AddEntriesFromIterable:function AddEntriesFromIterable(target,iterable,adder){if(!this.IsCallable(adder))throw new $TypeError("Assertion failed: `adder` is not callable");if(null==iterable)throw new $TypeError("Assertion failed: `iterable` is present, and not nullish");for(var iteratorRecord=this.GetIterator(iterable);;){var next=this.IteratorStep(iteratorRecord);if(!next)return target;var nextItem=this.IteratorValue(next);if("Object"!==this.Type(nextItem)){var error=new $TypeError("iterator next must return an Object, got "+inspect(nextItem));return this.IteratorClose(iteratorRecord,(function(){throw error}))}try{var k=this.Get(nextItem,"0"),v=this.Get(nextItem,"1");this.Call(adder,target,[k,v])}catch(e){return this.IteratorClose(iteratorRecord,(function(){throw e}))}}},FlattenIntoArray:function FlattenIntoArray(target,source,sourceLen,start,depth){var mapperFunction;arguments.length>5&&(mapperFunction=arguments[5]);for(var targetIndex=start,sourceIndex=0;sourceIndex0&&(shouldFlatten=this.IsArray(element)),shouldFlatten){var elementLen=this.ToLength(this.Get(element,"length"));targetIndex=this.FlattenIntoArray(target,element,elementLen,targetIndex,depth-1)}else{if(targetIndex>=MAX_SAFE_INTEGER)throw new $TypeError("index too large");this.CreateDataPropertyOrThrow(target,this.ToString(targetIndex),element),targetIndex+=1}}sourceIndex+=1}return targetIndex},TrimString:function TrimString(string,where){var T,str=this.RequireObjectCoercible(string),S=this.ToString(str);if("start"===where)T=trimStart(S);else if("end"===where)T=trimEnd(S);else{if("start+end"!==where)throw new $TypeError('Assertion failed: invalid `where` value; must be "start", "end", or "start+end"');T=trimStart(trimEnd(S))}return T}});module.exports=ES2019},function(module,exports,__webpack_require__){var DESCRIPTORS=__webpack_require__(17),propertyIsEnumerableModule=__webpack_require__(95),createPropertyDescriptor=__webpack_require__(73),toIndexedObject=__webpack_require__(44),toPrimitive=__webpack_require__(74),has=__webpack_require__(23),IE8_DOM_DEFINE=__webpack_require__(210),nativeGetOwnPropertyDescriptor=Object.getOwnPropertyDescriptor;exports.f=DESCRIPTORS?nativeGetOwnPropertyDescriptor:function getOwnPropertyDescriptor(O,P){if(O=toIndexedObject(O),P=toPrimitive(P,!0),IE8_DOM_DEFINE)try{return nativeGetOwnPropertyDescriptor(O,P)}catch(error){}if(has(O,P))return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O,P),O[P])}},function(module,exports,__webpack_require__){var anObject=__webpack_require__(18),defineProperties=__webpack_require__(217),enumBugKeys=__webpack_require__(145),hiddenKeys=__webpack_require__(77),html=__webpack_require__(218),documentCreateElement=__webpack_require__(140),IE_PROTO=__webpack_require__(97)("IE_PROTO"),Empty=function(){},createDict=function(){var iframeDocument,iframe=documentCreateElement("iframe"),length=enumBugKeys.length;for(iframe.style.display="none",html.appendChild(iframe),iframe.src=String("javascript:"),(iframeDocument=iframe.contentWindow.document).open(),iframeDocument.write("