Repository navigation
Expand file tree
/
Copy pathmain.2fb97c96f8ad2d4a2309.bundle.js
More file actions
2 lines (2 loc) · 144 KB
/
Copy pathmain.2fb97c96f8ad2d4a2309.bundle.js
File metadata and controls
2 lines (2 loc) · 144 KB
1
2
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,function(module,exports){module.exports=storybook_docs_dll},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ERkP")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("1t7P")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("IAdD")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("+KXO")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ho0z")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("vrRf")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("jQ/y")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("7x/C")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("M+/F")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("plBw")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("DZ+c")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("87if")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("z84I")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("lTEL")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("kYxP")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("cARO")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("2G9S")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("aLgo")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("KqXw")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("hCOa")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("NyMY")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("UvmB")},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("jwue")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("EgRP")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("+oxZ")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("aokA")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("yH/f")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("LW0h")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("lN5B")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("7xRU")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("MvUL")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("A3UQ")},,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Ysgh")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("jQ3i")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("KOtZ")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("1Iuc")},function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(519);"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||{}},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("P2aG")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("x4t0")},,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ZVkB")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("y2Ah")},,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(19),__webpack_require__(11),__webpack_require__(14);__webpack_exports__.a=function omitInJsxView(v,desc){return v.toString=function(){return desc},v}},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("WNMA")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("1IsZ")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("vbDw")},,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Yct5")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("hBpG")},,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("tVqn")},,,,,,,,,function(module,exports,__webpack_require__){"use strict";function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))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){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_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);i<len;i++)arr2[i]=arr[i];return arr2}function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function e(e){return e&&"object"==_typeof(e)&&"default"in e?e:{default:e}}__webpack_require__(3),__webpack_require__(10),__webpack_require__(21),__webpack_require__(20),__webpack_require__(23),__webpack_require__(13),__webpack_require__(17),__webpack_require__(38),__webpack_require__(12),__webpack_require__(19),__webpack_require__(6),__webpack_require__(11),__webpack_require__(14),__webpack_require__(15),__webpack_require__(18);var r=__webpack_require__(522),t=__webpack_require__(532),o=__webpack_require__(2),s=__webpack_require__(214),n=__webpack_require__(169),i=__webpack_require__(554),a=__webpack_require__(565),c=__webpack_require__(595),u=__webpack_require__(602),l=__webpack_require__(612),f=e(r),m=e(t),d=e(o),b=e(s),p=e(n),g=e(i),j=e(a),h=e(c),w=e(u),v=e(l),y=function y(e){return"undefined"!==e},_ref2=_slicedToArray(function(){var e=new j.default,r=function r(e,_r){e.size>99&&e.delete(g.default(e).call(e).next().value),e.add(_r)},t=function t(r){return e.delete(r)},o=function o(r){return e.has(r)};if(y("undefined"==typeof sessionStorage?"undefined":_typeof(sessionStorage))){var _s2=sessionStorage;return[function(e){t(e);try{_s2.setItem(e,"1")}catch(e){}},function(t){_s2.removeItem(t),r(e,t)},function(e){return"1"===_s2.getItem(e)},o]}var s=new j.default;return[function(e){t(e),r(s,e)},function(t){s.delete(t),r(e,t)},function(e){return s.has(e)},o]}(),4),q=_ref2[0],k=_ref2[1],N=_ref2[2],S=_ref2[3],E=function E(){},I=y("undefined"==typeof IntersectionObserver?"undefined":_typeof(IntersectionObserver)),M=function(){if(I){var _e2=new w.default,_r2=new IntersectionObserver((function(r){return h.default(r).call(r,(function(r){return _e2.get(r.target)(r)}))}),{rootMargin:"25% 0% 60%"});return function(t,o){return t&&!_e2.has(t)?(_e2.set(t,o),_r2.observe(t),function(){return _e2.delete(t)&&_r2.unobserve(t)}):E}}return function(){return E}}(),P=function P(){for(var _len=arguments.length,e=new Array(_len),_key=0;_key<_len;_key++)e[_key]=arguments[_key];return v.default(e).call(e,(function(e){return e})).join(" ")},x=d.default.createElement,B=y("undefined"==typeof window?"undefined":_typeof(window)),C=["Not autoloaded in slow network","Browser is offline","Fail to load"],O=o.forwardRef((function L(e,r){var t=e.className,s=e.style,_e$data=e.data,n=_e$data.sources,i=_e$data.src,a=_e$data.srcSet,c=_e$data.width,u=_e$data.height,l=_e$data.aspectRatio,d=_e$data.color,g=_e$data.placeholder,_e$messages=e.messages,j=void 0===_e$messages?C:_e$messages,h=e.imgProps,w=e.onLoad,v=e.onError,_e$_s=e._s,L=void 0===_e$_s?null:_e$_s,O=m.default(e,["className","style","data","messages","imgProps","onLoad","onError","_s"]),_ref3=function(e,r){var _o$useState2=_slicedToArray(o.useState((function(){if(N(r))return 6;if(S(r))return 2;if(y("undefined"==typeof navigator?"undefined":_typeof(navigator))){var _e3=navigator,_r3=_e3.connection;if(y(_typeof(_r3))){var _e4=_r3.effectiveType;if(y(_typeof(_e4))&&p.default(_e4).call(_e4,"2g")>-1)return 0}var _t=_e3.onLine;if(y(_typeof(_t))&&!_t)return 1}return 4})),2),t=_o$useState2[0];return[null===e?t:e,_o$useState2[1]]}(L,i),_ref4=_slicedToArray(_ref3,2),_=_ref4[0],z=_ref4[1],A=function(e){var r=o.useRef(null);return o.useImperativeHandle(e,(function(){return r.current}),[r]),r}(r),F=function(e,r,t){var s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:E,n=arguments.length>4&&void 0!==arguments[4]?arguments[4]:E;return o.useCallback((function(){var o=new Image;o.onload=function(){q(r),e((function(){return 5})),s()},o.onerror=function(t){k(r),e((function(){return 2})),n(t)},t&&(o.srcset=t),o.src=r}),[])}(z,i,a,w,v);!function(e,r,t,s){o.useEffect((function(){return I?M(e.current,(function(e){e.intersectionRatio>0?N(t)?r((function(){return 6})):S(t)?r((function(){return 2})):(r((function(){return 4})),s()):r((function(){return 3}))})):s()}),[e])}(A,z,i,F);var R={width:c,height:u};return x(O.href?"a":"div",b.default({ref:A,className:P("ay7t7kp",t),style:b.default({color:d,"--r":l?1/l:u/c},s)},O),!B||_>4?n&&n.length?x.apply(void 0,["picture",{}].concat(_toConsumableArray(f.default(n).call(n,(function(e){return x("source",e)}))),[x("img",b.default({src:i,srcSet:a},R,h))])):x("img",b.default({src:i,srcSet:a},R,h)):null,B&&g&&(3!==_||!N(i))&&6!==_&&x("div",b.default({onAnimationEnd:function onAnimationEnd(){return z((function(){return 6}))}},5===_&&{className:"a1tw3k4n"}),x("img",b.default({src:g,alt:"",loading:"lazy"},R))),B&&(_<3||3===_&&S(i))&&x("button",{onClick:function onClick(){N(i)||F(),z((function(){return 4}))}},x("svg",{viewBox:"0 0 100 100"},x("path",{d:"M79.4 56a30 30 0 1 1-1.7-17.5m2-19v20h-20"})),x("h6",{},j[Math.min(_,2)]),x("p",{},"Click to reload")))}));module.exports=O,O.__docgenInfo={description:"",methods:[],displayName:"O"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../react/lib/index.js"]={name:"O",docgenInfo:O.__docgenInfo,path:"../react/lib/index.js"})},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("5o43")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("JtPf")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("DfhM")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("5878")},,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("fRV1")},,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(20),__webpack_require__(38),__webpack_require__(16);var BASE_URL="https://images.unsplash.com/photo-",COMMON_PARAMS="?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&fit=crop&q=30",toSrc=function toSrc(photoId){var format=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"jpg";return BASE_URL+photoId+COMMON_PARAMS+"&fm="+format},toSrcSet=function toSrcSet(photoId){var format=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"jpg";return[480,640,840].map((function(w){return BASE_URL+photoId+COMMON_PARAMS+"&w=".concat(w,"&fm=").concat(format," ").concat(w,"w")})).join(", ")},images=[{src:toSrc("1594653804388-0ad4242b28c2")+"&w=540",srcSet:toSrcSet("1594653804388-0ad4242b28c2"),sources:[{type:"image/webp",src:toSrc("1594653804388-0ad4242b28c2","webp"),srcSet:toSrcSet("1594653804388-0ad4242b28c2","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAeEAABBAMBAQEAAAAAAAAAAAAGAQIFBwAIEQQVIv/EABUBAQEAAAAAAAAAAAAAAAAAAAYH/8QAIBEBAAECBwEBAAAAAAAAAAAAAQIEEQADBSEiMUFRsf/aAAwDAQACEQMRAD8AlJT0lrBtdqyBg/pqGBFbtrCmowIGbLD/AGp9N8vAzykKhVswTetJBl41+kLEVTcH6nFcnMYxjes1Gqc+XMLEei3g/fv5ib0+nUplnBbyldZMlvKPa3Xt3VX1XfH/2Q==",width:540,height:540,color:"#162836"},{src:toSrc("1593889392960-817de7c25771"),srcSet:toSrcSet("1593889392960-817de7c25771"),sources:[{type:"image/webp",src:toSrc("1593889392960-817de7c25771","webp"),srcSet:toSrcSet("1593889392960-817de7c25771","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAMAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAr/xAAmEAABAgQEBwEAAAAAAAAAAAAFBgcAAQIDBAgWIQkkJjFCRlaR/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAT/xAAaEQACAgMAAAAAAAAAAAAAAAAAAQIVUpHR/9oADAMBAAIRAxEAPwCppmc7zXvxaJEEOl3a0TheSCrxYNiaQyXWG3oeo+qlGmp/WaM7zhEhTacQvMopXYUAE+ox5UamG9EzEWsZQcuTsbeVUj9Mq/ymECCwnitLp//Z",width:540,height:809,color:"#818986"},{src:toSrc("1594418569593-bdfdcf47a2cf"),srcSet:toSrcSet("1594418569593-bdfdcf47a2cf"),sources:[{type:"image/webp",src:toSrc("1594418569593-bdfdcf47a2cf","webp"),srcSet:toSrcSet("1594418569593-bdfdcf47a2cf","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAANAAgDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAcJ/8QAJBAAAQMDBAEFAAAAAAAAAAAABAEDBQACBgcIERUxEiE2UcH/xAAVAQEBAAAAAAAAAAAAAAAAAAAHCP/EACMRAAEDAwIHAAAAAAAAAAAAAAECAxEEBRIAMQYTFCFBscH/2gAMAwEAAhEDEQA/AMzsv1+j9PtjWJY/K9qNkhRqn9OZ8X6lJxYDvPvwnsn5So7l7gGSbNSgCQFV3SR4OMDkDC3JA2TNky8hk35dl12xtIUm1/hLWhEftVE59aeKVG3Btjpelu3OStTgvldKkuBKYxYgAFtZMCTJUN4jclJcoqptWOaYjt5+j1r/2Q==",width:540,height:868,color:"#3e3708"},{src:toSrc("1593959072487-3c17618454aa"),srcSet:toSrcSet("1593959072487-3c17618454aa"),sources:[{type:"image/webp",src:toSrc("1593959072487-3c17618454aa","webp"),srcSet:toSrcSet("1593959072487-3c17618454aa","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAFAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAhEAABAwQCAwEAAAAAAAAAAAABAwQFAAIGBxUhCCIjJf/EABQBAQAAAAAAAAAAAAAAAAAAAAj/xAAgEQABAwIHAAAAAAAAAAAAAAABAAIDEqEiMTJRgbHB/9oADAMBAAIRAxEAPwCrYl5g7zYa8xhcL67DaZiZZ1xrPBlo9kzj+ElwYhJNLI7zc2/NR+hNt3Z9OgSpSjXFoHHQTokmlrON2TbgE393X//Z",width:540,height:367,color:"#86645c"},{src:toSrc("1531279550271-23c2a77a765c"),srcSet:toSrcSet("1531279550271-23c2a77a765c"),sources:[{type:"image/webp",src:toSrc("1531279550271-23c2a77a765c","webp"),srcSet:toSrcSet("1531279550271-23c2a77a765c","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAKAAgDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAgK/8QAJRAAAAQFAgcAAAAAAAAAAAAAAQQFBgADBxETAhQIEiElM4KR/8QAFQEBAQAAAAAAAAAAAAAAAAAABQb/xAAiEQABAgQHAQAAAAAAAAAAAAABAgUABAYxFkFRU2JxweH/2gAMAwEAAhEDEQA/AMzlT+F500sNmhcZhrmVxLWtidKI60iqiYKSI3FcQhv1bdxsI/YRUlUiZQu3X3typaRnZY5sMiVKzd8b/l5NOnJ73hFmu469MG0g406lhkhhlRITcvU3xOxr9zj/2Q==",width:540,height:675,color:"#081e26"},{src:toSrc("1594725224909-0e66d59ed0f1"),srcSet:toSrcSet("1594725224909-0e66d59ed0f1"),sources:[{type:"image/webp",src:toSrc("1594725224909-0e66d59ed0f1","webp"),srcSet:toSrcSet("1594725224909-0e66d59ed0f1","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAMAAgDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAgJ/8QAJxAAAAMGBAcAAAAAAAAAAAAABAUGAAEDBwgUAhUhMREWIyZBdbH/xAAUAQEAAAAAAAAAAAAAAAAAAAAG/8QAJREAAAIHCQAAAAAAAAAAAAAAAWEAAgMGQWKhBRESISUmUXGS/9oADAMBAAIRAxEAPwCQkrXhK9SIhfrADRuqA2Q63gJT5mgi/wB6fcsduP0+sbDtN1IzvJ4EeEXzIVcAIacXDwDjoyshO7+pButdvGJzGfA3ejLX2sIDJKdOriKlkudhDbzL0HKhnQDT/9k=",width:540,height:810,color:"#202835"},{src:toSrc("1594559414091-2a75d7c73a68"),srcSet:toSrcSet("1594559414091-2a75d7c73a68"),sources:[{type:"image/webp",src:toSrc("1594559414091-2a75d7c73a68","webp"),srcSet:toSrcSet("1594559414091-2a75d7c73a68","webp")}],placeholder:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAMAAgDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAcK/8QAJRAAAQIFBAEFAAAAAAAAAAAAAQUGAgQHESEAAwgTCRUiJTFB/8QAFQEBAQAAAAAAAAAAAAAAAAAABwj/xAAlEQABAgQEBwAAAAAAAAAAAAABAhEDBjFBAAQFUQcIEhMhIiT/2gAMAwEAAhEDEQA/ALVWLxTchaotuWfVLmCFiGUcpkomjKFFhcqajiwQV0oh9oPwQwTnP2AbNaVeDFRF900nUFhV20wz3pzT3uyXkRswmMgjMPZHcC9wCTmx/BppzTxumjKAQUaNLnSgsPniu3ofJYPQ2FWa+JnXy4SbniMyrWZjBWzjvwhQps5F96Pvj//Z",width:540,height:822,color:"#4980a7"}];__webpack_exports__.a=images},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("3yYM")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("aYSr")},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("LqLs")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("3voH")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("LJOr")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("pu3o")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("6U7i")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ax0f")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Cm4o")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("j4Sf")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("LUwd")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("OZaJ")},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("+kY7")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Kkar")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("m9LP")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("7nmT")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("l1C2")},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("sVFb")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("iKE+")},,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("CUMQ")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("mlET")},,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("f9bD")},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("b2e3")},,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("maj8")},,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("aWzz")},,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("N4z3")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("GFpt")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("1Mu/")},function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(521);"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||{}},,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){__webpack_require__(261),__webpack_require__(286),__webpack_require__(287),__webpack_require__(332),__webpack_require__(456),__webpack_require__(490),__webpack_require__(492),__webpack_require__(504),__webpack_require__(506),module.exports=__webpack_require__(516)},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ARua")},,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("gqY9")},,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("9JhN")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("PjZX")},,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(121)},,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("/Qos")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("JY+C")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ZUdG")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("tQbP")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("//nZ")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("wFLD")},,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("dSaG")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("hQin")},,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("LJ7e")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("I2fK")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("DY47")},,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("3kp9")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("/bc2")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("/JuR")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("+Bxv")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("muFx")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Wci6")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("WoRU")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("o3fS")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("JmTi")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("xaiR")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("SlD/")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Monn")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("fmNP")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("uFXj")},,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("V0IW")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("OCSl")},,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("jLkM")},,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("kA4r")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Blm6")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ssvU")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("lZm3")},,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("Ee2X")},,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("5BYb")},,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("F63i")},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("kvVz")},,,,,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("2q8g")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("nDih")},,,,,,,,,,,,,,,,,,,,,function(module,exports,__webpack_require__){"use strict";__webpack_require__(3),__webpack_require__(36),__webpack_require__(31),__webpack_require__(32),__webpack_require__(28),__webpack_require__(507),__webpack_require__(509),__webpack_require__(5),__webpack_require__(33);var _clientApi=__webpack_require__(47),_clientLogger=__webpack_require__(29),_configFilename=__webpack_require__(512);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}(_configFilename.args||_configFilename.argTypes)&&_clientLogger.logger.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify({args:_configFilename.args,argTypes:_configFilename.argTypes})),_configFilename.decorators&&_configFilename.decorators.forEach((function(decorator){return(0,_clientApi.addDecorator)(decorator,!1)})),(_configFilename.parameters||_configFilename.globals||_configFilename.globalTypes)&&(0,_clientApi.addParameters)(_objectSpread(_objectSpread({},_configFilename.parameters),{},{globals:_configFilename.globals,globalTypes:_configFilename.globalTypes}),!1),_configFilename.argTypesEnhancers&&_configFilename.argTypesEnhancers.forEach((function(enhancer){return(0,_clientApi.addArgTypesEnhancer)(enhancer)}))},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("ct80")},,function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("oD4t")},function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)("2sZ7")},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(3),__webpack_require__(10),__webpack_require__(21),__webpack_require__(23),__webpack_require__(8),__webpack_require__(13),__webpack_require__(17),__webpack_require__(12),__webpack_require__(19),__webpack_require__(6),__webpack_require__(11),__webpack_require__(14),__webpack_require__(15),__webpack_require__(18);var _storybook_react__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(121),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_17__=(__webpack_require__(513),__webpack_require__(514),__webpack_require__(9));function _createForOfIteratorHelper(o,allowArrayLike){var it;if("undefined"==typeof Symbol||null==o[Symbol.iterator]){if(Array.isArray(o)||(it=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)}(o))||allowArrayLike&&o&&"number"==typeof o.length){it&&(o=it);var i=0,F=function F(){};return{s:F,n:function n(){return i>=o.length?{done:!0}:{done:!1,value:o[i++]}},e:function e(_e){throw _e},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=o[Symbol.iterator]()},n:function n(){var step=it.next();return normalCompletion=step.done,step},e:function e(_e2){didErr=!0,err=_e2},f:function f(){try{normalCompletion||null==it.return||it.return()}finally{if(didErr)throw err}}}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}var sortChapters=["documentation","overview","installation","tutorial","how it works","faqs","live demo"];Object(_storybook_react__WEBPACK_IMPORTED_MODULE_14__.addParameters)({options:{showRoots:!0,storySort:function storySort(a,b){var _step,x=a[1].kind.toLowerCase(),y=b[1].kind.toLowerCase(),_iterator=_createForOfIteratorHelper(sortChapters);try{for(_iterator.s();!(_step=_iterator.n()).done;){var chapter=_step.value,matchedA=x.indexOf(chapter)>-1,matchedB=y.indexOf(chapter)>-1;if(matchedA&&!matchedB)return-1;if(!matchedA&&matchedB)return 1}}catch(err){_iterator.e(err)}finally{_iterator.f()}return a[1].kind===b[1].kind?0:a[1].id.localeCompare(b[1].id,void 0,{numeric:!0})}},docs:{container:_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_17__.DocsContainer,page:_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_17__.DocsPage,inlineStories:!0},backgrounds:{default:null,values:[{name:"light",value:"#f5f5f5"},{name:"dark",value:"#050505"}]}})},,,,function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(121).configure)([__webpack_require__(517)],module,!1)}).call(this,__webpack_require__(124)(module))},function(module,exports,__webpack_require__){var map={"./code-of-conduct.stories.mdx":518,"./component.stories.mdx":520,"./faqs.stories.mdx":617,"./guideline.stories.mdx":618,"./installation.stories.mdx":619,"./overview.stories.mdx":620,"./reference-loader.stories.mdx":621,"./reference-macro.stories.mdx":622,"./reference-react.stories.mdx":623,"./tutorial.stories.mdx":624,"./use-case.stories.mdx":628};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=517},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Constributing/Code of Conduct",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"code-of-conduct"},"Code of Conduct"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"our-pledge"},"Our Pledge"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"In the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"our-standards"},"Our Standards"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Examples of behavior that contributes to creating a positive environment\ninclude:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ul",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Using welcoming and inclusive language"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Being respectful of differing viewpoints and experiences"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Gracefully accepting constructive criticism"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Focusing on what is best for the community"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Showing empathy towards other community members")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Examples of unacceptable behavior by participants include:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ul",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"The use of sexualized language or imagery and unwelcome sexual attention or\nadvances"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Trolling, insulting/derogatory comments, and personal or political attacks"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Public or private harassment"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Publishing others' private information, such as a physical or electronic\naddress, without explicit permission"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"Other conduct which could reasonably be considered inappropriate in a\nprofessional setting")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"our-responsibilities"},"Our Responsibilities"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Project maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Project maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"scope"},"Scope"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"This Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"enforcement"},"Enforcement"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Instances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"mailto:opensource@billykwok.me."}),"opensource@billykwok.me.")," All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Project maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"attribution"},"Attribution"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"This Code of Conduct is adapted from the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://www.contributor-covenant.org/version/1/4/code-of-conduct.html",target:"_blank",rel:"nofollow noopener noreferrer"}),"Contributor Covenant"),", version 1.4,\navailable at ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://www.contributor-covenant.org/version/1/4/code-of-conduct.html",target:"_blank",rel:"nofollow noopener noreferrer"}),"https://www.contributor-covenant.org/version/1/4/code-of-conduct.html"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Homepage: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://www.contributor-covenant.org",target:"_blank",rel:"nofollow noopener noreferrer"}),"https://www.contributor-covenant.org")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"For answers to common questions about this code of conduct, see\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://www.contributor-covenant.org/faq",target:"_blank",rel:"nofollow noopener noreferrer"}),"https://www.contributor-covenant.org/faq"),"."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Constributing/Code of Conduct",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,"div#docs-root blockquote.sbdocs-blockquote {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\ndiv#docs-root h2.sbdocs-h2 {\n margin-top: 2rem;\n}\n\ndiv#docs-root div.docblock-source {\n margin: 1.5rem 0;\n}\n\ndiv#docs-root table.sbdocs-table tr th,\ndiv#docs-root table.sbdocs-table tr td {\n padding: 0.125rem 0.5rem;\n}\n\ndiv#docs-root table.sbdocs-table tr th,\ndiv#docs-root table.sbdocs-table tr td {\n border-color: #e5e5e5;\n}\n\ndiv#docs-root table.sbdocs-table tr code {\n padding: 3px 5px;\n}\n\ndiv#docs-root table.sbdocs-table tr code {\n border: 1px solid #eeeeee;\n background-color: #f8f8f8;\n border-radius: 3px;\n}\n\ndiv#docs-root table.sbdocs-table thead tr {\n background-color: #e5e5e5;\n}\n\ndiv#docs-root h3.sbdocs-h3 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\ndiv#docs-root h4.sbdocs-h4 {\n margin: 0;\n margin-bottom: 0.25rem;\n}\n\ndiv#docs-root h4.sbdocs-h4 + p {\n margin-top: 0;\n}\n\ndiv#docs-root pre > code {\n border: none;\n}\n\ndiv#docs-root div.docblock-source,\ndiv#docs-root div.docblock-source code {\n background: #151515;\n color: #fff;\n}\n\ndiv#docs-root\n div.simplebar-content-wrapper\n > div.simplebar-content\n > pre\n > code {\n background: none;\n border: none;\n}\n\ndiv#docs-root div.docblock-source code span.token.punctuation {\n color: #8791a2;\n}\n\ndiv#docs-root div.docblock-source code span.token.operator {\n color: #8e8282;\n}\n\ndiv#docs-root div.docblock-source code span.token.string {\n color: #d28635;\n}\n\ndiv#docs-root div.docblock-source code span.token.keyword {\n color: #2b92ff;\n}\n\ndiv#docs-root div.docblock-source code span.token.boolean {\n color: #efd935;\n}\n\ndiv#docs-root div.docblock-source code span.token.maybe-class-name,\ndiv#docs-root div.docblock-source code span.token.class-name {\n color: #32dcbd;\n}\n\ndiv#docs-root div.docblock-source code span.token.function {\n color: #00abff;\n}\n\ndiv#docs-root div.docblock-source code span.token.variable {\n color: #9b55e6;\n}\n\ndiv#docs-root div.docblock-source code span.token.tag {\n color: #71d04b;\n}\n\ndiv#docs-root div.docblock-source code span.token.comment {\n color: #19ad19;\n}\n\ndiv#docs-root div.docblock-source code span.token.attr-name {\n color: #b97ad2;\n}\n\ndiv#docs-root div.docblock-source code span.token.attr-value {\n color: #8d859a;\n}\n\nbody > div#docs-root div.sbdocs-preview {\n background: #222;\n}\n\ndiv#docs-root div.docblock-source > div:last-child,\ndiv#docs-root div.docblock-source > div:last-child > button {\n background: #333;\n color: #eee;\n}\n",""]),module.exports=exports},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Template})),__webpack_require__.d(__webpack_exports__,"argTypes",(function(){return argTypes})),__webpack_require__.d(__webpack_exports__,"imageGoodUrl",(function(){return imageGoodUrl})),__webpack_require__.d(__webpack_exports__,"imageBadUrl",(function(){return imageBadUrl}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(101),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(9),_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(49),_reshoot_react__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(97),_reshoot_react__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(_reshoot_react__WEBPACK_IMPORTED_MODULE_9__),_utils_describe__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(66),_utils_images__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(122);__webpack_require__(234),__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Template=function Template(_ref){var width=_ref.width,state=_ref.state,mockInvalidUrl=_ref.mockInvalidUrl,args=_objectWithoutProperties(_ref,["width","state","mockInvalidUrl"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_reshoot_react__WEBPACK_IMPORTED_MODULE_9___default.a,_extends({style:{width:"".concat(width,"px")},data:Object.assign({},_utils_images__WEBPACK_IMPORTED_MODULE_11__.a[0],{alt:"Test image"},mockInvalidUrl?{src:"error",srcSet:"error"}:{}),_s:state,onLoad:Object(_utils_describe__WEBPACK_IMPORTED_MODULE_10__.a)(Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_8__.action)("Image loaded"),"() => {} /* omitted as created by @storybook-addons/action */"),onError:Object(_utils_describe__WEBPACK_IMPORTED_MODULE_10__.a)(Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_8__.action)("Loading error"),"() => {} /* omitted as created by @storybook-addons/action */"),onClick:Object(_utils_describe__WEBPACK_IMPORTED_MODULE_10__.a)(Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_8__.action)("Clicked"),"() => {} /* omitted as created by @storybook-addons/action */")},args,{mdxType:"Reshoot"}))};Template.displayName="Template";var argTypes={width:{name:"Width",control:{type:"range",min:40,max:1080,step:20}},state:{name:"State",control:{type:"select",options:{AUTO:null,MANUAL:0,OFFLINE:1,ERROR:2,HIDDEN:3,LOADING:4,FADING:5,LOADED:6}}},mockInvalidUrl:{table:{disable:!0}}},layoutProps={Template:Template,argTypes:argTypes};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.Meta,{title:"Live Demo/Component",parameters:{layout:"padded",previewTabs:{"storybook/docs/panel":{disable:!0,hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.Canvas,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.Story,{name:"Image (Good URL)",args:{width:480,state:null,mockInvalidUrl:!1},argTypes:argTypes,mdxType:"Story"},Template.bind({})),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.Story,{name:"Image (Bad URL)",args:{width:480,state:null,mockInvalidUrl:!0},argTypes:argTypes,mdxType:"Story"},Template.bind({}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var imageGoodUrl=Template.bind({});imageGoodUrl.storyName="Image (Good URL)",imageGoodUrl.argTypes=argTypes,imageGoodUrl.args={width:480,state:null,mockInvalidUrl:!1},imageGoodUrl.parameters={storySource:{source:"({\n width,\n state,\n mockInvalidUrl,\n ...args\n}) => <Reshoot style={{\n width: `${width}px`\n}} data={{ ...images[0],\n alt: `Test image`,\n ...(mockInvalidUrl ? {\n src: 'error',\n srcSet: 'error'\n } : {})\n}} _s={state} onLoad={describe(action('Image loaded'), '() => {} /* omitted as created by @storybook-addons/action */')} onError={describe(action('Loading error'), '() => {} /* omitted as created by @storybook-addons/action */')} onClick={describe(action('Clicked'), '() => {} /* omitted as created by @storybook-addons/action */')} {...args} />"}};var imageBadUrl=Template.bind({});imageBadUrl.storyName="Image (Bad URL)",imageBadUrl.argTypes=argTypes,imageBadUrl.args={width:480,state:null,mockInvalidUrl:!0},imageBadUrl.parameters={storySource:{source:"({\n width,\n state,\n mockInvalidUrl,\n ...args\n}) => <Reshoot style={{\n width: `${width}px`\n}} data={{ ...images[0],\n alt: `Test image`,\n ...(mockInvalidUrl ? {\n src: 'error',\n srcSet: 'error'\n } : {})\n}} _s={state} onLoad={describe(action('Image loaded'), '() => {} /* omitted as created by @storybook-addons/action */')} onError={describe(action('Loading error'), '() => {} /* omitted as created by @storybook-addons/action */')} onClick={describe(action('Clicked'), '() => {} /* omitted as created by @storybook-addons/action */')} {...args} />"}};var componentMeta={title:"Live Demo/Component",parameters:{layout:"padded",previewTabs:{"storybook/docs/panel":{disable:!0,hidden:!0}}},includeStories:["imageGoodUrl","imageBadUrl"]},mdxStoryNameToKey={"Image (Good URL)":"imageGoodUrl","Image (Bad URL)":"imageBadUrl"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_7__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_6__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,'.ay7t7kp{display:inline-block;position:relative;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;color:transparent;background:currentColor}.ay7t7kp:before{content:"";display:block;width:100%;height:0;padding-bottom:0;padding-bottom:calc(var(--r,0)*100%)}.ay7t7kp img{display:block;-o-object-fit:cover;object-fit:cover}.ay7t7kp>div,.ay7t7kp img{position:absolute;top:0;width:100%;height:100%}.ay7t7kp>div{background:currentColor;transform:scale3d(1.05,1.05,1)}.ay7t7kp>div>img{filter:blur(.5rem)}.ay7t7kp>button{cursor:pointer;border:none;outline:none;display:block;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;color:#fff;padding:1rem 1.25rem;background:rgba(0,0,0,.5);border-radius:.25rem;max-width:11rem}.ay7t7kp>button>svg{width:4rem;height:4rem}.ay7t7kp>button>svg>path{stroke:#fff;stroke-width:4;fill:none}.ay7t7kp>button>h6{font-size:1rem;margin:0 0 .25rem}.ay7t7kp>button>p{font-size:.875rem;margin:0}.a1tw3k4n{-webkit-animation:f-a1tw3k4n .75s 1;animation:f-a1tw3k4n .75s 1}@-webkit-keyframes f-a1tw3k4n{0%{transform:scale3d(1.05,1.05,1);opacity:1}to{transform:none;opacity:0}}@keyframes f-a1tw3k4n{0%{transform:scale3d(1.05,1.05,1);opacity:1}to{transform:none;opacity:0}}',""]),module.exports=exports},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/FAQs",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"faqs"},"FAQs"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"does-build-time-image-generation-significantly-increases-my-build-time"},"Does build-time image generation significantly increases my build time?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Yes and no. Depending on how much processing is required and how many versions of an image are needed, ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," may increase your build time as much as twice the original duration. However, it also caches the output images so that the second run is almost as fast as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," is not used."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"how-does-reshootreact-load-an-image"},"How does ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"h2"},"@reshoot/react")," load an image?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"On the server side, it renders a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<div />")," container plus an inner ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<img />")," element. This ensures that the images are rendered as usual when JavaScript is disabled."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"On the client side, if JavaScript is enabled, three things happen upon hydration."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ol",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"src")," and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"srcset")," attributes of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"<img />")," are removed to prevent loading images outside viewport,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"A blurred preview hovers the inner ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"<img />")," element to provide visual clue that enhances user experience."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"All ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"<Reshoot />")," elements register a callback to an IntersectionObserver.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Whenever a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<Reshoot />")," element intersects with the viewport for the first time, a virtual image element is created in background to initiate the loading and decoding of the corresponding image. Once the image is loaded by the browser, the preview is faded out and removed from the DOM tree."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},"One caveat of the above approach is that HTML rendered on the server side is not the same as the initial DOM tree rendered on the client side. In older version of React, this results in a checksum error. In all versions of React, this forces a re-rendering of all ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<Reshoot />")," element that creates slight overhead to initial page load. This will be addressed by adopting React Suspense once it is shipped in the future. For now, this caveat is considered as a fare trade-off.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"what-browsers-are-supported"},"What browsers are supported?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/react")," makes use of CSS variable and targets ES6 browsers. Both were announced more than 5 years ago so there is no plan to support older browsers in the expense of larger bundle size and worse performance."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"do-you-plan-to-support-other-bundlers-like-rollup-snowpack-pika-etc"},"Do you plan to support other bundlers like Rollup, Snowpack, Pika, etc?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Support for other bundlers is not in plan, but you are welcome to create a feature request to show that there is enough demand that justifies its development."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/FAQs",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Constributing/Guideline",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"guideline"},"Guideline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"thanks"},"Thanks"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"I'm really glad that you're reading this, because your help would make this project even better and benefit more people."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"best-practices"},"Best Practices"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Since it is a small repo, there is not much restriction on how you should contribute. In general, just follow the guideline below."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"If you are reporting an issue,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ul",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},"There is no particular issue template, but please make sure that your issue contains your environment setup, library version, problem description, expected behavior, and current behavior.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"If you are raising PR,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ul",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"You can get started by simply cloning/forking this repo, and running ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"yarn")," in the project root directory.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"Make sure you've prettier plugin installed in your text editor/IDE. Prettify your codes automatically or through Prettier CLI before you commit any change.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"Test is easy and important for this project. Please make sure all tests pass before raising your PR. If you need to modify tests, make sure that test coverage does not decrease after your change.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"This repo uses commitlint. Please commit by running ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"yarn commit")," instead of the regular ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"git commit")," to make sure that you follow the format correctly.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"For the rest of scripts that may be useful for you. Please refer to the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"scripts")," content of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/billykwok/reshoot/blob/master/package.json",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"package.json")),".")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"There is no particular PR template, but please make sure that your issue contains a clear list of what you've done, as well as what problem it solves and the related issues if applicable.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"Your PR will be tested again in the cloud using CircleCI. I will only merge PR that has a green status associated.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ul"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"li"},"Your PR will be reviewed and merged as soon as possible."))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Constributing/Guideline",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/Installation",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"installation"},"Installation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"As mentioned in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"/?path=/docs/documentation-overview--page#what-is-in-the-box"}),"Overview"),", it is not mandatory to use all 3 available packages, despite using them in combination yields the best result. Assuming all are used, you can install them using the following Yarn commands."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-sh"}),"# yarn\nyarn add -D @reshoot/loader @reshoot/macro\nyarn add @reshoot/react\n\n# If babel-plugin-macros is not installed\nyarn add -D babel-plugin-macros\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Or, if you use npm,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-sh"}),"# npm\nnpm install -D @reshoot/loader @reshoot/macro\nnpm install @reshoot/react\n\n# If babel-plugin-macros is not installed\nnpm install -D babel-plugin-macros\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/Installation",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/Overview",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"reshoot"},"Reshoot"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/kentcdodds/babel-plugin-macros",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("img",_extends({parentName:"a"},{src:"https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square",alt:"Babel Macro"}))),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://lerna.js.org",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("img",_extends({parentName:"a"},{src:"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg",alt:"lerna"}))),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://codecov.io/gh/billykwok/reshoot",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("img",_extends({parentName:"a"},{src:"https://codecov.io/gh/billykwok/reshoot/branch/master/graph/badge.svg",alt:"codecov"}))),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/billykwok/reshoot/blob/master/LICENSE",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("img",_extends({parentName:"a"},{src:"https://badgen.net/npm/license/@reshoot/react",alt:"License"}))),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://circleci.com/gh/billykwok/reshoot/tree/master",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("img",_extends({parentName:"a"},{src:"https://circleci.com/gh/billykwok/reshoot/tree/master.svg?style=svg",alt:"CircleCI"})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Reshoot is a production-ready image framework for React. As a spiritual successor of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/stereobooster/react-ideal-image",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"react-ideal-image"))," (no longer actively maintained), Reshoot makes the generation and rendering of lazy-loaded responsive images as effortless and efficient as possible."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"It is not just a library but a framework, because apart from a lightweight React component library, it is also shipped with a Webpack loader and a Babel macro that generate images in different sizes (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"srcset")),") as well as low-quality previews (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/zouhir/lqip",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"lqip")),")."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Written in TypeScript, Reshoot provides type definitions out of the box. Powered by hooks and IntersectionObserver, its React runtime is only ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"4.4kb")," in size (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"3kb")," js and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"1.4kb")," css) before gzip and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"2.5kb")," after gzip. The built-in Babel macro also helps you override image generation setting while maintaining maximum code readability and type-checkability. The project has a test coverage of over 90%."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"what-is-in-the-box"},"What is in the box"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Reshoot currently consists of the following 3 packages."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"reshootloader"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"h3"},"@reshoot/loader")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"A ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://webpack.js.org/loaders",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"webpack-loader"))," that emits low-quality image preview (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/zouhir/lqip",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"lqip")),") and responsive images, and returns meta info of the images."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"reshootmacro"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"h3"},"@reshoot/macro")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"A ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/kentcdodds/babel-plugin-macros",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"babel-macro"))," that transpiles ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"reshoot('image.jpg', { a: 1, b: 2 })")," into ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require('image.jpg!@reshoot/loader?a=1&b=2')"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"reshootreact"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"h3"},"@reshoot/react")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"A lightweight ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"React"))," component that renders lazy-loaded responsive images. It is designed to accept the output meta data of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},"Despite it works the best when all 3 packages are used together, there is nothing stopping you from selectively adopt one of them to fit your use case. For example, you can use ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," to generate responsive images, but build your own ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<Img />")," component to render the images. Or, the other way round - using ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/react")," to render images that you build yourself.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},"Currently Reshoot assumes that you use Webpack, Babel and React. Please let know if you need support for other framework/library.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"quick-look"},"Quick Look"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Here is a simplfied demonstration on how easy to use Reshoot."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-jsx"}),"import React from 'react';\nimport reshoot from '@reshoot/macro';\nimport Reshoot from '@reshoot/react';\n\nfunction Example() {\n return <Reshoot data={reshoot('./image.jpg')} />;\n}\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"support"},"Support"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"issues-and-feedback"},"Issues and Feedback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Please voice your opinion and report bugs in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/billykwok/reshoot/issues",target:"_blank",rel:"nofollow noopener noreferrer"}),"issues")," sections of this GitHub project."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"contributing"},"Contributing"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"https://github.com/billykwok/reshoot/blob/master/package.json",target:"_blank",rel:"nofollow noopener noreferrer"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"package.json")),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"license"},"License"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"MIT"))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/Overview",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/API Reference/@reshoot／loader",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"reshootloader"},"@reshoot/loader"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"configuration"},"Configuration"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ol",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"Specify options in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"webpack.config.js"),".")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"module.exports = {\n module: {\n rules: [\n {\n test: /* regex */,\n use: [\n {\n loader: '@reshoot/loader',\n options: {\n /* options */\n },\n },\n ],\n },\n ],\n },\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ol",{start:2},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"Specify options as query parameters in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"li"},"require")," call",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",{parentName:"li"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},"Not recommended as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/macro")," is a better alternative.")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),'const image = require(\'./image.jpg?{"name":"[contenthash:16]-[width].[ext]"\');\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"supported-format"},"Supported Format"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," supports ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"jpg"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"png"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webp"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"gif"),", and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"svg")," images."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"If an image in other formats is imported by Webpack, ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," will throws an error."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"available-options"},"Available Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"default-options"},"Default Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Each option can be overridden either globally in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webpack.config.js")," or locally in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"reshoot"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"const options = {\n name:\n process.env.NODE_ENV === 'development'\n ? '[path][name].[ext]'\n : '[contenthash:8]-[width].[ext]',\n outputPath: null,\n publicPath: null,\n shape: ({\n type,\n src,\n width,\n height,\n srcSet,\n aspectRatio,\n placeholder,\n color,\n sources,\n }) => ({\n type,\n src,\n width,\n height,\n srcSet,\n aspectRatio,\n placeholder,\n color,\n sources,\n }),\n srcSet: [480, 640, 840, 1080],\n quality: 80,\n background: '#fff',\n color: '#fff',\n placeholder: { size: 8, trimDataUrl: false },\n enforceFormat: false,\n aspectRatio: {\n type: 'widthByHeight',\n format: 'ratio',\n decimal: 4,\n },\n fastMode: process.env.NODE_ENV === 'development',\n cache: true,\n emitFile: true,\n esModule: true,\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"option-description"},"Option Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"output-file-names"},"Output File Name(s)"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"name: string"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"'[path][name].[ext]'")," when ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"process.env.NODE_ENV === 'development'"),", else ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"'[contenthash:8]-[width].[ext]'"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Name pattern of the output image files. It supports ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"[width]")," in addition to all the placeholder supported by Webpack. To increase the speed of development build, only one image is emitted when ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"NODE_ENV")," is ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"development"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"output-path"},"Output Path"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"outputPath: null | string | (filename: string) => string"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},'"/images"'),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The directory where output images should be emitted to. When set as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"null"),", the value of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"outputPath")," in Webpack ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"output")," config is used. When a function is specified, the value returned by it is used as the path of the corresponding output image. Function is only supported in global options due to the limitation of function serialization."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"public-path"},"Public Path"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"publicPath: null | string | (filename: string) => string"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"null"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The path where the output images are accessed on the webpage. When set as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"null"),", the value of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"outputPath")," is used. When a function is specified, the value returned by it is used as the public path of the corresponding output image. Function is only supported in global options due to the limitation of function serialization."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"module-export-shape"},"Module Export Shape"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"shape: (output: Output) => any"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: See below",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","A function that builds the exported object returned from ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require"),". ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"Output")," has the following type."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"type Output = {\n type: string; // The mime type of source image\n src: string; // The `<img />` tag src url of default output image\n width: number; // The intrinsic width of the default output image\n height: number; // The intrinsic height of the default output image\n srcSet: string[]; // The `<img />` tag srcSet url list of responsive output image\n aspectRatio: number; // The aspect ratio of output images for reflow prevention\n placeholder: string; // The url/data-url of LQIP\n color: string; // The color of image box before the image or LQIP is shown\n sources: { type: string; src: string; srcSet: string[] }[]; // Alternative sources used in browsers supporting better image formats\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"For example, with the config below,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"const shape = ({\n type,\n src,\n width,\n height,\n srcSet,\n aspectRatio,\n placeholder,\n color,\n sources,\n}) => ({\n w: width,\n h: height,\n a: aspectRatio,\n p: placeholder,\n c: color,\n sources: [...sources, { type, src, srcSet }],\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"an object like the following will be exported."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"export default {\n w: 1024,\n h: 720,\n a: 1.68,\n p: 'data:example-data-url',\n c: '#fff',\n sources: [\n {\n type: 'image/webp',\n src: 'dir/example/image.webp',\n srcSet: 'dir/example/image-480.webp 480w',\n },\n {\n type: 'image/jpeg',\n src: 'dir/example/image.jpg',\n srcSet: 'dir/example/image-480.jpg 480w',\n },\n ],\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"widths-of-responsive-images"},"Widths of Responsive Images"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"srcSet: number[]"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"[480, 640, 840, 1080]"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Widths of responsive images. Input image is resized into a set of output images with widths specified in this option. The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"srcSet")," attribute of module export is also generated from this list. For example,"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"const srcSet = [360, 640, 960];\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"results in something like"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-html"}),'<img\n src="/images/img-full.jpg"\n srcset="/images/img-360 360w, /images/img-640 640w, /images/img-960 960w"\n/>\n')),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"quality-of-output-image"},"Quality of Output Image"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"quality: number"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"80"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The quality of output image."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"filling-background"},"Filling Background"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"background: string"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"'#fff'"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The color used to fill transparent background when input image is converted into a format that does not support transparency. Accept only HEX color."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"default-preview-color"},"Default Preview Color"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"color: string"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"'#fff'"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The color used as the background of aspect ratio box before LQIP or final image is loaded. Accept any color format supported by CSS."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"placeholder"},"Placeholder"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"placeholder: { size: number, trimDataUrl: boolean }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"{ size: 8, trimDataUrl: false }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","LQIP setting where ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"size")," is the length of the shorter side of the image, and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"trimDataUrl")," controls whether the initial prefix of data-url (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"data:<meme>;base64,"),") is omitted to slightly reduce bundle size. When ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"trimDataUrl")," is falsy, the reconstruction of full data-url is expected to be handled in user land."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"enforce-format"},"Enforce Format"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"enforceFormat: string | false"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"false"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Enforce the output for all images to be in specific format. Support ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"jpg"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"png"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webp")," and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"gif"),". When falsy, the format of output is the same of input."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"aspect-ratio"},"Aspect Ratio"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"aspectRatio: { type: string, format: string, decimal: number }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"{ type: 'widthByHeight', format: 'ratio', decimal: 4 }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Aspect ratio value setting in module export object. Decimal controls how many digits are preserved after decimal point. Type and format options take the following values."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("table",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("thead",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"thead"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Type"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Description"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tbody",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'widthByHeight'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Express aspect ratio as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"width / height"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'heightByWidth'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Express aspect ratio as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"height / width"))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("table",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("thead",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"thead"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Format"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Description"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tbody",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'ratio'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Express aspect ratio as ratio (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"width / height")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"height / width"),")")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'percent'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Express aspect ratio as percentage (",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"ratio * 100"),")")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"fast-mode"},"Fast Mode"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"fastMode: boolean"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Whether the loader should act as a pass-through loader. Useful for reducing build time during development."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"cache"},"Cache"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"cache: boolean"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Whether image output should be cached. Useful for reducing build time."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"emit-file"},"Emit File"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"emitFile: boolean"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Whether to emit file. Useful for preventing the same image from being emitted twice when bundling client-side and then server-side code with Webpack."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"es-module"},"ES Module"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"esModule: boolean"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Whether module export uses ES module or CommonJS syntax. When truthy, the returned module of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," call is written as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"export default { src: ... }"),". When falsy, the result of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," is in the form of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"module.exports = { src: ... }"),"."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/API Reference/@reshoot／loader",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/API Reference/@reshoot／macro",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"reshootmacro"},"@reshoot/macro"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"configuration"},"Configuration"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"As a syntactic sugar for ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/macro")," itself is not configurable. All options passed to it are transpiled into query parameters in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," call. Thus, ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/macro")," accepts the same set of options as ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"import reshoot from '@reshoot/macro';\n\nconst image = reshoot('./images/example.jpg', {\n /* options */\n});\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"available-options"},"Available Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Please refer to the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"?path=/docs/documentation-api-reference-reshoot%EF%BC%8Floader--page"}),"API reference")," of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," for details."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},"The option specified in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/macro")," is only applied to the corresponding image.")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/API Reference/@reshoot／macro",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/API Reference/@reshoot／react",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"reshootreact"},"@reshoot/react"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"configuration"},"Configuration"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/react")," can be configured in the same way as regular React component. However, it takes two special props. The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"data")," props has the same shape as the image object exported with ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-jsx"}),"import Reshoot from '@reshoot/react';\n\nconst MyImage = () => {\n return (\n <Reshoot\n data={/* output from @reshoot/loader */}\n imgProps={/* attributes of the inner <img /> element */}\n /* other props of the container element */\n />\n );\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h2",{id:"available-options"},"Available Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"list-of-options"},"List of Options"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Here's the full list of props accepted by the React component."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"type Props = {\n data: {\n src: string;\n width: number;\n height: number;\n aspectRatio?: number;\n srcSet?: string;\n color?: string;\n placeholder?: string | false | null;\n sources?: { type: string; src: string; srcSet?: string }[];\n };\n messages?: [string, string, string];\n imgProps?: {\n className?: string;\n alt?: string;\n [key: string]: any;\n };\n onLoad?: () => void;\n onError?: (error: Error) => void;\n [key: string]: any;\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h3",{id:"option-description"},"Option Description"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"data"},"Data"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"data: { [key: string]: any }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: Mandatory",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Configuration of rendering behavior. When used with ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),", it should be assigned with result of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("table",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("thead",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"thead"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Key"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("th",_extends({parentName:"tr"},{align:null}),"Description"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tbody",{parentName:"table"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"src")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Mandatory"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The src url of default image")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"width")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Mandatory"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The intrinsic width of default image")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"height")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Mandatory"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The intrinsic height of default image")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"srcSet")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"null")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"<img />")," tag ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"srcSet")," attribute for responsive images")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"aspectRatio")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"width / height")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The aspect ratio of image for aspect ratio box")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"placeholder")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'placeholder'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The url/data-url of LQIP")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"color")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"'transparent'")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"The color of image box before the image or LQIP is shown")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("tr",{parentName:"tbody"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"sources")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"td"},"[]")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("td",_extends({parentName:"tr"},{align:null}),"Alternative sources used in browsers supporting better image formats")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"error-messages"},"Error Messages"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"messages: [string, string, string]"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"['Not autoloaded in slow network', 'Browser is offline', 'Fail to load']"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The text message to be shown when network is slow, browser is offline, and image fails to load respectively."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"image-props"},"Image Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"imgProps: { [key: string]: any }"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"{}"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","The props of inner ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<img />")," element inside ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"<Reshoot />"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"loading-callback"},"Loading Callback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"onLoad: () => void"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"() => {}"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","A callback invoked when the image is decoded or downloaded (when decode is not supported)."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"error-callback"},"Error Callback"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"onError: (error: Error) => void"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"() => {}"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","A callback invoked when the image fails to load."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h4",{id:"others"},"Others"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Type: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"[name: string]: any"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Default: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"undefined"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("br",{parentName:"p"}),"\n","Other props specified are all passed to the container element directly."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/API Reference/@reshoot／react",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(4),__webpack_require__(5),__webpack_require__(2);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(9);__webpack_require__(53);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=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,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.Meta,{title:"Documentation/Tutorial",parameters:{previewTabs:{canvas:{hidden:!0}}},mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("h1",{id:"tutorial"},"Tutorial"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"Upon completing the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"?path=/docs/documentation-installation--page"}),"Installation"),", you can add the following configuration to your ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webpack.config.js")," to enable ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," in Webpack."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"module.exports = {\n module: {\n rules: [\n {\n test: /\\.(jpe?g|png|webp|gif|svg)$/i,\n use: [\n {\n loader: '@reshoot/loader',\n options: {\n /* customize global options if needed */\n },\n },\n ],\n },\n ],\n },\n};\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"This allows you to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," images in your JavaScript / TypeScript files."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-typescript"}),"import image from './image.jpg';\n// or\nconst image = require('./image.jpg');\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"When ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," processing the image specified in the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"import")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"require")," expression, it"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("ol",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"transforms and emits output images in different sizes and formats according to based on the given options, and"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("li",{parentName:"ol"},"creates a virtual module that contains the information of the output images.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("blockquote",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",{parentName:"blockquote"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader")," uses ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"sharp")," to process input image. It currently supports ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"jpg"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"png"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webp"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"gif"),", and ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"svg")," images. For all available options, please refer to the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"/?path=/docs/documentation-api-reference-reshoot%EF%BC%8Floader--page"}),"API Reference")," of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/loader"),".")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"You may then override the global options specified in ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"webpack.config.js")," using ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"@reshoot/macro")," if needed. Make sure that ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"babel-plugin-macros")," is installed as a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"?path=/docs/documentation-installation--page"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"a"},"devDependency")),". For example, output naming pattern of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("inlineCode",{parentName:"p"},"image.jpg")," can be overriden with the following code."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("code",_extends({parentName:"pre"},{className:"language-jsx"}),"import React from 'react';\nimport Reshoot from '@reshoot/react';\nimport reshoot from '@reshoot/macro';\n\nexport default function App() {\n return (\n <Reshoot\n data={reshoot('./image.jpg', {\n name: '[contenthash:16]-[width].[ext]',\n })}\n />\n );\n}\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("p",null,"The rendered React component would look like ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)("a",_extends({parentName:"p"},{href:"?path=/story/live-demo-component--image-accessible"}),"this"),"."))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Documentation/Tutorial",parameters:{previewTabs:{canvas:{hidden:!0}}},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_5__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},function(module,exports,__webpack_require__){var api=__webpack_require__(160),content=__webpack_require__(626);"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||{}},function(module,exports,__webpack_require__){(exports=__webpack_require__(161)(!1)).push([module.i,".container {\n display: flex;\n flex-flow: column wrap;\n align-content: space-between;\n width: 100%;\n height: 70rem;\n max-width: 64rem;\n margin: 0 auto;\n}\n\n.item {\n display: block;\n width: calc((100% - 1rem) / 3);\n margin-bottom: 0.5rem;\n}\n\n.item:nth-child(3n + 1) {\n order: 1;\n}\n.item:nth-child(3n + 2) {\n order: 2;\n}\n.item:nth-child(3n) {\n order: 3;\n}\n\n.container::before,\n.container::after {\n content: '';\n flex-basis: 100%;\n width: 0;\n order: 2;\n}\n",""]),module.exports=exports},,function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return use_case_stories_Template})),__webpack_require__.d(__webpack_exports__,"argTypes",(function(){return argTypes})),__webpack_require__.d(__webpack_exports__,"galleryLqip",(function(){return galleryLqip})),__webpack_require__.d(__webpack_exports__,"galleryColor",(function(){return galleryColor}));__webpack_require__(3),__webpack_require__(8),__webpack_require__(101),__webpack_require__(4),__webpack_require__(5);var delegated_reactfrom_dll_reference_storybook_docs_dll=__webpack_require__(2),delegated_reactfrom_dll_reference_storybook_docs_dll_default=__webpack_require__.n(delegated_reactfrom_dll_reference_storybook_docs_dll),esm=__webpack_require__(0),blocks=__webpack_require__(9),dist=__webpack_require__(49),describe=__webpack_require__(66),lib=(__webpack_require__(20),__webpack_require__(16),__webpack_require__(97)),lib_default=__webpack_require__.n(lib),utils_images=__webpack_require__(122);__webpack_require__(625);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}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<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Gallery_Gallery=function Gallery(_ref){var disablePlaceholder=_ref.disablePlaceholder,props=_objectWithoutProperties(_ref,["disablePlaceholder"]);return delegated_reactfrom_dll_reference_storybook_docs_dll_default.a.createElement("div",{className:"container"},utils_images.a.map((function(data,i){return delegated_reactfrom_dll_reference_storybook_docs_dll_default.a.createElement(lib_default.a,_extends({key:"".concat(data.src,"_").concat(i),className:"item",data:Object.assign({},data,{placeholder:!disablePlaceholder&&data.placeholder,alt:"Test image #".concat(i)}),onLoad:Object(describe.a)(Object(dist.action)("Image loaded"),"() => {} /* omitted as created by @storybook-addons/action */"),onError:Object(describe.a)(Object(dist.action)("Loading error"),"() => {} /* omitted as created by @storybook-addons/action */"),onClick:Object(describe.a)(Object(dist.action)("Clicked #".concat(i)),"() => {} /* omitted as created by @storybook-addons/action */")},props))})))};Gallery_Gallery.displayName="Gallery";var utils_Gallery=Gallery_Gallery;try{Gallery_Gallery.displayName="Gallery",Gallery_Gallery.__docgenInfo={description:"",displayName:"Gallery",props:{disablePlaceholder:{defaultValue:null,description:"",name:"disablePlaceholder",required:!0,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/utils/Gallery.tsx#Gallery"]={docgenInfo:Gallery_Gallery.__docgenInfo,name:"Gallery",path:"src/utils/Gallery.tsx#Gallery"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(234),__webpack_require__(53);function use_case_stories_extends(){return(use_case_stories_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}function use_case_stories_objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function use_case_stories_objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var use_case_stories_Template=function Template(_ref){var state=_ref.state,args=use_case_stories_objectWithoutProperties(_ref,["state"]);return Object(esm.mdx)(utils_Gallery,use_case_stories_extends({_s:state},args,{mdxType:"Gallery"}))};use_case_stories_Template.displayName="Template";var argTypes={state:{name:"State",control:{type:"select",options:{AUTO:null,MANUAL:0,OFFLINE:1,ERROR:2,HIDDEN:3,LOADING:4,FADING:5,LOADED:6}}},disablePlaceholder:{table:{disable:!0}}},layoutProps={Template:use_case_stories_Template,argTypes:argTypes};function MDXContent(_ref2){var components=_ref2.components,props=use_case_stories_objectWithoutProperties(_ref2,["components"]);return Object(esm.mdx)("wrapper",use_case_stories_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.mdx)(blocks.Meta,{title:"Live Demo/Use Case",parameters:{layout:"padded",previewTabs:{"storybook/docs/panel":{disable:!0,hidden:!0}}},mdxType:"Meta"}),Object(esm.mdx)(blocks.Canvas,{mdxType:"Canvas"},Object(esm.mdx)(blocks.Story,{name:"Gallery (LQIP)",args:{state:null,disablePlaceholder:!1},argTypes:argTypes,inline:!0,mdxType:"Story"},use_case_stories_Template.bind()),Object(esm.mdx)(blocks.Story,{name:"Gallery (Color)",args:{state:null,disablePlaceholder:!0},argTypes:argTypes,inline:!0,mdxType:"Story"},use_case_stories_Template.bind())))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var galleryLqip=use_case_stories_Template.bind();galleryLqip.storyName="Gallery (LQIP)",galleryLqip.argTypes=argTypes,galleryLqip.args={state:null,disablePlaceholder:!1},galleryLqip.parameters={storySource:{source:"({\n state,\n ...args\n}) => <Gallery _s={state} {...args} />"}};var galleryColor=use_case_stories_Template.bind();galleryColor.storyName="Gallery (Color)",galleryColor.argTypes=argTypes,galleryColor.args={state:null,disablePlaceholder:!0},galleryColor.parameters={storySource:{source:"({\n state,\n ...args\n}) => <Gallery _s={state} {...args} />"}};var componentMeta={title:"Live Demo/Use Case",parameters:{layout:"padded",previewTabs:{"storybook/docs/panel":{disable:!0,hidden:!0}}},includeStories:["galleryLqip","galleryColor"]},mdxStoryNameToKey={"Gallery (LQIP)":"galleryLqip","Gallery (Color)":"galleryColor"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta}],[[260,1,2]]]);
//# sourceMappingURL=main.2fb97c96f8ad2d4a2309.bundle.js.map