diff --git a/iframe.html b/iframe.html index 0597a50..99f1c9a 100644 --- a/iframe.html +++ b/iframe.html @@ -361,4 +361,4 @@ - window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}]; \ No newline at end of file + window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}]; \ No newline at end of file diff --git a/main.02363262.iframe.bundle.js b/main.02363262.iframe.bundle.js deleted file mode 100644 index c133039..0000000 --- a/main.02363262.iframe.bundle.js +++ /dev/null @@ -1,3 +0,0 @@ -/*! For license information please see main.02363262.iframe.bundle.js.LICENSE.txt */ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/button.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'.storybook-button {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n',""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/header.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'.wrapper {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\nsvg {\n display: inline-block;\n vertical-align: top;\n}\n\nh1 {\n font-weight: 900;\n font-size: 20px;\n line-height: 1;\n margin: 6px 0 6px 10px;\n display: inline-block;\n vertical-align: top;\n}\n\nbutton + button {\n margin-left: 10px;\n}\n\n.welcome {\n color: #333;\n font-size: 14px;\n margin-right: 10px;\n}\n',""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/page.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'section {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 24px;\n padding: 48px 20px;\n margin: 0 auto;\n max-width: 600px;\n color: #333;\n}\n\nsection h2 {\n font-weight: 900;\n font-size: 32px;\n line-height: 1;\n margin: 0 0 4px;\n display: inline-block;\n vertical-align: top;\n}\n\nsection p {\n margin: 1em 0;\n}\n\nsection a {\n text-decoration: none;\n color: #1ea7fd;\n}\n\nsection ul {\n padding-left: 30px;\n margin: 1em 0;\n}\n\nsection li {\n margin-bottom: 8px;\n}\n\nsection .tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #e7fdd8;\n color: #66bf3c;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n}\n\nsection .tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n}\n\nsection .tip-wrapper svg {\n display: inline-block;\n height: 12px;\n width: 12px;\n margin-right: 4px;\n vertical-align: top;\n margin-top: 3px;\n}\n\nsection .tip-wrapper svg path {\n fill: #1ea7fd;\n}\n',""]),module.exports=exports},"../../packages/react-hooks/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"g",(function(){return use_intersection_observer_useIntersectionObserver})),__webpack_require__.d(__webpack_exports__,"n",(function(){return use_unmount_useUnmount})),__webpack_require__.d(__webpack_exports__,"a",(function(){return use_all_deps_change_effect_useAllDepsChangeEffect})),__webpack_require__.d(__webpack_exports__,"b",(function(){return useAllDepsChangeMemo})),__webpack_require__.d(__webpack_exports__,"j",(function(){return use_local_storage_useLocalStorage})),__webpack_require__.d(__webpack_exports__,"f",(function(){return use_image_useImage})),__webpack_require__.d(__webpack_exports__,"i",(function(){return use_is_mobile_useIsMobile})),__webpack_require__.d(__webpack_exports__,"d",(function(){return use_debounce_useDebounce})),__webpack_require__.d(__webpack_exports__,"h",(function(){return use_interval_useInterval})),__webpack_require__.d(__webpack_exports__,"l",(function(){return use_queue_useQueue})),__webpack_require__.d(__webpack_exports__,"c",(function(){return use_copy_to_clipboard_useCopyToClipboard})),__webpack_require__.d(__webpack_exports__,"k",(function(){return use_previous_usePrevious})),__webpack_require__.d(__webpack_exports__,"e",(function(){return use_hover_useHover})),__webpack_require__.d(__webpack_exports__,"m",(function(){return use_scroll_useScroll}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");var react=__webpack_require__("../../node_modules/react/index.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=it.call(o)},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return useImage_arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||useImage_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useImage_slicedToArray(arr,i){return function useImage_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useImage_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||useImage_unsupportedIterableToArray(arr,i)||function useImage_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useImage_unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return useImage_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?useImage_arrayLikeToArray(o,minLen):void 0}}function useImage_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}var loadImage=function(){var _ref=_asyncToGenerator(_regeneratorRuntime().mark((function _callee(ref,src,onLoad){var image;return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(image=ref.current){_context.next=3;break}throw new Error("Image not found");case 3:return _context.abrupt("return",new Promise((function(resolve,reject){image.onload=function(e){onLoad&&onLoad(e),resolve(src)},image.onerror=function(){reject(new Error("Image load failed"))},image.src=src})));case 4:case"end":return _context.stop()}}),_callee)})));return function loadImage(_x,_x2,_x3){return _ref.apply(this,arguments)}}(),use_image_useImage=function useImage(_ref3){var initialSrc=_ref3.initialSrc,src=_ref3.src,fallback=_ref3.fallback,initialTimeout=_ref3.initialTimeout,delay=_ref3.delay,_ref3$maxRetry=_ref3.maxRetry,maxRetry=void 0===_ref3$maxRetry?0:_ref3$maxRetry,_ref3$retryDelay=_ref3.retryDelay,retryDelay=void 0===_ref3$retryDelay?0:_ref3$retryDelay,onLoad=_ref3.onLoad,defaultImageSource=function getDefaultImageSource(_ref2){var initialSrc=_ref2.initialSrc,_ref2$initialTimeout=_ref2.initialTimeout,initialTimeout=void 0===_ref2$initialTimeout?0:_ref2$initialTimeout,src=_ref2.src,_ref2$delay=_ref2.delay,delay=void 0===_ref2$delay?0:_ref2$delay,_ref2$maxRetry=_ref2.maxRetry,maxRetry=void 0===_ref2$maxRetry?0:_ref2$maxRetry,fallback=_ref2.fallback;return initialSrc&&initialTimeout<=0?initialSrc:src&&delay<=0&&maxRetry<=0&&(null==fallback||!fallback.length)?src:void 0}({initialSrc:initialSrc,initialTimeout:initialTimeout,src:src,delay:delay,maxRetry:maxRetry,fallback:fallback}),ref=Object(react.useRef)(null),isLoaded=Object(react.useRef)(!1),loadRetryAttemptsLeft=Object(react.useRef)(maxRetry),_useState2=useImage_slicedToArray(Object(react.useState)(defaultImageSource),2),imageSource=_useState2[0],setImageSource=_useState2[1],_useState4=useImage_slicedToArray(Object(react.useState)(!1),2),initialized=_useState4[0],setInitialized=_useState4[1],_useState6=useImage_slicedToArray(Object(react.useState)(!1),2),isFetching=_useState6[0],setIsFetching=_useState6[1],handleInitialTimeout=Object(react.useCallback)((function(){initialSrc&&(initialTimeout&&initialTimeout>0?setTimeout((function(){isLoaded.current||setImageSource(initialSrc)}),initialTimeout):setImageSource(initialSrc))}),[initialSrc,initialTimeout]),tryLoadImage=Object(react.useCallback)(_asyncToGenerator(_regeneratorRuntime().mark((function _callee2(){var nextFallback,srcs,_iterator,_step,targetSrc,img;return _regeneratorRuntime().wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:setIsFetching(!0),nextFallback="string"==typeof fallback?[fallback]:fallback||[],srcs=src?[src].concat(_toConsumableArray(nextFallback)):nextFallback,_iterator=_createForOfIteratorHelper(srcs),_context2.prev=4,_iterator.s();case 6:if((_step=_iterator.n()).done){_context2.next=22;break}return targetSrc=_step.value,_context2.prev=8,_context2.next=11,loadImage(ref,targetSrc,onLoad);case 11:if(!(img=_context2.sent)){_context2.next=16;break}return setImageSource(img),isLoaded.current=!0,_context2.abrupt("break",22);case 16:_context2.next=20;break;case 18:_context2.prev=18,_context2.t0=_context2.catch(8);case 20:_context2.next=6;break;case 22:_context2.next=27;break;case 24:_context2.prev=24,_context2.t1=_context2.catch(4),_iterator.e(_context2.t1);case 27:return _context2.prev=27,_iterator.f(),_context2.finish(27);case 30:setIsFetching(!1);case 31:case"end":return _context2.stop()}}),_callee2,null,[[4,24,27,30],[8,18]])}))),[src,fallback,delay,onLoad]),handleLoadImage=Object(react.useCallback)((function(){delay&&delay>0?setTimeout((function(){tryLoadImage()}),delay):tryLoadImage()}),[delay,tryLoadImage]),handleCleanup=Object(react.useCallback)((function(){ref.current&&(ref.current.onload=null,ref.current.onerror=null,ref.current=null)}),[]);return Object(react.useEffect)((function(){ref.current=new Image,handleInitialTimeout()}),[]),Object(react.useEffect)((function(){if(initialized&&!isFetching)return loadRetryAttemptsLeft.current<=0?(imageSource||setImageSource(src),void handleCleanup()):void(imageSource!==src&&setTimeout((function(){loadRetryAttemptsLeft.current-=1,handleLoadImage()}),retryDelay*(maxRetry-loadRetryAttemptsLeft.current)))}),[handleCleanup,imageSource,src,handleLoadImage,initialized,isFetching]),Object(react.useEffect)((function(){initialized||(setInitialized(!0),handleLoadImage())}),[initialized,handleLoadImage]),Object(react.useEffect)((function(){loadRetryAttemptsLeft.current=maxRetry}),[initialSrc,initialTimeout,src,delay,maxRetry,fallback]),use_unmount_useUnmount(handleCleanup),{src:imageSource,isFetching:!imageSource}};function useIsMobile_slicedToArray(arr,i){return function useIsMobile_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useIsMobile_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useIsMobile_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useIsMobile_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useIsMobile_arrayLikeToArray(o,minLen)}(arr,i)||function useIsMobile_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useIsMobile_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==arguments[1]?arguments[1]:1e3,_useState=Object(react.useState)(value),_useState2=useDebounce_slicedToArray(_useState,2),currentValue=_useState2[0],setCurrentValue=_useState2[1];return Object(react.useEffect)((function(){var handler=setTimeout((function(){setCurrentValue(value)}),delay);return function(){return clearTimeout(handler)}}),[value]),currentValue},use_interval_useInterval=function useInterval(callback,delay){var savedCallback=Object(react.useRef)(callback);Object(react.useEffect)((function(){savedCallback.current=callback}),[callback]),Object(react.useEffect)((function(){if(delay||0===delay){var id=setInterval((function(){savedCallback.current()}),delay);return function(){return clearInterval(id)}}}),[delay])};__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");function useQueue_toConsumableArray(arr){return function useQueue_arrayWithoutHoles(arr){if(Array.isArray(arr))return useQueue_arrayLikeToArray(arr)}(arr)||function useQueue_iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||useQueue_unsupportedIterableToArray(arr)||function useQueue_nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useQueue_slicedToArray(arr,i){return function useQueue_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useQueue_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||useQueue_unsupportedIterableToArray(arr,i)||function useQueue_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useQueue_unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return useQueue_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?useQueue_arrayLikeToArray(o,minLen):void 0}}function useQueue_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0&&void 0!==arguments[0]?arguments[0]:[],_useState=Object(react.useState)(initial),_useState2=useQueue_slicedToArray(_useState,2),queue=_useState2[0],setQueue=_useState2[1],first=queue[0],last=queue[queue.length-1],size=queue.length;function add(item){setQueue((function(prevQueue){return[].concat(useQueue_toConsumableArray(prevQueue),[item])}))}function remove(){setQueue((function(prevQueue){return prevQueue.slice(1)}))}function clear(){setQueue([])}return{add:add,remove:remove,clear:clear,first:first,last:last,size:size,queue:queue}};function useCopyToClipboard_regeneratorRuntime(){useCopyToClipboard_regeneratorRuntime=function _regeneratorRuntime(){return exports};var exports={},Op=Object.prototype,hasOwn=Op.hasOwnProperty,$Symbol="function"==typeof Symbol?Symbol:{},iteratorSymbol=$Symbol.iterator||"@@iterator",asyncIteratorSymbol=$Symbol.asyncIterator||"@@asyncIterator",toStringTagSymbol=$Symbol.toStringTag||"@@toStringTag";function define(obj,key,value){return Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}),obj[key]}try{define({},"")}catch(err){define=function define(obj,key,value){return obj[key]=value}}function wrap(innerFn,outerFn,self,tryLocsList){var protoGenerator=outerFn&&outerFn.prototype instanceof Generator?outerFn:Generator,generator=Object.create(protoGenerator.prototype),context=new Context(tryLocsList||[]);return generator._invoke=function(innerFn,self,context){var state="suspendedStart";return function(method,arg){if("executing"===state)throw new Error("Generator is already running");if("completed"===state){if("throw"===method)throw arg;return doneResult()}for(context.method=method,context.arg=arg;;){var delegate=context.delegate;if(delegate){var delegateResult=maybeInvokeDelegate(delegate,context);if(delegateResult){if(delegateResult===ContinueSentinel)continue;return delegateResult}}if("next"===context.method)context.sent=context._sent=context.arg;else if("throw"===context.method){if("suspendedStart"===state)throw state="completed",context.arg;context.dispatchException(context.arg)}else"return"===context.method&&context.abrupt("return",context.arg);state="executing";var record=tryCatch(innerFn,self,context);if("normal"===record.type){if(state=context.done?"completed":"suspendedYield",record.arg===ContinueSentinel)continue;return{value:record.arg,done:context.done}}"throw"===record.type&&(state="completed",context.method="throw",context.arg=record.arg)}}}(innerFn,self,context),generator}function tryCatch(fn,obj,arg){try{return{type:"normal",arg:fn.call(obj,arg)}}catch(err){return{type:"throw",arg:err}}}exports.wrap=wrap;var ContinueSentinel={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var IteratorPrototype={};define(IteratorPrototype,iteratorSymbol,(function(){return this}));var getProto=Object.getPrototypeOf,NativeIteratorPrototype=getProto&&getProto(getProto(values([])));NativeIteratorPrototype&&NativeIteratorPrototype!==Op&&hasOwn.call(NativeIteratorPrototype,iteratorSymbol)&&(IteratorPrototype=NativeIteratorPrototype);var Gp=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(IteratorPrototype);function defineIteratorMethods(prototype){["next","throw","return"].forEach((function(method){define(prototype,method,(function(arg){return this._invoke(method,arg)}))}))}function AsyncIterator(generator,PromiseImpl){function invoke(method,arg,resolve,reject){var record=tryCatch(generator[method],generator,arg);if("throw"!==record.type){var result=record.arg,value=result.value;return value&&"object"==typeof value&&hasOwn.call(value,"__await")?PromiseImpl.resolve(value.__await).then((function(value){invoke("next",value,resolve,reject)}),(function(err){invoke("throw",err,resolve,reject)})):PromiseImpl.resolve(value).then((function(unwrapped){result.value=unwrapped,resolve(result)}),(function(error){return invoke("throw",error,resolve,reject)}))}reject(record.arg)}var previousPromise;this._invoke=function(method,arg){function callInvokeWithMethodAndArg(){return new PromiseImpl((function(resolve,reject){invoke(method,arg,resolve,reject)}))}return previousPromise=previousPromise?previousPromise.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg()}}function maybeInvokeDelegate(delegate,context){var method=delegate.iterator[context.method];if(void 0===method){if(context.delegate=null,"throw"===context.method){if(delegate.iterator.return&&(context.method="return",context.arg=void 0,maybeInvokeDelegate(delegate,context),"throw"===context.method))return ContinueSentinel;context.method="throw",context.arg=new TypeError("The iterator does not provide a 'throw' method")}return ContinueSentinel}var record=tryCatch(method,delegate.iterator,context.arg);if("throw"===record.type)return context.method="throw",context.arg=record.arg,context.delegate=null,ContinueSentinel;var info=record.arg;return info?info.done?(context[delegate.resultName]=info.value,context.next=delegate.nextLoc,"return"!==context.method&&(context.method="next",context.arg=void 0),context.delegate=null,ContinueSentinel):info:(context.method="throw",context.arg=new TypeError("iterator result is not an object"),context.delegate=null,ContinueSentinel)}function pushTryEntry(locs){var entry={tryLoc:locs[0]};1 in locs&&(entry.catchLoc=locs[1]),2 in locs&&(entry.finallyLoc=locs[2],entry.afterLoc=locs[3]),this.tryEntries.push(entry)}function resetTryEntry(entry){var record=entry.completion||{};record.type="normal",delete record.arg,entry.completion=record}function Context(tryLocsList){this.tryEntries=[{tryLoc:"root"}],tryLocsList.forEach(pushTryEntry,this),this.reset(!0)}function values(iterable){if(iterable){var iteratorMethod=iterable[iteratorSymbol];if(iteratorMethod)return iteratorMethod.call(iterable);if("function"==typeof iterable.next)return iterable;if(!isNaN(iterable.length)){var i=-1,next=function next(){for(;++i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function useCopyToClipboard_asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function useCopyToClipboard_slicedToArray(arr,i){return function useCopyToClipboard_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useCopyToClipboard_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useCopyToClipboard_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useCopyToClipboard_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useCopyToClipboard_arrayLikeToArray(o,minLen)}(arr,i)||function useCopyToClipboard_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useCopyToClipboard_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==_args[1]&&_args[1],_context.prev=1,_context.next=4,navigator.clipboard.writeText(text);case 4:setClipBoardState({value:text,noUserInteraction:userInitiated,error:void 0}),_context.next=10;break;case 7:_context.prev=7,_context.t0=_context.catch(1),setClipBoardState({value:void 0,noUserInteraction:userInitiated,error:_context.t0});case 10:case"end":return _context.stop()}}),_callee,null,[[1,7]])})));return function copyToClipboard(_x){return _ref.apply(this,arguments)}}();return[clipBoardState,copyToClipboard]},use_previous_usePrevious=function usePrevious(state){var ref=Object(react.useRef)();return Object(react.useEffect)((function(){ref.current=state}),[state]),ref.current};function useHover_slicedToArray(arr,i){return function useHover_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useHover_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useHover_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useHover_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useHover_arrayLikeToArray(o,minLen)}(arr,i)||function useHover_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useHover_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Button=function Button(_ref){var _ref$primary=_ref.primary,primary=void 0!==_ref$primary&&_ref$primary,_ref$size=_ref.size,size=void 0===_ref$size?"medium":_ref$size,backgroundColor=_ref.backgroundColor,label=_ref.label,props=_objectWithoutProperties(_ref,_excluded),mode=primary?"storybook-button--primary":"storybook-button--secondary";return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",Object.assign({type:"button",className:["storybook-button","storybook-button--"+size,mode].join(" "),style:{backgroundColor:backgroundColor}},props,{children:label}))};Button.displayName="Button";try{Button.displayName="Button",Button.__docgenInfo={description:"Primary UI component for user interaction",displayName:"Button",props:{primary:{defaultValue:{value:"false"},description:"Is this the principal call to action on the page?",name:"primary",required:!1,type:{name:"boolean"}},backgroundColor:{defaultValue:null,description:"What background color to use",name:"backgroundColor",required:!1,type:{name:"string"}},size:{defaultValue:{value:"medium"},description:"How large should the button be?",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'}]}},label:{defaultValue:null,description:"Button contents",name:"label",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"Optional click handler",name:"onClick",required:!1,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/stories/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Header.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn})),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/react/index.js");var _Header__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/Header.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/react/jsx-runtime.js");__webpack_exports__.default={title:"Example/Header",component:_Header__WEBPACK_IMPORTED_MODULE_3__.a,parameters:{layout:"fullscreen"}};var Template=function Template(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Header__WEBPACK_IMPORTED_MODULE_3__.a,Object.assign({},args))};Template.displayName="Template";var LoggedIn=Template.bind({});LoggedIn.args={user:{name:"Jane Doe"}};var LoggedOut=Template.bind({});LoggedOut.args={}},"./src/stories/Header.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Header}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/react/index.js");var _Button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=(__webpack_require__("./src/stories/header.css"),__webpack_require__("../../node_modules/react/jsx-runtime.js")),Header=function Header(_ref){var user=_ref.user,onLogin=_ref.onLogin,onLogout=_ref.onLogout,onCreateAccount=_ref.onCreateAccount;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("header",{children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div",{className:"wrapper",children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div",{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("h1",{children:"Acme"})]}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div",{children:user?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("span",{className:"welcome",children:["Welcome, ",Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("b",{children:user.name}),"!"]}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{size:"small",onClick:onLogout,label:"Log out"})]}):Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{size:"small",onClick:onLogin,label:"Log in"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{primary:!0,size:"small",onClick:onCreateAccount,label:"Sign up"})]})})]})})};Header.displayName="Header";try{Header.displayName="Header",Header.__docgenInfo={description:"",displayName:"Header",props:{user:{defaultValue:null,description:"",name:"user",required:!1,type:{name:"User"}},onLogin:{defaultValue:null,description:"",name:"onLogin",required:!0,type:{name:"() => void"}},onLogout:{defaultValue:null,description:"",name:"onLogout",required:!0,type:{name:"() => void"}},onCreateAccount:{defaultValue:null,description:"",name:"onCreateAccount",required:!0,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Header.tsx#Header"]={docgenInfo:Header.__docgenInfo,name:"Header",path:"src/stories/Header.tsx#Header"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Introduction.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/stories/assets/code-brackets.svg"),_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8___default=__webpack_require__.n(_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8__),_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/stories/assets/colors.svg"),_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9__),_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/stories/assets/comments.svg"),_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10__),_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/stories/assets/direction.svg"),_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11__),_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/stories/assets/flow.svg"),_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12__),_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./src/stories/assets/plugin.svg"),_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13__),_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./src/stories/assets/repo.svg"),_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14___default=__webpack_require__.n(_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14__),_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./src/stories/assets/stackalt.svg"),_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15__),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.b,{title:"Example/Introduction",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("style",null,"\n .subheading {\n --mediumdark: '#999999';\n font-weight: 900;\n font-size: 13px;\n color: #999;\n letter-spacing: 6px;\n line-height: 24px;\n text-transform: uppercase;\n margin-bottom: 12px;\n margin-top: 40px;\n }\n\n .link-list {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n row-gap: 10px;\n }\n\n @media (min-width: 620px) {\n .link-list {\n row-gap: 20px;\n column-gap: 20px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n @media all and (-ms-high-contrast:none) {\n .link-list {\n display: -ms-grid;\n -ms-grid-columns: 1fr 1fr;\n -ms-grid-rows: 1fr 1fr;\n }\n }\n\n .link-item {\n display: block;\n padding: 20px 30px 20px 15px;\n border: 1px solid #00000010;\n border-radius: 5px;\n transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;\n color: #333333;\n display: flex;\n align-items: flex-start;\n }\n\n .link-item:hover {\n border-color: #1EA7FD50;\n transform: translate3d(0, -3px, 0);\n box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;\n }\n\n .link-item:active {\n border-color: #1EA7FD;\n transform: translate3d(0, 0, 0);\n }\n\n .link-item strong {\n font-weight: 700;\n display: block;\n margin-bottom: 2px;\n }\n\n .link-item img {\n height: 40px;\n width: 40px;\n margin-right: 15px;\n flex: none;\n }\n\n .link-item span {\n font-size: 14px;\n line-height: 20px;\n }\n\n .tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #E7FDD8;\n color: #66BF3C;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n }\n\n .tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n }\n\n .tip-wrapper code {\n font-size: 12px;\n display: inline-block;\n }\n "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h1",null,"Welcome to Nancy.JS"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Nancy.JS is a set of tools to help you build a modern, performant, and accessible web application. It is a collection of packages that work together to provide a consistent and cohesive developer experience."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h2",null,"What's included"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Nancy.JS is a collection of packages that work together to provide a consistent and cohesive developer experience. It includes packages that contain React Hooks,\nComponents, Third-Party Integrations, and more!!!"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"What is this page?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"This page is a living document that is meant to be a reference for all things Nancy.JS. It is a work in progress and will be updated as new features are added.\nWe use Storybook to document our components and hooks. You can find the source code for this page in the main Nancy.JS repository."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"What is Storybook?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Storybook helps you build UI components in isolation from your app's business logic, data, and context.\nThat makes it easy to develop hard-to-reach states. Save these UI states as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",{parentName:"p"},"stories")," to revisit during development, testing, or QA."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Browse example stories now by navigating to them in the sidebar.\nView their code in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"stories")," directory to learn how they work.\nWe recommend building UIs with a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://componentdriven.org"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",{parentName:"a"},"component-driven"))," process starting with atomic components and ending with pages."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"subheading"},"Configure"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/addons/addon-types",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13___default.a,alt:"plugin"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Presets for popular tools"),"Easy setup for TypeScript, SCSS and more.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/webpack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15___default.a,alt:"Build"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Build configuration"),"How to customize webpack and Babel")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/styling-and-css",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9___default.a,alt:"colors"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Styling"),"How to load and configure CSS libraries")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12___default.a,alt:"flow"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Data"),"Providers and mocking for data libraries"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"subheading"},"Learn"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14___default.a,alt:"repo"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Storybook documentation"),"Configure, customize, and extend")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/tutorials/",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11___default.a,alt:"direction"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"In-depth guides"),"Best practices from leading teams")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://github.com/storybookjs/storybook",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8___default.a,alt:"code"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"GitHub project"),"View the source and add issues")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://discord.gg/storybook",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10___default.a,alt:"comments"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Discord chat"),"Chat with maintainers and the community"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"tip-wrapper"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",{className:"tip"},"Tip"),"Edit the Markdown in"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",null,"stories/Introduction.stories.mdx")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Example/Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/stories/Page.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut})),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.async-iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.math.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.json.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reverse.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");var react=__webpack_require__("../../node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@storybook/testing-library/dist/esm/index.js"),Header=(__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./src/stories/Header.tsx")),jsx_runtime=(__webpack_require__("./src/stories/page.css"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}Page_Page.displayName="Page";__webpack_exports__.default={title:"Example/Page",component:Page_Page,parameters:{layout:"fullscreen"}};var Page_stories_Template=function Template(args){return Object(jsx_runtime.jsx)(Page_Page,Object.assign({},args))};Page_stories_Template.displayName="Template";var LoggedOut=Page_stories_Template.bind({}),LoggedIn=Page_stories_Template.bind({});LoggedIn.play=function(){var _ref2=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(_regeneratorRuntime().mark((function _callee(_ref){var canvasElement,canvas,loginButton;return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return canvasElement=_ref.canvasElement,canvas=Object(esm.b)(canvasElement),_context.next=4,canvas.getByRole("button",{name:/Log in/i});case 4:return loginButton=_context.sent,_context.next=7,esm.a.click(loginButton);case 7:case"end":return _context.stop()}}),_callee)})));return function(_x){return _ref2.apply(this,arguments)}}()},"./src/stories/assets/code-brackets.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/code-brackets.2e1112d7.svg"},"./src/stories/assets/colors.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/colors.a4bd0486.svg"},"./src/stories/assets/comments.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/comments.a3859089.svg"},"./src/stories/assets/direction.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/direction.b770f9af.svg"},"./src/stories/assets/flow.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/flow.edad2ac1.svg"},"./src/stories/assets/plugin.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/plugin.d494b228.svg"},"./src/stories/assets/repo.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/repo.6d496322.svg"},"./src/stories/assets/stackalt.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/stackalt.dba9fbb3.svg"},"./src/stories/button.css":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/button.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./src/stories/header.css":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/header.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./src/stories/hooks/useAllDepsChangeEffect.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/react/index.js"),_nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../packages/react-hooks/index.ts"),_utils__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./src/utils/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [count, setCount] = useState(0);\n\n useInterval(() => {\n setCount(count + 1);\n }, 1000);\n\n return
{count}
;\n}"}},Example.parameters)},"./src/stories/hooks/useIsMobile.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/react/index.js");var _nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../packages/react-hooks/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),Example=function Example(){var isMobile=Object(_nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_1__.i)();return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{children:isMobile?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{children:"Is mobile"}):Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{children:"Is desktop"})})};Example.displayName="Example",__webpack_exports__.default={title:"React Hooks/useIsMobile",component:Example};try{Example.displayName="Example",Example.__docgenInfo={description:"",displayName:"Example",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/hooks/useIsMobile.stories.tsx#Example"]={docgenInfo:Example.__docgenInfo,name:"Example",path:"src/stories/hooks/useIsMobile.stories.tsx#Example"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/hooks/useLocalStorage.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/react/index.js");var _nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../packages/react-hooks/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.b,{title:"React Thirdparty/ReCaptcha V3",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h1",{align:"center"},"React Google ReCaptcha V3"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{align:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Integrating Google ReCaptcha V3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h2",null,"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"Provide ReCaptcha Key"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"To use this integration, you need to create a recaptcha key for your domain, you can get one from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://www.google.com/recaptcha/intro/v3.html"},"here"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"Components"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h4",null,"GoogleReCaptchaProvider"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"This submobule provides a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptchaProvider")," provider component that should be used to wrap around your components."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptchaProvider"),"'s responsibility is to load the necessary reCaptcha script and provide access to reCaptcha to the rest of your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"You can customize the injected ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"script")," tag with the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"scriptProps")," prop. This prop allows you to add ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"async"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"defer"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"nonce")," attributes to the script tag. You can also control whether the injected script will be added to the document body or head with ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"appendTo")," attribute. Example can be found belows. The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"scriptProps")," and its attributes are all optional."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"It also provides an optional prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"language")," to support different languages that is supported by Google ReCaptcha."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://developers.google.com/recaptcha/docs/language"},"https://developers.google.com/recaptcha/docs/language")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"The provider also provide the prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useReCaptchaNet")," to load script from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"recaptcha.net"),":\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally"},"https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'import { GoogleReCaptchaProvider } from \'@nanlabs/react-thirdparty\'\n\nReactDom.render(\n \n \n ,\n document.getElementById(\'app\')\n)\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"There are three ways to trigger the recaptcha validation: using the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptcha")," component or using the custom hook ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useGoogleReCaptcha"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"GoogleReCaptcha"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptcha")," is a react component that can be used in your app to trigger the validation. It provides a prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"onVerify"),", which will be called once the verify is done successfully."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'import {\n GoogleReCaptchaProvider,\n GoogleReCaptcha,\n} from "@nanlabs/react-thirdparty";\n\nReactDom.render(\n \n \n ,\n document.getElementById("app")\n);\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'// IMPORTANT NOTES: The `GoogleReCaptcha` component is a wrapper around `useGoogleReCaptcha` hook and use `useEffect` to run the verification.\n// It\'s important that you understand how React hooks work to use it properly.\n// Avoid using inline function for the `onVerify` props as it can possibly cause the verify function to run continously.\n// To avoid that problem, you can use a memoized function provided by `React.useCallback` or a class method\n// The code below is an example that inline function can result in an infinite loop and the verify function runs continously:\n\nconst MyComponent: FC = () => {\n const [token, setToken] = useState();\n\n return (\n
\n {\n setToken(token);\n }}\n />\n
\n );\n};\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"React Hook: useGoogleReCaptcha"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"If you prefer a React Hook approach over the old good Component, you can choose to use the custom hook ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useGoogleReCaptcha"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"It's very simple to use the hook:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},"import {\n GoogleReCaptchaProvider,\n useGoogleReCaptcha\n} from '@nanlabs/react-thirdparty'\n\nconst YourReCaptchaComponent = () => {\n // you should use `useCallback` just when needed\n const handleVerify = useCallback((token) => {\n console.log(`Yay! token: ${token}`)\n }, [])\n\n useGoogleReCaptcha({\n action: \"login_page\",\n onVerify: handleVerify,\n })\n\n return (...)\n}\n\nReactDom.render(\n \n \n ,\n document.getElementById('app')\n)\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"React Thirdparty/ReCaptcha V3",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/stories/react-ui-components/Image.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Default",(function(){return Default}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js");var react_hooks=__webpack_require__("../../packages/react-hooks/index.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["initialSrc","initialTimeout","src","fallback","delay","maxRetry","retryDelay","decoding","loading","className","onLoad","style","width","height"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var classNames=function classNames(className,loading){return className.split(/\s/).map((function(name){return loading?name+" "+name+"-loading":name})).join(" ")},Image_Image=function Image(_ref){var initialSrc=_ref.initialSrc,initialTimeout=_ref.initialTimeout,src=_ref.src,fallback=_ref.fallback,delay=_ref.delay,maxRetry=_ref.maxRetry,retryDelay=_ref.retryDelay,_ref$decoding=_ref.decoding,decoding=void 0===_ref$decoding?"async":_ref$decoding,_ref$loading=_ref.loading,loading=void 0===_ref$loading?"lazy":_ref$loading,_ref$className=_ref.className,className=void 0===_ref$className?"async-image":_ref$className,onLoad=_ref.onLoad,style=_ref.style,width=_ref.width,height=_ref.height,rest=_objectWithoutProperties(_ref,_excluded),_useImage=Object(react_hooks.f)({initialTimeout:initialTimeout,initialSrc:initialSrc,src:src,fallback:fallback,delay:delay,maxRetry:maxRetry,retryDelay:retryDelay,onLoad:onLoad}),targetSrc=_useImage.src,isFetching=_useImage.isFetching;return Object(jsx_runtime.jsx)("img",Object.assign({},rest,{src:targetSrc,width:width,height:height,style:style,decoding:"auto"===decoding?void 0:decoding,loading:"auto"===loading?void 0:loading,className:classNames(className,isFetching)}))};Image_Image.displayName="Image";var image_Image=Image_Image;try{Image_Image.displayName="Image",Image_Image.__docgenInfo={description:"",displayName:"Image",props:{decoding:{defaultValue:{value:"async"},description:"",name:"decoding",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"sync"'},{value:'"async"'}]}},loading:{defaultValue:{value:"lazy"},description:"",name:"loading",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"eager"'},{value:'"lazy"'}]}},className:{defaultValue:{value:"async-image"},description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},initialSrc:{defaultValue:null,description:"",name:"initialSrc",required:!1,type:{name:"string"}},fallback:{defaultValue:null,description:"",name:"fallback",required:!1,type:{name:"string | string[]"}},initialTimeout:{defaultValue:null,description:"",name:"initialTimeout",required:!1,type:{name:"number"}},delay:{defaultValue:null,description:"",name:"delay",required:!1,type:{name:"number"}},maxRetry:{defaultValue:null,description:"",name:"maxRetry",required:!1,type:{name:"number"}},retryDelay:{defaultValue:null,description:"",name:"retryDelay",required:!1,type:{name:"number"}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"React.ReactEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/image/Image.tsx#Image"]={docgenInfo:Image_Image.__docgenInfo,name:"Image",path:"../../packages/react-ui/image/Image.tsx#Image"})}catch(__react_docgen_typescript_loader_error){}var _templateObject;__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");var Skeleton_Skeleton=__webpack_require__("../../node_modules/styled-components/dist/styled-components.browser.esm.js").a.div(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n position: relative;\n overflow: hidden;\n background-color: ",";\n &::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0.3) 40%,\n rgba(255, 255, 255, 0.3) 60%,\n rgba(255, 255, 255, 0)\n );\n animation: ",';\n content: "";\n }\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n > * {\n visibility: ',";\n }\n"])),(function(_ref){return _ref.loading?"#dddbdd":"transparent"}),(function(_ref2){return _ref2.loading?"shimmer 2s infinite":"none"}),(function(_ref3){return _ref3.loading?"hidden":"visible"}));try{Skeleton_Skeleton.displayName="Skeleton",Skeleton_Skeleton.__docgenInfo={description:"",displayName:"Skeleton",props:{loading:{defaultValue:null,description:"",name:"loading",required:!1,type:{name:"boolean"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/skeleton/Skeleton.tsx#Skeleton"]={docgenInfo:Skeleton_Skeleton.__docgenInfo,name:"Skeleton",path:"../../packages/react-ui/skeleton/Skeleton.tsx#Skeleton"})}catch(__react_docgen_typescript_loader_error){}try{Image.displayName="Image",Image.__docgenInfo={description:"",displayName:"Image",props:{decoding:{defaultValue:{value:"async"},description:"",name:"decoding",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"sync"'},{value:'"async"'}]}},loading:{defaultValue:{value:"lazy"},description:"",name:"loading",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"eager"'},{value:'"lazy"'}]}},className:{defaultValue:{value:"async-image"},description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},initialSrc:{defaultValue:null,description:"",name:"initialSrc",required:!1,type:{name:"string"}},fallback:{defaultValue:null,description:"",name:"fallback",required:!1,type:{name:"string | string[]"}},initialTimeout:{defaultValue:null,description:"",name:"initialTimeout",required:!1,type:{name:"number"}},delay:{defaultValue:null,description:"",name:"delay",required:!1,type:{name:"number"}},maxRetry:{defaultValue:null,description:"",name:"maxRetry",required:!1,type:{name:"number"}},retryDelay:{defaultValue:null,description:"",name:"retryDelay",required:!1,type:{name:"number"}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"React.ReactEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/index.tsx#Image"]={docgenInfo:Image.__docgenInfo,name:"Image",path:"../../packages/react-ui/index.tsx#Image"})}catch(__react_docgen_typescript_loader_error){}try{Skeleton.displayName="Skeleton",Skeleton.__docgenInfo={description:"",displayName:"Skeleton",props:{loading:{defaultValue:null,description:"",name:"loading",required:!1,type:{name:"boolean"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/index.tsx#Skeleton"]={docgenInfo:Skeleton.__docgenInfo,name:"Skeleton",path:"../../packages/react-ui/index.tsx#Skeleton"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.default={title:"React Components/Image",component:image_Image,parameters:{initialSrc:"https://picsum.photos/300",src:"https://files.worldwildlife.org/wwfcmsprod/images/Panda_in_Tree/hero_small/99i33zyc0l_Large_WW170579.jpg",fallback:["https://picsum.photos/300","https://picsum.photos/200"],delay:1e3,maxRetry:3,retryDelay:1e3,decoding:"async",loading:"lazy",className:"async-image",onLoad:function onLoad(){return console.log("onLoad")},style:{width:"300px",objectFit:"cover"},initialTimeout:1e3}};var Image_stories_Template=function Template(args){return Object(jsx_runtime.jsx)(image_Image,Object.assign({},args))};Image_stories_Template.displayName="Template";var Default=Image_stories_Template.bind({});Default.args={src:"https://files.worldwildlife.org/wwfcmsprod/images/Panda_in_Tree/hero_small/99i33zyc0l_Large_WW170579.jpg",fallback:["https://picsum.photos/300","https://picsum.photos/200"],maxRetry:3,retryDelay:1e3,decoding:"async",loading:"lazy",className:"async-image",onLoad:function onLoad(){return console.log("onLoad")},style:{width:"300px",objectFit:"cover"},initialTimeout:1e3}},"./src/utils/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return randomString}));__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0&&void 0!==arguments[0]?arguments[0]:5;return _toConsumableArray(Array(size)).map((function(){return Math.random().toString(36)[2]})).join("")}},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){}},[[0,4,5]]]); -//# sourceMappingURL=main.02363262.iframe.bundle.js.map \ No newline at end of file diff --git a/main.02363262.iframe.bundle.js.map b/main.02363262.iframe.bundle.js.map deleted file mode 100644 index 2e10431..0000000 --- a/main.02363262.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"main.02363262.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} \ No newline at end of file diff --git a/main.5c65e568.iframe.bundle.js b/main.5c65e568.iframe.bundle.js new file mode 100644 index 0000000..8f5d3cb --- /dev/null +++ b/main.5c65e568.iframe.bundle.js @@ -0,0 +1,3 @@ +/*! For license information please see main.5c65e568.iframe.bundle.js.LICENSE.txt */ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/button.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'.storybook-button {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n',""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/header.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'.wrapper {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n padding: 15px 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\nsvg {\n display: inline-block;\n vertical-align: top;\n}\n\nh1 {\n font-weight: 900;\n font-size: 20px;\n line-height: 1;\n margin: 6px 0 6px 10px;\n display: inline-block;\n vertical-align: top;\n}\n\nbutton + button {\n margin-left: 10px;\n}\n\n.welcome {\n color: #333;\n font-size: 14px;\n margin-right: 10px;\n}\n',""]),module.exports=exports},"../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/page.css":function(module,exports,__webpack_require__){(exports=__webpack_require__("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([module.i,'section {\n font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 24px;\n padding: 48px 20px;\n margin: 0 auto;\n max-width: 600px;\n color: #333;\n}\n\nsection h2 {\n font-weight: 900;\n font-size: 32px;\n line-height: 1;\n margin: 0 0 4px;\n display: inline-block;\n vertical-align: top;\n}\n\nsection p {\n margin: 1em 0;\n}\n\nsection a {\n text-decoration: none;\n color: #1ea7fd;\n}\n\nsection ul {\n padding-left: 30px;\n margin: 1em 0;\n}\n\nsection li {\n margin-bottom: 8px;\n}\n\nsection .tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #e7fdd8;\n color: #66bf3c;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n}\n\nsection .tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n}\n\nsection .tip-wrapper svg {\n display: inline-block;\n height: 12px;\n width: 12px;\n margin-right: 4px;\n vertical-align: top;\n margin-top: 3px;\n}\n\nsection .tip-wrapper svg path {\n fill: #1ea7fd;\n}\n',""]),module.exports=exports},"../../packages/react-hooks/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"g",(function(){return use_intersection_observer_useIntersectionObserver})),__webpack_require__.d(__webpack_exports__,"o",(function(){return use_unmount_useUnmount})),__webpack_require__.d(__webpack_exports__,"a",(function(){return use_all_deps_change_effect_useAllDepsChangeEffect})),__webpack_require__.d(__webpack_exports__,"b",(function(){return useAllDepsChangeMemo})),__webpack_require__.d(__webpack_exports__,"j",(function(){return use_local_storage_useLocalStorage})),__webpack_require__.d(__webpack_exports__,"f",(function(){return use_image_useImage})),__webpack_require__.d(__webpack_exports__,"i",(function(){return use_is_mobile_useIsMobile})),__webpack_require__.d(__webpack_exports__,"d",(function(){return use_debounce_useDebounce})),__webpack_require__.d(__webpack_exports__,"h",(function(){return use_interval_useInterval})),__webpack_require__.d(__webpack_exports__,"m",(function(){return use_queue_useQueue})),__webpack_require__.d(__webpack_exports__,"c",(function(){return use_copy_to_clipboard_useCopyToClipboard})),__webpack_require__.d(__webpack_exports__,"l",(function(){return use_previous_usePrevious})),__webpack_require__.d(__webpack_exports__,"e",(function(){return use_hover_useHover})),__webpack_require__.d(__webpack_exports__,"k",(function(){return use_overflow_useOverflow})),__webpack_require__.d(__webpack_exports__,"n",(function(){return use_scroll_useScroll}));__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");var react=__webpack_require__("../../node_modules/react/index.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e2){throw _e2},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var err,normalCompletion=!0,didErr=!1;return{s:function s(){it=it.call(o)},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e3){didErr=!0,err=_e3},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return useImage_arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||useImage_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useImage_slicedToArray(arr,i){return function useImage_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useImage_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||useImage_unsupportedIterableToArray(arr,i)||function useImage_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useImage_unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return useImage_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?useImage_arrayLikeToArray(o,minLen):void 0}}function useImage_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}var loadImage=function(){var _ref=_asyncToGenerator(_regeneratorRuntime().mark((function _callee(ref,src,onLoad){var image;return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:if(image=ref.current){_context.next=3;break}throw new Error("Image not found");case 3:return _context.abrupt("return",new Promise((function(resolve,reject){image.onload=function(e){onLoad&&onLoad(e),resolve(src)},image.onerror=function(){reject(new Error("Image load failed"))},image.src=src})));case 4:case"end":return _context.stop()}}),_callee)})));return function loadImage(_x,_x2,_x3){return _ref.apply(this,arguments)}}(),use_image_useImage=function useImage(_ref3){var initialSrc=_ref3.initialSrc,src=_ref3.src,fallback=_ref3.fallback,initialTimeout=_ref3.initialTimeout,delay=_ref3.delay,_ref3$maxRetry=_ref3.maxRetry,maxRetry=void 0===_ref3$maxRetry?0:_ref3$maxRetry,_ref3$retryDelay=_ref3.retryDelay,retryDelay=void 0===_ref3$retryDelay?0:_ref3$retryDelay,onLoad=_ref3.onLoad,defaultImageSource=function getDefaultImageSource(_ref2){var initialSrc=_ref2.initialSrc,_ref2$initialTimeout=_ref2.initialTimeout,initialTimeout=void 0===_ref2$initialTimeout?0:_ref2$initialTimeout,src=_ref2.src,_ref2$delay=_ref2.delay,delay=void 0===_ref2$delay?0:_ref2$delay,_ref2$maxRetry=_ref2.maxRetry,maxRetry=void 0===_ref2$maxRetry?0:_ref2$maxRetry,fallback=_ref2.fallback;return initialSrc&&initialTimeout<=0?initialSrc:src&&delay<=0&&maxRetry<=0&&(null==fallback||!fallback.length)?src:void 0}({initialSrc:initialSrc,initialTimeout:initialTimeout,src:src,delay:delay,maxRetry:maxRetry,fallback:fallback}),ref=Object(react.useRef)(null),isLoaded=Object(react.useRef)(!1),loadRetryAttemptsLeft=Object(react.useRef)(maxRetry),_useState2=useImage_slicedToArray(Object(react.useState)(defaultImageSource),2),imageSource=_useState2[0],setImageSource=_useState2[1],_useState4=useImage_slicedToArray(Object(react.useState)(!1),2),initialized=_useState4[0],setInitialized=_useState4[1],_useState6=useImage_slicedToArray(Object(react.useState)(!1),2),isFetching=_useState6[0],setIsFetching=_useState6[1],handleInitialTimeout=Object(react.useCallback)((function(){initialSrc&&(initialTimeout&&initialTimeout>0?setTimeout((function(){isLoaded.current||setImageSource(initialSrc)}),initialTimeout):setImageSource(initialSrc))}),[initialSrc,initialTimeout]),tryLoadImage=Object(react.useCallback)(_asyncToGenerator(_regeneratorRuntime().mark((function _callee2(){var nextFallback,srcs,_iterator,_step,targetSrc,img;return _regeneratorRuntime().wrap((function _callee2$(_context2){for(;;)switch(_context2.prev=_context2.next){case 0:setIsFetching(!0),nextFallback="string"==typeof fallback?[fallback]:fallback||[],srcs=src?[src].concat(_toConsumableArray(nextFallback)):nextFallback,_iterator=_createForOfIteratorHelper(srcs),_context2.prev=4,_iterator.s();case 6:if((_step=_iterator.n()).done){_context2.next=22;break}return targetSrc=_step.value,_context2.prev=8,_context2.next=11,loadImage(ref,targetSrc,onLoad);case 11:if(!(img=_context2.sent)){_context2.next=16;break}return setImageSource(img),isLoaded.current=!0,_context2.abrupt("break",22);case 16:_context2.next=20;break;case 18:_context2.prev=18,_context2.t0=_context2.catch(8);case 20:_context2.next=6;break;case 22:_context2.next=27;break;case 24:_context2.prev=24,_context2.t1=_context2.catch(4),_iterator.e(_context2.t1);case 27:return _context2.prev=27,_iterator.f(),_context2.finish(27);case 30:setIsFetching(!1);case 31:case"end":return _context2.stop()}}),_callee2,null,[[4,24,27,30],[8,18]])}))),[src,fallback,delay,onLoad]),handleLoadImage=Object(react.useCallback)((function(){delay&&delay>0?setTimeout((function(){tryLoadImage()}),delay):tryLoadImage()}),[delay,tryLoadImage]),handleCleanup=Object(react.useCallback)((function(){ref.current&&(ref.current.onload=null,ref.current.onerror=null,ref.current=null)}),[]);return Object(react.useEffect)((function(){ref.current=new Image,handleInitialTimeout()}),[]),Object(react.useEffect)((function(){if(initialized&&!isFetching)return loadRetryAttemptsLeft.current<=0?(imageSource||setImageSource(src),void handleCleanup()):void(imageSource!==src&&setTimeout((function(){loadRetryAttemptsLeft.current-=1,handleLoadImage()}),retryDelay*(maxRetry-loadRetryAttemptsLeft.current)))}),[handleCleanup,imageSource,src,handleLoadImage,initialized,isFetching]),Object(react.useEffect)((function(){initialized||(setInitialized(!0),handleLoadImage())}),[initialized,handleLoadImage]),Object(react.useEffect)((function(){loadRetryAttemptsLeft.current=maxRetry}),[initialSrc,initialTimeout,src,delay,maxRetry,fallback]),use_unmount_useUnmount(handleCleanup),{src:imageSource,isFetching:!imageSource}};function useIsMobile_slicedToArray(arr,i){return function useIsMobile_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useIsMobile_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useIsMobile_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useIsMobile_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useIsMobile_arrayLikeToArray(o,minLen)}(arr,i)||function useIsMobile_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useIsMobile_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==arguments[1]?arguments[1]:1e3,_useState=Object(react.useState)(value),_useState2=useDebounce_slicedToArray(_useState,2),currentValue=_useState2[0],setCurrentValue=_useState2[1];return Object(react.useEffect)((function(){var handler=setTimeout((function(){setCurrentValue(value)}),delay);return function(){return clearTimeout(handler)}}),[value]),currentValue},use_interval_useInterval=function useInterval(callback,delay){var savedCallback=Object(react.useRef)(callback);Object(react.useEffect)((function(){savedCallback.current=callback}),[callback]),Object(react.useEffect)((function(){if(delay||0===delay){var id=setInterval((function(){savedCallback.current()}),delay);return function(){return clearInterval(id)}}}),[delay])};__webpack_require__("../../node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js");function useQueue_toConsumableArray(arr){return function useQueue_arrayWithoutHoles(arr){if(Array.isArray(arr))return useQueue_arrayLikeToArray(arr)}(arr)||function useQueue_iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||useQueue_unsupportedIterableToArray(arr)||function useQueue_nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useQueue_slicedToArray(arr,i){return function useQueue_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useQueue_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||useQueue_unsupportedIterableToArray(arr,i)||function useQueue_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useQueue_unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return useQueue_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?useQueue_arrayLikeToArray(o,minLen):void 0}}function useQueue_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0&&void 0!==arguments[0]?arguments[0]:[],_useState=Object(react.useState)(initial),_useState2=useQueue_slicedToArray(_useState,2),queue=_useState2[0],setQueue=_useState2[1],first=queue[0],last=queue[queue.length-1],size=queue.length;function add(item){setQueue((function(prevQueue){return[].concat(useQueue_toConsumableArray(prevQueue),[item])}))}function remove(){setQueue((function(prevQueue){return prevQueue.slice(1)}))}function clear(){setQueue([])}return{add:add,remove:remove,clear:clear,first:first,last:last,size:size,queue:queue}};function useCopyToClipboard_regeneratorRuntime(){useCopyToClipboard_regeneratorRuntime=function _regeneratorRuntime(){return exports};var exports={},Op=Object.prototype,hasOwn=Op.hasOwnProperty,$Symbol="function"==typeof Symbol?Symbol:{},iteratorSymbol=$Symbol.iterator||"@@iterator",asyncIteratorSymbol=$Symbol.asyncIterator||"@@asyncIterator",toStringTagSymbol=$Symbol.toStringTag||"@@toStringTag";function define(obj,key,value){return Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}),obj[key]}try{define({},"")}catch(err){define=function define(obj,key,value){return obj[key]=value}}function wrap(innerFn,outerFn,self,tryLocsList){var protoGenerator=outerFn&&outerFn.prototype instanceof Generator?outerFn:Generator,generator=Object.create(protoGenerator.prototype),context=new Context(tryLocsList||[]);return generator._invoke=function(innerFn,self,context){var state="suspendedStart";return function(method,arg){if("executing"===state)throw new Error("Generator is already running");if("completed"===state){if("throw"===method)throw arg;return doneResult()}for(context.method=method,context.arg=arg;;){var delegate=context.delegate;if(delegate){var delegateResult=maybeInvokeDelegate(delegate,context);if(delegateResult){if(delegateResult===ContinueSentinel)continue;return delegateResult}}if("next"===context.method)context.sent=context._sent=context.arg;else if("throw"===context.method){if("suspendedStart"===state)throw state="completed",context.arg;context.dispatchException(context.arg)}else"return"===context.method&&context.abrupt("return",context.arg);state="executing";var record=tryCatch(innerFn,self,context);if("normal"===record.type){if(state=context.done?"completed":"suspendedYield",record.arg===ContinueSentinel)continue;return{value:record.arg,done:context.done}}"throw"===record.type&&(state="completed",context.method="throw",context.arg=record.arg)}}}(innerFn,self,context),generator}function tryCatch(fn,obj,arg){try{return{type:"normal",arg:fn.call(obj,arg)}}catch(err){return{type:"throw",arg:err}}}exports.wrap=wrap;var ContinueSentinel={};function Generator(){}function GeneratorFunction(){}function GeneratorFunctionPrototype(){}var IteratorPrototype={};define(IteratorPrototype,iteratorSymbol,(function(){return this}));var getProto=Object.getPrototypeOf,NativeIteratorPrototype=getProto&&getProto(getProto(values([])));NativeIteratorPrototype&&NativeIteratorPrototype!==Op&&hasOwn.call(NativeIteratorPrototype,iteratorSymbol)&&(IteratorPrototype=NativeIteratorPrototype);var Gp=GeneratorFunctionPrototype.prototype=Generator.prototype=Object.create(IteratorPrototype);function defineIteratorMethods(prototype){["next","throw","return"].forEach((function(method){define(prototype,method,(function(arg){return this._invoke(method,arg)}))}))}function AsyncIterator(generator,PromiseImpl){function invoke(method,arg,resolve,reject){var record=tryCatch(generator[method],generator,arg);if("throw"!==record.type){var result=record.arg,value=result.value;return value&&"object"==typeof value&&hasOwn.call(value,"__await")?PromiseImpl.resolve(value.__await).then((function(value){invoke("next",value,resolve,reject)}),(function(err){invoke("throw",err,resolve,reject)})):PromiseImpl.resolve(value).then((function(unwrapped){result.value=unwrapped,resolve(result)}),(function(error){return invoke("throw",error,resolve,reject)}))}reject(record.arg)}var previousPromise;this._invoke=function(method,arg){function callInvokeWithMethodAndArg(){return new PromiseImpl((function(resolve,reject){invoke(method,arg,resolve,reject)}))}return previousPromise=previousPromise?previousPromise.then(callInvokeWithMethodAndArg,callInvokeWithMethodAndArg):callInvokeWithMethodAndArg()}}function maybeInvokeDelegate(delegate,context){var method=delegate.iterator[context.method];if(void 0===method){if(context.delegate=null,"throw"===context.method){if(delegate.iterator.return&&(context.method="return",context.arg=void 0,maybeInvokeDelegate(delegate,context),"throw"===context.method))return ContinueSentinel;context.method="throw",context.arg=new TypeError("The iterator does not provide a 'throw' method")}return ContinueSentinel}var record=tryCatch(method,delegate.iterator,context.arg);if("throw"===record.type)return context.method="throw",context.arg=record.arg,context.delegate=null,ContinueSentinel;var info=record.arg;return info?info.done?(context[delegate.resultName]=info.value,context.next=delegate.nextLoc,"return"!==context.method&&(context.method="next",context.arg=void 0),context.delegate=null,ContinueSentinel):info:(context.method="throw",context.arg=new TypeError("iterator result is not an object"),context.delegate=null,ContinueSentinel)}function pushTryEntry(locs){var entry={tryLoc:locs[0]};1 in locs&&(entry.catchLoc=locs[1]),2 in locs&&(entry.finallyLoc=locs[2],entry.afterLoc=locs[3]),this.tryEntries.push(entry)}function resetTryEntry(entry){var record=entry.completion||{};record.type="normal",delete record.arg,entry.completion=record}function Context(tryLocsList){this.tryEntries=[{tryLoc:"root"}],tryLocsList.forEach(pushTryEntry,this),this.reset(!0)}function values(iterable){if(iterable){var iteratorMethod=iterable[iteratorSymbol];if(iteratorMethod)return iteratorMethod.call(iterable);if("function"==typeof iterable.next)return iterable;if(!isNaN(iterable.length)){var i=-1,next=function next(){for(;++i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function useCopyToClipboard_asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function useCopyToClipboard_slicedToArray(arr,i){return function useCopyToClipboard_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useCopyToClipboard_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useCopyToClipboard_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useCopyToClipboard_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useCopyToClipboard_arrayLikeToArray(o,minLen)}(arr,i)||function useCopyToClipboard_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useCopyToClipboard_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==_args[1]&&_args[1],_context.prev=1,_context.next=4,navigator.clipboard.writeText(text);case 4:setClipBoardState({value:text,noUserInteraction:userInitiated,error:void 0}),_context.next=10;break;case 7:_context.prev=7,_context.t0=_context.catch(1),setClipBoardState({value:void 0,noUserInteraction:userInitiated,error:_context.t0});case 10:case"end":return _context.stop()}}),_callee,null,[[1,7]])})));return function copyToClipboard(_x){return _ref.apply(this,arguments)}}();return[clipBoardState,copyToClipboard]},use_previous_usePrevious=function usePrevious(state){var ref=Object(react.useRef)();return Object(react.useEffect)((function(){ref.current=state}),[state]),ref.current};function useHover_slicedToArray(arr,i){return function useHover_arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function useHover_iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function useHover_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return useHover_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return useHover_arrayLikeToArray(o,minLen)}(arr,i)||function useHover_nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function useHover_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Button=function Button(_ref){var _ref$primary=_ref.primary,primary=void 0!==_ref$primary&&_ref$primary,_ref$size=_ref.size,size=void 0===_ref$size?"medium":_ref$size,backgroundColor=_ref.backgroundColor,label=_ref.label,props=_objectWithoutProperties(_ref,_excluded),mode=primary?"storybook-button--primary":"storybook-button--secondary";return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)("button",Object.assign({type:"button",className:["storybook-button","storybook-button--"+size,mode].join(" "),style:{backgroundColor:backgroundColor}},props,{children:label}))};Button.displayName="Button";try{Button.displayName="Button",Button.__docgenInfo={description:"Primary UI component for user interaction",displayName:"Button",props:{primary:{defaultValue:{value:"false"},description:"Is this the principal call to action on the page?",name:"primary",required:!1,type:{name:"boolean"}},backgroundColor:{defaultValue:null,description:"What background color to use",name:"backgroundColor",required:!1,type:{name:"string"}},size:{defaultValue:{value:"medium"},description:"How large should the button be?",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'}]}},label:{defaultValue:null,description:"Button contents",name:"label",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"Optional click handler",name:"onClick",required:!1,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/stories/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Header.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn})),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/react/index.js");var _Header__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/stories/Header.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/react/jsx-runtime.js");__webpack_exports__.default={title:"Example/Header",component:_Header__WEBPACK_IMPORTED_MODULE_3__.a,parameters:{layout:"fullscreen"}};var Template=function Template(args){return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Header__WEBPACK_IMPORTED_MODULE_3__.a,Object.assign({},args))};Template.displayName="Template";var LoggedIn=Template.bind({});LoggedIn.args={user:{name:"Jane Doe"}};var LoggedOut=Template.bind({});LoggedOut.args={}},"./src/stories/Header.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Header}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/react/index.js");var _Button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/stories/Button.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__=(__webpack_require__("./src/stories/header.css"),__webpack_require__("../../node_modules/react/jsx-runtime.js")),Header=function Header(_ref){var user=_ref.user,onLogin=_ref.onLogin,onLogout=_ref.onLogout,onCreateAccount=_ref.onCreateAccount;return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("header",{children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div",{className:"wrapper",children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div",{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("h1",{children:"Acme"})]}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div",{children:user?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("span",{className:"welcome",children:["Welcome, ",Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("b",{children:user.name}),"!"]}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{size:"small",onClick:onLogout,label:"Log out"})]}):Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.Fragment,{children:[Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{size:"small",onClick:onLogin,label:"Log in"}),Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_2__.a,{primary:!0,size:"small",onClick:onCreateAccount,label:"Sign up"})]})})]})})};Header.displayName="Header";try{Header.displayName="Header",Header.__docgenInfo={description:"",displayName:"Header",props:{user:{defaultValue:null,description:"",name:"user",required:!1,type:{name:"User"}},onLogin:{defaultValue:null,description:"",name:"onLogin",required:!0,type:{name:"() => void"}},onLogout:{defaultValue:null,description:"",name:"onLogout",required:!0,type:{name:"() => void"}},onCreateAccount:{defaultValue:null,description:"",name:"onCreateAccount",required:!0,type:{name:"() => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Header.tsx#Header"]={docgenInfo:Header.__docgenInfo,name:"Header",path:"src/stories/Header.tsx#Header"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/Introduction.stories.mdx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/react/index.js");var _mdx_js_react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@mdx-js/react/dist/esm.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/esm/index.js"),_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/stories/assets/code-brackets.svg"),_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8___default=__webpack_require__.n(_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8__),_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/stories/assets/colors.svg"),_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9__),_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/stories/assets/comments.svg"),_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10__),_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/stories/assets/direction.svg"),_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11__),_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/stories/assets/flow.svg"),_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12__),_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./src/stories/assets/plugin.svg"),_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13__),_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./src/stories/assets/repo.svg"),_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14___default=__webpack_require__.n(_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14__),_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./src/stories/assets/stackalt.svg"),_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15___default=__webpack_require__.n(_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15__),_excluded=["components"];function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.b,{title:"Example/Introduction",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("style",null,"\n .subheading {\n --mediumdark: '#999999';\n font-weight: 900;\n font-size: 13px;\n color: #999;\n letter-spacing: 6px;\n line-height: 24px;\n text-transform: uppercase;\n margin-bottom: 12px;\n margin-top: 40px;\n }\n\n .link-list {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n row-gap: 10px;\n }\n\n @media (min-width: 620px) {\n .link-list {\n row-gap: 20px;\n column-gap: 20px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n @media all and (-ms-high-contrast:none) {\n .link-list {\n display: -ms-grid;\n -ms-grid-columns: 1fr 1fr;\n -ms-grid-rows: 1fr 1fr;\n }\n }\n\n .link-item {\n display: block;\n padding: 20px 30px 20px 15px;\n border: 1px solid #00000010;\n border-radius: 5px;\n transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;\n color: #333333;\n display: flex;\n align-items: flex-start;\n }\n\n .link-item:hover {\n border-color: #1EA7FD50;\n transform: translate3d(0, -3px, 0);\n box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;\n }\n\n .link-item:active {\n border-color: #1EA7FD;\n transform: translate3d(0, 0, 0);\n }\n\n .link-item strong {\n font-weight: 700;\n display: block;\n margin-bottom: 2px;\n }\n\n .link-item img {\n height: 40px;\n width: 40px;\n margin-right: 15px;\n flex: none;\n }\n\n .link-item span {\n font-size: 14px;\n line-height: 20px;\n }\n\n .tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #E7FDD8;\n color: #66BF3C;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n }\n\n .tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n }\n\n .tip-wrapper code {\n font-size: 12px;\n display: inline-block;\n }\n "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h1",null,"Welcome to Nancy.JS"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Nancy.JS is a set of tools to help you build a modern, performant, and accessible web application. It is a collection of packages that work together to provide a consistent and cohesive developer experience."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h2",null,"What's included"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Nancy.JS is a collection of packages that work together to provide a consistent and cohesive developer experience. It includes packages that contain React Hooks,\nComponents, Third-Party Integrations, and more!!!"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"What is this page?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"This page is a living document that is meant to be a reference for all things Nancy.JS. It is a work in progress and will be updated as new features are added.\nWe use Storybook to document our components and hooks. You can find the source code for this page in the main Nancy.JS repository."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"What is Storybook?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Storybook helps you build UI components in isolation from your app's business logic, data, and context.\nThat makes it easy to develop hard-to-reach states. Save these UI states as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",{parentName:"p"},"stories")," to revisit during development, testing, or QA."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Browse example stories now by navigating to them in the sidebar.\nView their code in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"stories")," directory to learn how they work.\nWe recommend building UIs with a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://componentdriven.org"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",{parentName:"a"},"component-driven"))," process starting with atomic components and ending with pages."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"subheading"},"Configure"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/addons/addon-types",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_plugin_svg__WEBPACK_IMPORTED_MODULE_13___default.a,alt:"plugin"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Presets for popular tools"),"Easy setup for TypeScript, SCSS and more.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/webpack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_stackalt_svg__WEBPACK_IMPORTED_MODULE_15___default.a,alt:"Build"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Build configuration"),"How to customize webpack and Babel")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/styling-and-css",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_colors_svg__WEBPACK_IMPORTED_MODULE_9___default.a,alt:"colors"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Styling"),"How to load and configure CSS libraries")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_flow_svg__WEBPACK_IMPORTED_MODULE_12___default.a,alt:"flow"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Data"),"Providers and mocking for data libraries"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"subheading"},"Learn"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"link-list"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/docs",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_repo_svg__WEBPACK_IMPORTED_MODULE_14___default.a,alt:"repo"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Storybook documentation"),"Configure, customize, and extend")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://storybook.js.org/tutorials/",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_direction_svg__WEBPACK_IMPORTED_MODULE_11___default.a,alt:"direction"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"In-depth guides"),"Best practices from leading teams")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://github.com/storybookjs/storybook",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_code_brackets_svg__WEBPACK_IMPORTED_MODULE_8___default.a,alt:"code"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"GitHub project"),"View the source and add issues")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{className:"link-item",href:"https://discord.gg/storybook",target:"_blank"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("img",{src:_assets_comments_svg__WEBPACK_IMPORTED_MODULE_10___default.a,alt:"comments"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("strong",null,"Discord chat"),"Chat with maintainers and the community"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{className:"tip-wrapper"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("span",{className:"tip"},"Tip"),"Edit the Markdown in"," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",null,"stories/Introduction.stories.mdx")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Example/Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/stories/Page.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoggedOut",(function(){return LoggedOut})),__webpack_require__.d(__webpack_exports__,"LoggedIn",(function(){return LoggedIn}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.async-iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.math.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.json.to-string-tag.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.create.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.reverse.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");var react=__webpack_require__("../../node_modules/react/index.js"),react_default=__webpack_require__.n(react),esm=__webpack_require__("./node_modules/@storybook/testing-library/dist/esm/index.js"),Header=(__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./src/stories/Header.tsx")),jsx_runtime=(__webpack_require__("./src/stories/page.css"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0;--i){var entry=this.tryEntries[i],record=entry.completion;if("root"===entry.tryLoc)return handle("end");if(entry.tryLoc<=this.prev){var hasCatch=hasOwn.call(entry,"catchLoc"),hasFinally=hasOwn.call(entry,"finallyLoc");if(hasCatch&&hasFinally){if(this.prev=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc<=this.prev&&hasOwn.call(entry,"finallyLoc")&&this.prev=0;--i){var entry=this.tryEntries[i];if(entry.finallyLoc===finallyLoc)return this.complete(entry.completion,entry.afterLoc),resetTryEntry(entry),ContinueSentinel}},catch:function _catch(tryLoc){for(var i=this.tryEntries.length-1;i>=0;--i){var entry=this.tryEntries[i];if(entry.tryLoc===tryLoc){var record=entry.completion;if("throw"===record.type){var thrown=record.arg;resetTryEntry(entry)}return thrown}}throw new Error("illegal catch attempt")},delegateYield:function delegateYield(iterable,resultName,nextLoc){return this.delegate={iterator:values(iterable),resultName:resultName,nextLoc:nextLoc},"next"===this.method&&(this.arg=void 0),ContinueSentinel}},exports}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){return void reject(error)}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}Page_Page.displayName="Page";__webpack_exports__.default={title:"Example/Page",component:Page_Page,parameters:{layout:"fullscreen"}};var Page_stories_Template=function Template(args){return Object(jsx_runtime.jsx)(Page_Page,Object.assign({},args))};Page_stories_Template.displayName="Template";var LoggedOut=Page_stories_Template.bind({}),LoggedIn=Page_stories_Template.bind({});LoggedIn.play=function(){var _ref2=function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise((function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)}))}}(_regeneratorRuntime().mark((function _callee(_ref){var canvasElement,canvas,loginButton;return _regeneratorRuntime().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return canvasElement=_ref.canvasElement,canvas=Object(esm.b)(canvasElement),_context.next=4,canvas.getByRole("button",{name:/Log in/i});case 4:return loginButton=_context.sent,_context.next=7,esm.a.click(loginButton);case 7:case"end":return _context.stop()}}),_callee)})));return function(_x){return _ref2.apply(this,arguments)}}()},"./src/stories/assets/code-brackets.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/code-brackets.2e1112d7.svg"},"./src/stories/assets/colors.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/colors.a4bd0486.svg"},"./src/stories/assets/comments.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/comments.a3859089.svg"},"./src/stories/assets/direction.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/direction.b770f9af.svg"},"./src/stories/assets/flow.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/flow.edad2ac1.svg"},"./src/stories/assets/plugin.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/plugin.d494b228.svg"},"./src/stories/assets/repo.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/repo.6d496322.svg"},"./src/stories/assets/stackalt.svg":function(module,exports,__webpack_require__){module.exports=__webpack_require__.p+"static/media/stackalt.dba9fbb3.svg"},"./src/stories/button.css":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/button.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./src/stories/header.css":function(module,exports,__webpack_require__){var api=__webpack_require__("../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),content=__webpack_require__("../../node_modules/css-loader/dist/cjs.js?!../../node_modules/postcss-loader/dist/cjs.js?!./src/stories/header.css");"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},"./src/stories/hooks/useAllDepsChangeEffect.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js");var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/react/index.js"),_nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../packages/react-hooks/index.ts"),_utils__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./src/utils/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||_unsupportedIterableToArray(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||_unsupportedIterableToArray(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [count, setCount] = useState(0);\n\n useInterval(() => {\n setCount(count + 1);\n }, 1000);\n\n return
{count}
;\n}"}},Example.parameters)},"./src/stories/hooks/useIsMobile.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/react/index.js");var _nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../packages/react-hooks/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js"),Example=function Example(){var isMobile=Object(_nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_1__.i)();return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{children:isMobile?Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{children:"Is mobile"}):Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{children:"Is desktop"})})};Example.displayName="Example",__webpack_exports__.default={title:"React Hooks/useIsMobile",component:Example};try{Example.displayName="Example",Example.__docgenInfo={description:"",displayName:"Example",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/hooks/useIsMobile.stories.tsx#Example"]={docgenInfo:Example.__docgenInfo,name:"Example",path:"src/stories/hooks/useIsMobile.stories.tsx#Example"})}catch(__react_docgen_typescript_loader_error){}},"./src/stories/hooks/useLocalStorage.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Example",(function(){return Example}));__webpack_require__("../../node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/react/index.js");var _nanlabs_react_hooks__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../packages/react-hooks/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null==_i)return;var _s,_e,_arr=[],_n=!0,_d=!1;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,_excluded);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.b,{title:"React Thirdparty/ReCaptcha V3",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h1",{align:"center"},"React Google ReCaptcha V3"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("div",{align:"center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"Integrating Google ReCaptcha V3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h2",null,"Usage"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"Provide ReCaptcha Key"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"To use this integration, you need to create a recaptcha key for your domain, you can get one from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://www.google.com/recaptcha/intro/v3.html"},"here"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"Components"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h4",null,"GoogleReCaptchaProvider"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"This submobule provides a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptchaProvider")," provider component that should be used to wrap around your components."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptchaProvider"),"'s responsibility is to load the necessary reCaptcha script and provide access to reCaptcha to the rest of your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"You can customize the injected ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"script")," tag with the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"scriptProps")," prop. This prop allows you to add ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"async"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"defer"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"nonce")," attributes to the script tag. You can also control whether the injected script will be added to the document body or head with ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"appendTo")," attribute. Example can be found belows. The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"scriptProps")," and its attributes are all optional."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"It also provides an optional prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"language")," to support different languages that is supported by Google ReCaptcha."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://developers.google.com/recaptcha/docs/language"},"https://developers.google.com/recaptcha/docs/language")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"The provider also provide the prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useReCaptchaNet")," to load script from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"recaptcha.net"),":\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("a",{parentName:"p",href:"https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally"},"https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'import { GoogleReCaptchaProvider } from \'@nanlabs/react-thirdparty\'\n\nReactDom.render(\n \n \n ,\n document.getElementById(\'app\')\n)\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"There are three ways to trigger the recaptcha validation: using the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptcha")," component or using the custom hook ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useGoogleReCaptcha"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"GoogleReCaptcha"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"GoogleReCaptcha")," is a react component that can be used in your app to trigger the validation. It provides a prop ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"onVerify"),", which will be called once the verify is done successfully."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'import {\n GoogleReCaptchaProvider,\n GoogleReCaptcha,\n} from "@nanlabs/react-thirdparty";\n\nReactDom.render(\n \n \n ,\n document.getElementById("app")\n);\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},'// IMPORTANT NOTES: The `GoogleReCaptcha` component is a wrapper around `useGoogleReCaptcha` hook and use `useEffect` to run the verification.\n// It\'s important that you understand how React hooks work to use it properly.\n// Avoid using inline function for the `onVerify` props as it can possibly cause the verify function to run continously.\n// To avoid that problem, you can use a memoized function provided by `React.useCallback` or a class method\n// The code below is an example that inline function can result in an infinite loop and the verify function runs continously:\n\nconst MyComponent: FC = () => {\n const [token, setToken] = useState();\n\n return (\n
\n {\n setToken(token);\n }}\n />\n
\n );\n};\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("h3",null,"React Hook: useGoogleReCaptcha"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"If you prefer a React Hook approach over the old good Component, you can choose to use the custom hook ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("inlineCode",{parentName:"p"},"useGoogleReCaptcha"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("p",null,"It's very simple to use the hook:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)("code",{parentName:"pre",className:"language-jsx"},"import {\n GoogleReCaptchaProvider,\n useGoogleReCaptcha\n} from '@nanlabs/react-thirdparty'\n\nconst YourReCaptchaComponent = () => {\n // you should use `useCallback` just when needed\n const handleVerify = useCallback((token) => {\n console.log(`Yay! token: ${token}`)\n }, [])\n\n useGoogleReCaptcha({\n action: \"login_page\",\n onVerify: handleVerify,\n })\n\n return (...)\n}\n\nReactDom.render(\n \n \n ,\n document.getElementById('app')\n)\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"React Thirdparty/ReCaptcha V3",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_7__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentAnnotations:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},"./src/stories/react-ui-components/Image.stories.tsx":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Default",(function(){return Default}));__webpack_require__("../../node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.split.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.exec.js");var react_hooks=__webpack_require__("../../packages/react-hooks/index.ts"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js"),_excluded=["initialSrc","initialTimeout","src","fallback","delay","maxRetry","retryDelay","decoding","loading","className","onLoad","style","width","height"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var classNames=function classNames(className,loading){return className.split(/\s/).map((function(name){return loading?name+" "+name+"-loading":name})).join(" ")},Image_Image=function Image(_ref){var initialSrc=_ref.initialSrc,initialTimeout=_ref.initialTimeout,src=_ref.src,fallback=_ref.fallback,delay=_ref.delay,maxRetry=_ref.maxRetry,retryDelay=_ref.retryDelay,_ref$decoding=_ref.decoding,decoding=void 0===_ref$decoding?"async":_ref$decoding,_ref$loading=_ref.loading,loading=void 0===_ref$loading?"lazy":_ref$loading,_ref$className=_ref.className,className=void 0===_ref$className?"async-image":_ref$className,onLoad=_ref.onLoad,style=_ref.style,width=_ref.width,height=_ref.height,rest=_objectWithoutProperties(_ref,_excluded),_useImage=Object(react_hooks.f)({initialTimeout:initialTimeout,initialSrc:initialSrc,src:src,fallback:fallback,delay:delay,maxRetry:maxRetry,retryDelay:retryDelay,onLoad:onLoad}),targetSrc=_useImage.src,isFetching=_useImage.isFetching;return Object(jsx_runtime.jsx)("img",Object.assign({},rest,{src:targetSrc,width:width,height:height,style:style,decoding:"auto"===decoding?void 0:decoding,loading:"auto"===loading?void 0:loading,className:classNames(className,isFetching)}))};Image_Image.displayName="Image";var image_Image=Image_Image;try{Image_Image.displayName="Image",Image_Image.__docgenInfo={description:"",displayName:"Image",props:{decoding:{defaultValue:{value:"async"},description:"",name:"decoding",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"sync"'},{value:'"async"'}]}},loading:{defaultValue:{value:"lazy"},description:"",name:"loading",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"eager"'},{value:'"lazy"'}]}},className:{defaultValue:{value:"async-image"},description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},initialSrc:{defaultValue:null,description:"",name:"initialSrc",required:!1,type:{name:"string"}},fallback:{defaultValue:null,description:"",name:"fallback",required:!1,type:{name:"string | string[]"}},initialTimeout:{defaultValue:null,description:"",name:"initialTimeout",required:!1,type:{name:"number"}},delay:{defaultValue:null,description:"",name:"delay",required:!1,type:{name:"number"}},maxRetry:{defaultValue:null,description:"",name:"maxRetry",required:!1,type:{name:"number"}},retryDelay:{defaultValue:null,description:"",name:"retryDelay",required:!1,type:{name:"number"}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"React.ReactEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/image/Image.tsx#Image"]={docgenInfo:Image_Image.__docgenInfo,name:"Image",path:"../../packages/react-ui/image/Image.tsx#Image"})}catch(__react_docgen_typescript_loader_error){}var _templateObject;__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js");var Skeleton_Skeleton=__webpack_require__("../../node_modules/styled-components/dist/styled-components.browser.esm.js").a.div(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n position: relative;\n overflow: hidden;\n background-color: ",";\n &::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 0,\n rgba(255, 255, 255, 0.3) 40%,\n rgba(255, 255, 255, 0.3) 60%,\n rgba(255, 255, 255, 0)\n );\n animation: ",';\n content: "";\n }\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n > * {\n visibility: ',";\n }\n"])),(function(_ref){return _ref.loading?"#dddbdd":"transparent"}),(function(_ref2){return _ref2.loading?"shimmer 2s infinite":"none"}),(function(_ref3){return _ref3.loading?"hidden":"visible"}));try{Skeleton_Skeleton.displayName="Skeleton",Skeleton_Skeleton.__docgenInfo={description:"",displayName:"Skeleton",props:{loading:{defaultValue:null,description:"",name:"loading",required:!1,type:{name:"boolean"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/skeleton/Skeleton.tsx#Skeleton"]={docgenInfo:Skeleton_Skeleton.__docgenInfo,name:"Skeleton",path:"../../packages/react-ui/skeleton/Skeleton.tsx#Skeleton"})}catch(__react_docgen_typescript_loader_error){}try{Image.displayName="Image",Image.__docgenInfo={description:"",displayName:"Image",props:{decoding:{defaultValue:{value:"async"},description:"",name:"decoding",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"sync"'},{value:'"async"'}]}},loading:{defaultValue:{value:"lazy"},description:"",name:"loading",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"eager"'},{value:'"lazy"'}]}},className:{defaultValue:{value:"async-image"},description:"",name:"className",required:!1,type:{name:"string"}},src:{defaultValue:null,description:"",name:"src",required:!1,type:{name:"string"}},initialSrc:{defaultValue:null,description:"",name:"initialSrc",required:!1,type:{name:"string"}},fallback:{defaultValue:null,description:"",name:"fallback",required:!1,type:{name:"string | string[]"}},initialTimeout:{defaultValue:null,description:"",name:"initialTimeout",required:!1,type:{name:"number"}},delay:{defaultValue:null,description:"",name:"delay",required:!1,type:{name:"number"}},maxRetry:{defaultValue:null,description:"",name:"maxRetry",required:!1,type:{name:"number"}},retryDelay:{defaultValue:null,description:"",name:"retryDelay",required:!1,type:{name:"number"}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"React.ReactEventHandler"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/index.tsx#Image"]={docgenInfo:Image.__docgenInfo,name:"Image",path:"../../packages/react-ui/index.tsx#Image"})}catch(__react_docgen_typescript_loader_error){}try{Skeleton.displayName="Skeleton",Skeleton.__docgenInfo={description:"",displayName:"Skeleton",props:{loading:{defaultValue:null,description:"",name:"loading",required:!1,type:{name:"boolean"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/react-ui/index.tsx#Skeleton"]={docgenInfo:Skeleton.__docgenInfo,name:"Skeleton",path:"../../packages/react-ui/index.tsx#Skeleton"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.default={title:"React Components/Image",component:image_Image,parameters:{initialSrc:"https://picsum.photos/300",src:"https://files.worldwildlife.org/wwfcmsprod/images/Panda_in_Tree/hero_small/99i33zyc0l_Large_WW170579.jpg",fallback:["https://picsum.photos/300","https://picsum.photos/200"],delay:1e3,maxRetry:3,retryDelay:1e3,decoding:"async",loading:"lazy",className:"async-image",onLoad:function onLoad(){return console.log("onLoad")},style:{width:"300px",objectFit:"cover"},initialTimeout:1e3}};var Image_stories_Template=function Template(args){return Object(jsx_runtime.jsx)(image_Image,Object.assign({},args))};Image_stories_Template.displayName="Template";var Default=Image_stories_Template.bind({});Default.args={src:"https://files.worldwildlife.org/wwfcmsprod/images/Panda_in_Tree/hero_small/99i33zyc0l_Large_WW170579.jpg",fallback:["https://picsum.photos/300","https://picsum.photos/200"],maxRetry:3,retryDelay:1e3,decoding:"async",loading:"lazy",className:"async-image",onLoad:function onLoad(){return console.log("onLoad")},style:{width:"300px",objectFit:"cover"},initialTimeout:1e3}},"./src/utils/index.ts":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return randomString}));__webpack_require__("../../node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.date.to-string.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("../../node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.from.js"),__webpack_require__("../../node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("../../node_modules/core-js/modules/es.function.name.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i0&&void 0!==arguments[0]?arguments[0]:5;return _toConsumableArray(Array(size)).map((function(){return Math.random().toString(36)[2]})).join("")}},"./storybook-init-framework-entry.js":function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/index.js")},0:function(module,exports,__webpack_require__){__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_require__("../../node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_require__("./storybook-init-framework-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_require__("../../node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_require__("./.storybook/preview.js-generated-config-entry.js"),module.exports=__webpack_require__("./generated-stories-entry.js")},1:function(module,exports){}},[[0,4,5]]]); +//# sourceMappingURL=main.5c65e568.iframe.bundle.js.map \ No newline at end of file diff --git a/main.02363262.iframe.bundle.js.LICENSE.txt b/main.5c65e568.iframe.bundle.js.LICENSE.txt similarity index 100% rename from main.02363262.iframe.bundle.js.LICENSE.txt rename to main.5c65e568.iframe.bundle.js.LICENSE.txt diff --git a/main.5c65e568.iframe.bundle.js.map b/main.5c65e568.iframe.bundle.js.map new file mode 100644 index 0000000..eef67f3 --- /dev/null +++ b/main.5c65e568.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"main.5c65e568.iframe.bundle.js","sources":[],"mappings":";A","sourceRoot":""} \ No newline at end of file diff --git a/project.json b/project.json index cbc3a05..b0dd734 100644 --- a/project.json +++ b/project.json @@ -1 +1 @@ -{"generatedAt":1705429082170,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"monorepo":"Turborepo","packageManager":{"type":"npm","version":"8.15.0"},"storybookVersion":"6.5.12","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.12"},"@storybook/builder-webpack4":{"version":"6.5.12"},"@storybook/manager-webpack4":{"version":"6.5.12"},"@storybook/react":{"version":"6.5.12"},"@storybook/testing-library":{"version":null}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":null},"@storybook/addon-essentials":{"version":"6.5.12"},"@storybook/addon-interactions":{"version":null}}} +{"generatedAt":1705429226130,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"monorepo":"Turborepo","packageManager":{"type":"npm","version":"8.15.0"},"storybookVersion":"6.5.12","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.12"},"@storybook/builder-webpack4":{"version":"6.5.12"},"@storybook/manager-webpack4":{"version":"6.5.12"},"@storybook/react":{"version":"6.5.12"},"@storybook/testing-library":{"version":null}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":null},"@storybook/addon-essentials":{"version":"6.5.12"},"@storybook/addon-interactions":{"version":null}}}