diff --git a/example/build/asset-manifest.json b/example/build/asset-manifest.json index 83dc548..2aa8234 100644 --- a/example/build/asset-manifest.json +++ b/example/build/asset-manifest.json @@ -1,22 +1,22 @@ { "files": { - "main.css": "./static/css/main.e4aa6614.chunk.css", - "main.js": "./static/js/main.bb7bbf97.chunk.js", - "main.js.map": "./static/js/main.bb7bbf97.chunk.js.map", + "main.css": "./static/css/main.934a1856.chunk.css", + "main.js": "./static/js/main.8214029d.chunk.js", + "main.js.map": "./static/js/main.8214029d.chunk.js.map", "runtime-main.js": "./static/js/runtime-main.c874aa95.js", "runtime-main.js.map": "./static/js/runtime-main.c874aa95.js.map", "static/js/2.78cf4bff.chunk.js": "./static/js/2.78cf4bff.chunk.js", "static/js/2.78cf4bff.chunk.js.map": "./static/js/2.78cf4bff.chunk.js.map", "index.html": "./index.html", - "precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js": "./precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js", + "precache-manifest.afa97e107d432997e78154b3e6801371.js": "./precache-manifest.afa97e107d432997e78154b3e6801371.js", "service-worker.js": "./service-worker.js", - "static/css/main.e4aa6614.chunk.css.map": "./static/css/main.e4aa6614.chunk.css.map", + "static/css/main.934a1856.chunk.css.map": "./static/css/main.934a1856.chunk.css.map", "static/js/2.78cf4bff.chunk.js.LICENSE.txt": "./static/js/2.78cf4bff.chunk.js.LICENSE.txt" }, "entrypoints": [ "static/js/runtime-main.c874aa95.js", "static/js/2.78cf4bff.chunk.js", - "static/css/main.e4aa6614.chunk.css", - "static/js/main.bb7bbf97.chunk.js" + "static/css/main.934a1856.chunk.css", + "static/js/main.8214029d.chunk.js" ] } \ No newline at end of file diff --git a/example/build/index.html b/example/build/index.html index 6531864..5ea6abb 100644 --- a/example/build/index.html +++ b/example/build/index.html @@ -1 +1 @@ -unsplash-image-picker
\ No newline at end of file +unsplash-image-picker
\ No newline at end of file diff --git a/example/build/precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js b/example/build/precache-manifest.afa97e107d432997e78154b3e6801371.js similarity index 65% rename from example/build/precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js rename to example/build/precache-manifest.afa97e107d432997e78154b3e6801371.js index 4d2d2cd..089e67b 100644 --- a/example/build/precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js +++ b/example/build/precache-manifest.afa97e107d432997e78154b3e6801371.js @@ -1,11 +1,11 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ { - "revision": "214719789fcbfe7d07bacb47eee213ab", + "revision": "509c8a1dad654f70417a7975c357b77b", "url": "./index.html" }, { - "revision": "568e73cf203109112d46", - "url": "./static/css/main.e4aa6614.chunk.css" + "revision": "852e87d6616f6871777c", + "url": "./static/css/main.934a1856.chunk.css" }, { "revision": "8a282e399d7a8a66f7b0", @@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ "url": "./static/js/2.78cf4bff.chunk.js.LICENSE.txt" }, { - "revision": "568e73cf203109112d46", - "url": "./static/js/main.bb7bbf97.chunk.js" + "revision": "852e87d6616f6871777c", + "url": "./static/js/main.8214029d.chunk.js" }, { "revision": "9c89a2bab2f512857a73", diff --git a/example/build/service-worker.js b/example/build/service-worker.js index da59d09..2ed2036 100644 --- a/example/build/service-worker.js +++ b/example/build/service-worker.js @@ -14,7 +14,7 @@ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts( - "./precache-manifest.3bc0a931fc31e6c2583a4a1804fc18ce.js" + "./precache-manifest.afa97e107d432997e78154b3e6801371.js" ); self.addEventListener('message', (event) => { diff --git a/example/build/static/css/main.e4aa6614.chunk.css b/example/build/static/css/main.934a1856.chunk.css similarity index 91% rename from example/build/static/css/main.e4aa6614.chunk.css rename to example/build/static/css/main.934a1856.chunk.css index 01801ea..49b750a 100644 --- a/example/build/static/css/main.e4aa6614.chunk.css +++ b/example/build/static/css/main.934a1856.chunk.css @@ -1,6 +1,5 @@ -body{padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App,body{height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} - +body{padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.App,body{height:100vh}.App{display:flex;margin:auto;align-content:space-around;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;overflow-y:auto}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.Gallery{-webkit-column-count:4;column-count:4;max-width:1000px;margin:10px auto;overflow-y:auto;max-height:calc(100vh - 150px)}.Gallery>img{flex:100% 1;margin-top:1rem;border-radius:5px}@media only screen and (max-width:700px){.Gallery{-webkit-column-count:3;column-count:3;margin:1rem;overflow-y:auto}}@media only screen and (max-width:400px){.Gallery{-webkit-column-count:1;column-count:1;padding:0 auto;overflow-y:auto}} /* ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com */*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.right-0{right:0}.left-0{left:0}.bottom-0{bottom:0}.m-2{margin:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.-ml-1{margin-left:-.25rem}.mr-3{margin-right:.75rem}.flex{display:flex}.grid{display:grid}.h-full{height:100%}.h-60{height:15rem}.h-6{height:1.5rem}.h-96{height:24rem}.h-5{height:1.25rem}.w-full{width:100%}.w-6{width:1.5rem}.w-5{width:1.25rem}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.place-content-center{place-content:center}.place-items-center{place-items:center}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{grid-gap:.5rem;gap:.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem*var(--tw-space-x-reverse));margin-left:calc(0.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem*var(--tw-space-x-reverse));margin-left:calc(0.5rem*(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-4{padding-top:1rem}.pb-12{padding-bottom:3rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px -1px rgba(0,0,0,0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.placeholder\:italic::-moz-placeholder{font-style:italic}.placeholder\:italic::placeholder{font-style:italic}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:bg-black\/20{background-color:rgba(0,0,0,.2)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:h-44{height:11rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-3{grid-column:span 3/span 3}.md\:h-32{height:8rem}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.Modal{display:none}.Modal.active{position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto;z-index:300;background-color:rgba(51,51,51,.5333333333);display:block}.Modal .Card{max-width:calc(-120px + 100vw);max-height:calc(-119px + 100vh);margin-right:auto;margin-left:auto;position:absolute;top:60px;right:0;left:0;overflow:hidden}.spinner{-webkit-animation:spinner .75s ease-in-out infinite;animation:spinner .75s ease-in-out infinite}.card:hover .card-img{filter:brightness(75%)}@media (min-width:500px){.card-columns{-moz-column-count:1!important;column-count:1!important;overflow:hidden}}@media (min-width:640px){.card-columns{-moz-column-count:2!important;column-count:2!important}}@media (min-width:1100px){.card-columns{-moz-column-count:3!important;column-count:3!important}} -/*# sourceMappingURL=main.e4aa6614.chunk.css.map */ \ No newline at end of file +/*# sourceMappingURL=main.934a1856.chunk.css.map */ \ No newline at end of file diff --git a/example/build/static/css/main.934a1856.chunk.css.map b/example/build/static/css/main.934a1856.chunk.css.map new file mode 100644 index 0000000..90217ea --- /dev/null +++ b/example/build/static/css/main.934a1856.chunk.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.css"],"names":[],"mappings":"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,CAEA,KACE,aACF,CAEA,wBACE,GACE,uBACF,CACF,CACA,gBACE,GACE,uBACF,CACF,CACA,cACE,yCAA0C,CAC1C,iCACF,CAEA,gBACE,cACF,CAEA,aACE,6CACF,CAEA,sBACE,oBACF,CAEA,oBACE,kBACF,CAEA,cACE,kBACF,CAEA,gBACE,sBACF,CAEA,iBACE,6BACF,CAEA,OACE,cAAW,CAAX,SACF,CAEA,yCACE,sBAAuB,CACvB,oDAAuD,CACvD,yDACF,CAEA,yCACE,sBAAuB,CACvB,mDAAsD,CACtD,wDACF,CAEA,iBACE,eACF,CAEA,iBACE,eACF,CAEA,SACE,oBACF,CAEA,cACE,oBACF,CAEA,YACE,qBACF,CAEA,QACE,gBACF,CAEA,UACE,iBAAkB,CAClB,sDACF,CAEA,aACE,iBAAkB,CAClB,qDACF,CAEA,cACE,mBAAoB,CACpB,gBACF,CAEA,KACE,YACF,CAEA,MACE,iBAAkB,CAClB,kBACF,CAEA,MACE,iBAAmB,CACnB,oBACF,CAEA,MACE,gBACF,CAEA,OACE,mBACF,CAEA,MACE,mBACF,CAEA,MACE,oBACF,CAEA,SACE,kBAAmB,CACnB,mBACF,CAEA,SACE,gBAAkB,CAClB,gBACF,CAEA,WACE,eACF,CAEA,eACE,mBAAoB,CACpB,0CACF,CAEA,YACE,mBAAoB,CACpB,6CACF,CAEA,YACE,WACF,CAEA,YACE,WACF,CAEA,QACE,sEAA0E,CAC1E,4FAA8F,CAC9F,2DAA6H,CAA7H,8GACF,CAEA,uCACE,iBACF,CAEA,kCACE,iBACF,CAEA,0BACE,iBAAkB,CAClB,oDACF,CAEA,2BACE,6BAA8B,CAC9B,kBACF,CAEA,qBACE,0GAA2G,CAC3G,wGAAyG,CACzG,6EAAuG,CAAvG,8FACF,CAEA,mCACE,kBACF,CAEA,wCACE,+BACF,CAEA,yBACE,gBACE,yBACF,CACA,UACE,YACF,CACA,iBACE,6CACF,CACA,aACE,iBAAmB,CACnB,mBACF,CACF,CACA,yBACE,gBACE,yBACF,CACA,UACE,WACF,CACA,iBACE,6CACF,CACF,CACA,OACE,YACF,CACA,cACE,cAAe,CACf,KAAQ,CACR,QAAW,CACX,MAAS,CACT,OAAU,CACV,aAAc,CACd,WAAY,CACZ,2CAAgD,CAChD,aACF,CACA,aACE,8BAA+B,CAC/B,+BAAgC,CAChC,iBAAkB,CAClB,gBAAiB,CACjB,iBAAkB,CAClB,QAAS,CACT,OAAU,CACV,MAAS,CACT,eACF,CAEA,SACE,mDAA6C,CAA7C,2CACF,CAEA,sBACE,sBACF,CAEA,yBACE,cACE,6BAA0B,CAA1B,wBAA0B,CAC1B,eACF,CACF,CACA,yBACE,cACE,6BAA0B,CAA1B,wBACF,CACF,CACA,0BACE,cACE,6BAA0B,CAA1B,wBACF,CACF","file":"main.934a1856.chunk.css","sourcesContent":["/*\n! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: #e5e7eb;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \"\";\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\nhtml {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n font-weight: inherit;\n /* 1 */\n line-height: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type=search] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=button] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.my-auto {\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.-ml-1 {\n margin-left: -0.25rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-60 {\n height: 15rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-96 {\n height: 24rem;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n@-webkit-keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n.place-content-center {\n place-content: center;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * (1 - var(--tw-space-x-reverse)));\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255/var(--tw-bg-opacity));\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246/var(--tw-bg-opacity));\n}\n\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-12 {\n padding-bottom: 3rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99/var(--tw-text-opacity));\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255/var(--tw-text-opacity));\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.placeholder\\:italic::-moz-placeholder {\n font-style: italic;\n}\n\n.placeholder\\:italic::placeholder {\n font-style: italic;\n}\n\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216/var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:bg-black\\/20 {\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n@media (min-width: 640px) {\n .sm\\:col-span-2 {\n grid-column: span 2/span 2;\n }\n .sm\\:h-44 {\n height: 11rem;\n }\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .sm\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n}\n@media (min-width: 768px) {\n .md\\:col-span-3 {\n grid-column: span 3/span 3;\n }\n .md\\:h-32 {\n height: 8rem;\n }\n .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n}\n.Modal {\n display: none;\n}\n.Modal.active {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n overflow: auto;\n z-index: 300;\n background-color: rgba(51, 51, 51, 0.5333333333);\n display: block;\n}\n.Modal .Card {\n max-width: calc(-120px + 100vw);\n max-height: calc(-119px + 100vh);\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n top: 60px;\n right: 0px;\n left: 0px;\n overflow: hidden;\n}\n\n.spinner {\n animation: spinner 0.75s ease-in-out infinite;\n}\n\n.card:hover .card-img {\n filter: brightness(75%);\n}\n\n@media (min-width: 500px) {\n .card-columns {\n column-count: 1 !important;\n overflow: hidden;\n }\n}\n@media (min-width: 640px) {\n .card-columns {\n column-count: 2 !important;\n }\n}\n@media (min-width: 1100px) {\n .card-columns {\n column-count: 3 !important;\n }\n}\n"]} \ No newline at end of file diff --git a/example/build/static/css/main.e4aa6614.chunk.css.map b/example/build/static/css/main.e4aa6614.chunk.css.map deleted file mode 100644 index 498d911..0000000 --- a/example/build/static/css/main.e4aa6614.chunk.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KAEE,SAAU,CACV,mJAEY,CACZ,kCAAmC,CACnC,iCAEF,CAEA,UAHE,YAKF,CAEA,KACE,yEAEF;;AAlBA;;CAEC,CAKD,iBAGE,qBAAsB,CAMtB,sBAEF,CAEA,eAEE,eACF,CAQA,KACE,eAAgB,CAEhB,6BAA8B,CAE9B,eAAgB,CAEhB,aAAc,CACd,UAAW,CAEX,8MAEF,CAMA,KACE,QAAS,CAET,mBAEF,CAOA,GACE,QAAS,CAET,aAAc,CAEd,oBAEF,CAKA,oBACE,wCAAyC,CACzC,gCACF,CAKA,kBAME,iBAAkB,CAClB,mBACF,CAKA,EACE,aAAc,CACd,uBACF,CAKA,SAEE,kBACF,CAMA,kBAIE,uGAA+G,CAE/G,aAEF,CAKA,MACE,aACF,CAKA,QAEE,aAAc,CACd,aAAc,CACd,iBAAkB,CAClB,uBACF,CAEA,IACE,aACF,CAEA,IACE,SACF,CAOA,MACE,aAAc,CAEd,oBAAqB,CAErB,wBAEF,CAOA,sCAKE,mBAAoB,CAEpB,cAAe,CAEf,mBAAoB,CAEpB,mBAAoB,CAEpB,aAAc,CAEd,QAAS,CAET,SAEF,CAKA,cAEE,mBACF,CAMA,gDAIE,yBAA0B,CAE1B,4BAA6B,CAE7B,qBAEF,CAKA,gBACE,YACF,CAKA,iBACE,eACF,CAKA,SACE,uBACF,CAKA,wDAEE,WACF,CAMA,cACE,4BAA6B,CAE7B,mBAEF,CAKA,4BACE,uBACF,CAMA,6BACE,yBAA0B,CAE1B,YAEF,CAKA,QACE,iBACF,CAKA,mDAaE,QACF,CAEA,SACE,QAEF,CAEA,gBAHE,SAKF,CAEA,WAGE,eAAgB,CAChB,QAAS,CACT,SACF,CAKA,SACE,eACF,CAMA,mDACE,SAAU,CAEV,aAEF,CAEA,yCAEE,SAAU,CAEV,aAEF,CAKA,qBAEE,cACF,CAKA,UACE,cACF,CAOA,+CAQE,aAAc,CAEd,qBAEF,CAKA,UAEE,cAAe,CACf,WACF,CAEA,iBACE,uBAAwB,CACxB,uBAAwB,CACxB,kBAAmB,CACnB,kBAAmB,CACnB,aAAc,CACd,aAAc,CACd,aAAc,CACd,cAAe,CACf,cAAe,CAIf,qCAAsC,CAOtC,0BAA2B,CAC3B,2BAA4B,CAC5B,oCAAsC,CACtC,uCAAkC,CAClC,gCAA2B,CAC3B,2BAAsB,CACtB,mCAmBF,CAEA,mBACE,uBAAwB,CACxB,uBAAwB,CACxB,kBAAmB,CACnB,kBAAmB,CACnB,aAAc,CACd,aAAc,CACd,aAAc,CACd,cAAe,CACf,cAAe,CAIf,qCAAsC,CAOtC,0BAA2B,CAC3B,2BAA4B,CAC5B,oCAAsC,CACtC,uCAAkC,CAClC,gCAA2B,CAC3B,2BAAsB,CACtB,mCAmBF,CAEA,WACE,uBAAwB,CACxB,uBAAwB,CACxB,kBAAmB,CACnB,kBAAmB,CACnB,aAAc,CACd,aAAc,CACd,aAAc,CACd,cAAe,CACf,cAAe,CAIf,qCAAsC,CAOtC,0BAA2B,CAC3B,2BAA4B,CAC5B,oCAAsC,CACtC,uCAAkC,CAClC,gCAA2B,CAC3B,2BAAsB,CACtB,mCAmBF,CAEA,WACE,iBACF,CAEA,UACE,iBACF,CAEA,UACE,iBACF,CAEA,OACE,KACF,CAEA,SACE,OACF,CAEA,QACE,MACF,CAEA,UACE,QACF,CAEA,KACE,YACF,CAEA,SACE,gBAAiB,CACjB,iBACF,CAEA,SACE,eAAgB,CAChB,kBACF,CAEA,MACE,eAAgB,CAChB,kBACF,CAEA,OACE,mBACF,CAEA,MACE,mBACF,CAEA,MACE,YACF,CAEA,MACE,YACF,CAEA,QACE,WACF,CAEA,MACE,YACF,CAEA,KACE,aACF,CAEA,MACE,YACF,CAEA,KACE,cACF,CAEA,QACE,UACF,CAEA,KACE,YACF,CAEA,KACE,aACF,CAEA,wBACE,GACE,uBACF,CACF,CACA,gBACE,GACE,uBACF,CACF,CACA,cACE,yCAA0C,CAC1C,iCACF,CAEA,gBACE,cACF,CAEA,aACE,6CACF,CAEA,sBACE,oBACF,CAEA,oBACE,kBACF,CAEA,cACE,kBACF,CAEA,gBACE,sBACF,CAEA,iBACE,6BACF,CAEA,OACE,cAAW,CAAX,SACF,CAEA,yCACE,sBAAuB,CACvB,oDAAuD,CACvD,yDACF,CAEA,yCACE,sBAAuB,CACvB,mDAAsD,CACtD,wDACF,CAEA,iBACE,eACF,CAEA,iBACE,eACF,CAEA,SACE,oBACF,CAEA,cACE,oBACF,CAEA,YACE,qBACF,CAEA,QACE,gBACF,CAEA,UACE,iBAAkB,CAClB,sDACF,CAEA,aACE,iBAAkB,CAClB,qDACF,CAEA,cACE,mBAAoB,CACpB,gBACF,CAEA,KACE,YACF,CAEA,MACE,iBAAkB,CAClB,kBACF,CAEA,MACE,iBAAmB,CACnB,oBACF,CAEA,MACE,gBACF,CAEA,OACE,mBACF,CAEA,MACE,mBACF,CAEA,MACE,oBACF,CAEA,SACE,kBAAmB,CACnB,mBACF,CAEA,SACE,gBAAkB,CAClB,gBACF,CAEA,WACE,eACF,CAEA,eACE,mBAAoB,CACpB,0CACF,CAEA,YACE,mBAAoB,CACpB,6CACF,CAEA,YACE,WACF,CAEA,YACE,WACF,CAEA,QACE,sEAA0E,CAC1E,4FAA8F,CAC9F,2DAA6H,CAA7H,8GACF,CAEA,uCACE,iBACF,CAEA,kCACE,iBACF,CAEA,0BACE,iBAAkB,CAClB,oDACF,CAEA,2BACE,6BAA8B,CAC9B,kBACF,CAEA,qBACE,0GAA2G,CAC3G,wGAAyG,CACzG,6EAAuG,CAAvG,8FACF,CAEA,mCACE,kBACF,CAEA,wCACE,+BACF,CAEA,yBACE,gBACE,yBACF,CACA,UACE,YACF,CACA,iBACE,6CACF,CACA,aACE,iBAAmB,CACnB,mBACF,CACF,CACA,yBACE,gBACE,yBACF,CACA,UACE,WACF,CACA,iBACE,6CACF,CACF,CACA,OACE,YACF,CACA,cACE,cAAe,CACf,KAAQ,CACR,QAAW,CACX,MAAS,CACT,OAAU,CACV,aAAc,CACd,WAAY,CACZ,2CAAgD,CAChD,aACF,CACA,aACE,8BAA+B,CAC/B,+BAAgC,CAChC,iBAAkB,CAClB,gBAAiB,CACjB,iBAAkB,CAClB,QAAS,CACT,OAAU,CACV,MAAS,CACT,eACF,CAEA,SACE,mDAA6C,CAA7C,2CACF,CAEA,sBACE,sBACF,CAEA,yBACE,cACE,6BAA0B,CAA1B,wBAA0B,CAC1B,eACF,CACF,CACA,yBACE,cACE,6BAA0B,CAA1B,wBACF,CACF,CACA,0BACE,cACE,6BAA0B,CAA1B,wBACF,CACF","file":"main.e4aa6614.chunk.css","sourcesContent":["/*\n! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n box-sizing: border-box;\n /* 1 */\n border-width: 0;\n /* 2 */\n border-style: solid;\n /* 2 */\n border-color: #e5e7eb;\n /* 2 */\n}\n\n::before,\n::after {\n --tw-content: \"\";\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\nhtml {\n line-height: 1.5;\n /* 1 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n -moz-tab-size: 4;\n /* 3 */\n -o-tab-size: 4;\n tab-size: 4;\n /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n margin: 0;\n /* 1 */\n line-height: inherit;\n /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n height: 0;\n /* 1 */\n color: inherit;\n /* 2 */\n border-top-width: 1px;\n /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n text-indent: 0;\n /* 1 */\n border-color: inherit;\n /* 2 */\n border-collapse: collapse;\n /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n font-weight: inherit;\n /* 1 */\n line-height: inherit;\n /* 1 */\n color: inherit;\n /* 1 */\n margin: 0;\n /* 2 */\n padding: 0;\n /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n /* 1 */\n background-color: transparent;\n /* 2 */\n background-image: none;\n /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type=search] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1;\n /* 1 */\n color: #9ca3af;\n /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=button] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block;\n /* 1 */\n vertical-align: middle;\n /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::-webkit-backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.invisible {\n visibility: hidden;\n}\n\n.absolute {\n position: absolute;\n}\n\n.relative {\n position: relative;\n}\n\n.top-0 {\n top: 0px;\n}\n\n.right-0 {\n right: 0px;\n}\n\n.left-0 {\n left: 0px;\n}\n\n.bottom-0 {\n bottom: 0px;\n}\n\n.m-2 {\n margin: 0.5rem;\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.my-auto {\n margin-top: auto;\n margin-bottom: auto;\n}\n\n.my-4 {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.-ml-1 {\n margin-left: -0.25rem;\n}\n\n.mr-3 {\n margin-right: 0.75rem;\n}\n\n.flex {\n display: flex;\n}\n\n.grid {\n display: grid;\n}\n\n.h-full {\n height: 100%;\n}\n\n.h-60 {\n height: 15rem;\n}\n\n.h-6 {\n height: 1.5rem;\n}\n\n.h-96 {\n height: 24rem;\n}\n\n.h-5 {\n height: 1.25rem;\n}\n\n.w-full {\n width: 100%;\n}\n\n.w-6 {\n width: 1.5rem;\n}\n\n.w-5 {\n width: 1.25rem;\n}\n\n@-webkit-keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n.animate-spin {\n -webkit-animation: spin 1s linear infinite;\n animation: spin 1s linear infinite;\n}\n\n.cursor-pointer {\n cursor: pointer;\n}\n\n.grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n\n.place-content-center {\n place-content: center;\n}\n\n.place-items-center {\n place-items: center;\n}\n\n.items-center {\n align-items: center;\n}\n\n.justify-center {\n justify-content: center;\n}\n\n.justify-between {\n justify-content: space-between;\n}\n\n.gap-2 {\n gap: 0.5rem;\n}\n\n.space-x-1 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.25rem * var(--tw-space-x-reverse));\n margin-left: calc(0.25rem * (1 - var(--tw-space-x-reverse)));\n}\n\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n overflow: hidden;\n}\n\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.rounded {\n border-radius: 0.25rem;\n}\n\n.rounded-full {\n border-radius: 9999px;\n}\n\n.rounded-md {\n border-radius: 0.375rem;\n}\n\n.border {\n border-width: 1px;\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255/var(--tw-bg-opacity));\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246/var(--tw-bg-opacity));\n}\n\n.object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.p-4 {\n padding: 1rem;\n}\n\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pt-4 {\n padding-top: 1rem;\n}\n\n.pb-12 {\n padding-bottom: 3rem;\n}\n\n.pl-3 {\n padding-left: 0.75rem;\n}\n\n.pr-3 {\n padding-right: 0.75rem;\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.font-bold {\n font-weight: 700;\n}\n\n.text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99/var(--tw-text-opacity));\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255/var(--tw-text-opacity));\n}\n\n.opacity-25 {\n opacity: 0.25;\n}\n\n.opacity-75 {\n opacity: 0.75;\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.placeholder\\:italic::-moz-placeholder {\n font-style: italic;\n}\n\n.placeholder\\:italic::placeholder {\n font-style: italic;\n}\n\n.hover\\:bg-blue-700:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(29 78 216/var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:ring-1:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));\n}\n\n.group:hover .group-hover\\:visible {\n visibility: visible;\n}\n\n.group:hover .group-hover\\:bg-black\\/20 {\n background-color: rgba(0, 0, 0, 0.2);\n}\n\n@media (min-width: 640px) {\n .sm\\:col-span-2 {\n grid-column: span 2/span 2;\n }\n .sm\\:h-44 {\n height: 11rem;\n }\n .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .sm\\:text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n}\n@media (min-width: 768px) {\n .md\\:col-span-3 {\n grid-column: span 3/span 3;\n }\n .md\\:h-32 {\n height: 8rem;\n }\n .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n}\n.Modal {\n display: none;\n}\n.Modal.active {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n overflow: auto;\n z-index: 300;\n background-color: rgba(51, 51, 51, 0.5333333333);\n display: block;\n}\n.Modal .Card {\n max-width: calc(-120px + 100vw);\n max-height: calc(-119px + 100vh);\n margin-right: auto;\n margin-left: auto;\n position: absolute;\n top: 60px;\n right: 0px;\n left: 0px;\n overflow: hidden;\n}\n\n.spinner {\n animation: spinner 0.75s ease-in-out infinite;\n}\n\n.card:hover .card-img {\n filter: brightness(75%);\n}\n\n@media (min-width: 500px) {\n .card-columns {\n column-count: 1 !important;\n overflow: hidden;\n }\n}\n@media (min-width: 640px) {\n .card-columns {\n column-count: 2 !important;\n }\n}\n@media (min-width: 1100px) {\n .card-columns {\n column-count: 3 !important;\n }\n}\n"]} \ No newline at end of file diff --git a/example/build/static/js/main.8214029d.chunk.js b/example/build/static/js/main.8214029d.chunk.js new file mode 100644 index 0000000..0627abf --- /dev/null +++ b/example/build/static/js/main.8214029d.chunk.js @@ -0,0 +1,2 @@ +(this["webpackJsonpunsplash-image-picker-example"]=this["webpackJsonpunsplash-image-picker-example"]||[]).push([[0],{13:function(e,t,a){},14:function(e,t,a){"use strict";a.r(t);a(8);var n=a(0),r=a.n(n),l=a(4),c=a.n(l),o=a(2),i=(a(13),a(1)),s=a.n(i),u=a(5);var m=["children","className","width","padding","active","setActive"];function d(e){var t=e.children,a=e.width,n=void 0===a?540:a,l=e.padding,c=void 0===l||l,o=e.active,i=void 0!==o&&o,u=e.setActive,d=void 0===u?function(e){}:u,v=function(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n=0||(r[a]=e[a]);return r}(e,m);return r.a.createElement("div",Object.assign({onClick:function(e){d(!i)},onKeyUp:function(e){"Escape"===e.key&&d(!1)},className:s()("Modal",{active:i})},v),r.a.createElement(h,{onClick:function(e){i&&e.stopPropagation()},padding:c,className:"overflow-hidden h-full",style:{maxWidth:n,width:"100%"}},t))}function h(e){var t=e.children,a=e.padding,n=void 0===a||a,l=e.style,c=void 0===l?{}:l,o=e.onClick,i=void 0===o?function(e){}:o;return r.a.createElement("div",{onClick:i,style:c,className:s()("Card rounded shadow bg-white mx-auto my-auto",{"p-4":n})},t)}function v(e){var t=e.photo,a=e.onPhotoSelect,n=void 0===a?function(e){}:a;return r.a.createElement("div",{className:"group relative h-60 sm:h-44 md:h-32 w-full place-items-center object-cover cursor-pointer border theme-border-default",key:t.id,onClick:function(){return n(t)}},r.a.createElement("img",{className:"card-img place-items-center w-full object-cover h-full rounded",src:t.urls.thumb,alt:t.alt_description}),r.a.createElement("div",{className:"absolute top-0 right-0 left-0 bottom-0 invisible group-hover:visible group-hover:bg-black/20",style:{color:"white"}},r.a.createElement("div",{className:"flex space-x-1 items-center place-content-center justify-between m-2"},r.a.createElement("div",{className:"flex items-center space-x-1"},r.a.createElement("img",{className:"rounded-full h-6 w-6",src:t.user.profile_image.small,alt:t.user.username}),r.a.createElement("h6",{className:"text-xs word-breaker"},t.user.name)))))}function p(e){var t=e.isLoading,a=void 0!==t&&t,n=e.isLoadingMore,l=void 0!==n&&n,c=e.photoList,o=e.total,i=e.onPhotoSelect,s=e.loadMore,u=r.a.useMemo((function(){return r.a.createRef()}),[]);return r.a.createElement("div",{className:"Body"},a?r.a.createElement("div",{className:"flex items-center justify-center h-96"},r.a.createElement(f,null)):r.a.createElement("div",null,Array.isArray(c)&&c.length>0&&r.a.createElement("div",{className:"PhotoList grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 overflow-y-auto p-4 pb-12",style:{maxHeight:"700px"},ref:u,onScroll:function(){if(u.current){var e=u.current,t=e.scrollTop;e.scrollHeight-(t+e.clientHeight)<20&&s()}}},c.map((function(e){return r.a.createElement(v,{key:e.id,photo:e,onPhotoSelect:i})})),l&&r.a.createElement("div",{className:"sm:col-span-2 md:col-span-3 my-4 flex justify-center"},r.a.createElement(f,null))),Array.isArray(c)&&0===c.length&&0===o&&r.a.createElement("div",{className:"flex items-center justify-center h-96"},"No photos found"),!o&&r.a.createElement("div",{className:"flex items-center justify-center h-96 text-gray-600"})))}function f(){return r.a.createElement("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-blue",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},r.a.createElement("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r.a.createElement("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}))}function g(e){var t=e.setQuery,a=e.query,n=e.onSearch;return r.a.createElement("div",null,r.a.createElement("div",null,r.a.createElement("form",{onSubmit:function(e){try{return e.preventDefault(),n(a),Promise.resolve()}catch(e){return Promise.reject(e)}},className:"flex items-center space-x-2"},r.a.createElement("label",{className:" w-full"},r.a.createElement("input",{className:"placeholder:italic placeholder:theme-text-subtitle-1 w-full border theme-border-default rounded-md py-2 pl-3 pr-3 focus:outline-none focus:theme-border-primary focus:ring-1 sm:text-sm",placeholder:"Search for an image",type:"text",name:"search",value:a,onChange:function(e){return t(e.target.value)}})),r.a.createElement("span",null,r.a.createElement("button",{className:"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md",type:"submit"},"Search")))))}function y(e){var t=e.unsplashAccessKey,a=e.initialPhotoSearchQuery,n=void 0===a?"":a,l=e.onPhotoSelect,c=void 0===l?function(e){}:l,o=r.a.useState([]),i=o[0],s=o[1],m=r.a.useState(),d=m[0],h=m[1],v=r.a.useState(""),f=v[0],y=v[1],b=r.a.useState(!1),E=b[0],N=b[1],x=r.a.useState(!1),w=x[0],S=x[1],P=r.a.useState(1),k=P[0],A=P[1],j=Object(u.a)({accessKey:t});r.a.useEffect((function(){""!==n&&(y(n),C(1,n))}),[]);var C=function(e,t,a){void 0===a&&(a=!1),E||w||(1===e?N(!0):S(!0),A(e),j.search.getPhotos({page:e,perPage:30,query:t,orientation:"landscape"}).then((function(e){var t,n=null===e||void 0===e||null===(t=e.response)||void 0===t?void 0:t.results;if(n){var r=n;a||(r=[].concat(i,n)),s(r),h(e.response.total)}N(!1),S(!1)})))};return r.a.createElement("div",{className:"ImagePicker items-center bg-white rounded"},r.a.createElement("div",{className:"bg-white "},r.a.createElement("div",{className:"Picker relative h-full rounded"},r.a.createElement("div",{className:"px-4 pt-4 font-bold text-lg bg-white "}," ","Search image"),r.a.createElement("div",{className:"shadow p-4 bg-white"},r.a.createElement("div",{className:""},r.a.createElement(g,{onSearch:function(e){s([]),C(1,e,!0)},query:f,setQuery:y}))),r.a.createElement(p,{total:d,photoList:i,isLoading:E,isLoadingMore:w,loadMore:function(){C(k+1,f)},onPhotoSelect:function(e){try{try{c(e)}catch(t){console.log(t)}return Promise.resolve()}catch(a){return Promise.reject(a)}}}))))}var b=function(e){var t=e.unsplashAccessKey,a=e.active,n=void 0!==a&&a,l=e.initialPhotoSearchQuery,c=void 0===l?"":l,o=e.setActive,i=void 0===o?function(e){}:o,s=e.onPhotoSelect,u=void 0===s?function(e){}:s,m=e.modalWidth,h=void 0===m?840:m,v=e.modalClassName,p=void 0===v?"":v;return n?r.a.createElement("div",{className:""},r.a.createElement(d,{active:n,setActive:i,width:h+"px",padding:!1,className:p},r.a.createElement(y,{unsplashAccessKey:t,initialPhotoSearchQuery:c,onPhotoSelect:u}))):null};function E(e){var t=e.photo;return console.log(t),r.a.createElement("img",{src:t.urls.regular,alt:t.alt_description,className:"sm:h-72 sm:w-full lg:h-52 object-cover rounded border shadow-md"})}var N=function(){var e=r.a.useState(!1),t=Object(o.a)(e,2),a=t[0],n=t[1],l=r.a.useState([]),c=Object(o.a)(l,2),i=c[0],s=c[1];return console.log("dTUBUnPASfrsKOWYzVpAwvkr9Ks2MuY3i5YCvSqAxWQ"),r.a.createElement("div",{className:"App bg-gray-50"},r.a.createElement("button",{className:"button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded p-42 h-12",onClick:function(){n(!0)}},"Search image"),r.a.createElement(b,{unsplashAccessKey:"dTUBUnPASfrsKOWYzVpAwvkr9Ks2MuY3i5YCvSqAxWQ",active:a,setActive:n,initialPhotoSearchQuery:"",onPhotoSelect:function(e){var t=null!==i&&void 0!==i?i:[];t.push(e),s(t),n(!1)}}),r.a.createElement("div",{className:"Gallery"},null===i||void 0===i?void 0:i.map((function(e,t){return r.a.createElement(E,{photo:e,key:t})}))))};c.a.render(r.a.createElement(N,null),document.getElementById("root"))},7:function(e,t,a){e.exports=a(14)},8:function(e,t,a){}},[[7,1,2]]]); +//# sourceMappingURL=main.8214029d.chunk.js.map \ No newline at end of file diff --git a/example/build/static/js/main.8214029d.chunk.js.map b/example/build/static/js/main.8214029d.chunk.js.map new file mode 100644 index 0000000..54f390d --- /dev/null +++ b/example/build/static/js/main.8214029d.chunk.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/component/modal.tsx","../../src/component/picker/photo-card.tsx","../../src/component/picker/photo-list.component.tsx","../../src/component/picker/search-bar.component.tsx","../../src/component/picker/index.tsx","../../src/component/picker-modal/picker-modal.tsx","component/photo.tsx","App.tsx","index.tsx"],"names":["Modal","children","width","_ref$width","padding","_ref$padding","active","_ref$active","setActive","_e","_ref$setActive","props","React","onClick","onKeyUp","e","key","className","cx","Card","stopPropagation","style","maxWidth","_ref2$padding","_ref2$style","_","_ref2$onClick","UnsplashPhotoCard","photo","onPhotoSelect","_ref$onPhotoSelect","id","src","urls","thumb","alt","alt_description","color","user","profile_image","small","username","name","PhotoList","isLoading","_ref$isLoading","isLoadingMore","_ref$isLoadingMore","photoList","total","loadMore","ref","useMemo","createRef","Loader","Array","isArray","length","maxHeight","onScroll","current","scrollTop","scrollHeight","clientHeight","map","xmlns","fill","viewBox","cy","r","stroke","strokeWidth","d","SearchBar","setQuery","query","onSearch","onSubmit","preventDefault","placeholder","type","value","onChange","target","ImagePicker","unsplashAccessKey","initialPhotoSearchQuery","_ref$initialPhotoSear","useState","pics","setPics","setTotal","setIsLoading","setIsLoadingMore","page","setPage","unsplash","createApi","accessKey","useEffect","fetchPhotos","text","reset","search","getPhotos","perPage","orientation","then","response","newPics","_response$response","results","mergedPics","error","console","log","ImagePickerModal","modalWidth","_ref$modalWidth","modalClassName","_ref$modalClassName","Photo","regular","App","photos","setActivePhotos","process","list","push","index","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.8214029d.chunk.js","sourcesContent":["import cx from 'classnames'\nimport React from 'react'\n\nexport default function Modal({\n children,\n className = '',\n width = 540,\n padding = true,\n active = false,\n setActive = function (_e: any) {},\n ...props\n}: any): JSX.Element {\n return (\n {\n if (active) {\n setActive(false)\n } else {\n setActive(true)\n }\n }}\n onKeyUp={(e) => {\n if (e.key === 'Escape') {\n setActive(false)\n }\n }}\n className={cx(`Modal`, {\n active: active\n })}\n {...props}\n >\n {\n // stop the card being closed when we click on inner divs\n if (active) {\n e.stopPropagation()\n }\n }}\n padding={padding}\n className='overflow-hidden h-full'\n style={{ maxWidth: width, width: '100%' }}\n >\n {children}\n \n \n )\n}\n\nfunction Card({\n children,\n padding = true,\n className = '',\n style = {},\n onClick = (_: any) => {}\n}: any): JSX.Element {\n return (\n \n {children}\n \n )\n}\n","import React from 'react'\n\n/**\n * @description PhotoCard component for UnsplashImagePicker\n * @param {Object} photo - The photo to display.\n * @param {funtion} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function UnsplashPhotoCard({\n photo,\n onPhotoSelect = (_: any) => {}\n}: any) {\n return (\n onPhotoSelect(photo)}\n >\n \n \n
\n
\n \n
{photo.user.name}
\n
\n
\n \n \n )\n}\n","import React from 'react'\nimport UnsplashPhotoCard from './photo-card'\n\ninterface Props {\n isLoading?: boolean\n isLoadingMore?: boolean\n photoList: Array\n total?: number | undefined\n onPhotoSelect: (photo: any) => void\n loadMore: () => void\n}\nfunction PhotoList({\n isLoading = false,\n isLoadingMore = false,\n photoList,\n total,\n onPhotoSelect,\n loadMore\n}: Props) {\n const listHeight = '700px' // 'calc(100 - 125px)'\n const ref = React.useMemo(() => React.createRef(), [])\n\n const onScroll = () => {\n if (ref.current) {\n const { scrollTop, scrollHeight, clientHeight } = ref.current\n if (scrollHeight - (scrollTop + clientHeight) < 20) {\n // Contributors list lazy loading you're at the bottom of the page\n // do this when we reach end\n loadMore()\n }\n }\n }\n\n return (\n
\n {isLoading ? (\n
\n \n
\n ) : (\n
\n {Array.isArray(photoList) && photoList.length > 0 && (\n \n {photoList.map((photo: any) => {\n return (\n \n )\n })}\n {isLoadingMore && (\n
\n \n
\n )}\n
\n )}\n {Array.isArray(photoList) &&\n photoList.length === 0 &&\n total === 0 && (\n
\n No photos found\n
\n )}\n {!total && (\n
\n )}\n
\n )}\n
\n )\n}\nfunction Loader() {\n return (\n \n \n \n \n )\n}\nexport default PhotoList\n","import React from 'react'\n\ninterface Props {\n query: string\n setQuery: (query: string) => void\n onSearch: (query: string) => void\n}\nfunction SearchBar({ setQuery, query, onSearch }: Props) {\n const searchPhotos = async (e: any) => {\n e.preventDefault()\n onSearch(query)\n }\n\n return (\n
\n
\n
\n \n \n {/* \n \n
\n
\n
\n )\n}\n\nexport default SearchBar\n","import React from 'react'\nimport { createApi } from 'unsplash-js'\nimport PhotoList from './photo-list.component'\nimport SearchBar from './search-bar.component'\n\ninterface Props {\n unsplashAccessKey: string\n initialPhotoSearchQuery?: string\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePicker search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function ImagePicker({\n unsplashAccessKey,\n initialPhotoSearchQuery = '',\n onPhotoSelect = (_: any) => {}\n}: Props) {\n const [pics, setPics] = React.useState([])\n const [total, setTotal] = React.useState()\n const [query, setQuery] = React.useState('')\n const [isLoading, setIsLoading] = React.useState(false)\n const [isLoadingMore, setIsLoadingMore] = React.useState(false)\n const [page, setPage] = React.useState(1)\n\n const unsplash = createApi({ accessKey: unsplashAccessKey })\n\n React.useEffect(() => {\n if (initialPhotoSearchQuery !== '') {\n setQuery(initialPhotoSearchQuery)\n fetchPhotos(1, initialPhotoSearchQuery)\n }\n }, [])\n\n const fetchPhotos = (page: number, text: string, reset = false) => {\n if (isLoading || isLoadingMore) {\n return\n }\n if (page === 1) {\n setIsLoading(true)\n } else {\n setIsLoadingMore(true)\n }\n setPage(page)\n unsplash.search\n .getPhotos({\n page: page,\n perPage: 30,\n query: text,\n orientation: 'landscape'\n })\n .then((response: any) => {\n const newPics = response?.response?.results\n if (newPics) {\n let mergedPics = newPics\n if (!reset) {\n mergedPics = [...pics, ...newPics]\n }\n setPics(mergedPics)\n setTotal(response.response.total)\n }\n setIsLoading(false)\n setIsLoadingMore(false)\n })\n }\n\n return (\n
\n
\n
\n
\n {' '}\n Search image\n
\n
\n
\n {\n setPics([])\n fetchPhotos(1, query, true)\n }}\n query={query}\n setQuery={setQuery}\n />\n
\n
\n\n {\n fetchPhotos(page + 1, query)\n }}\n onPhotoSelect={async (photo: any) => {\n try {\n // let blob = await fetch(photo.urls.regular).then((r) => r.blob())\n // let image = await URL.createObjectURL(blob)\n onPhotoSelect(photo)\n } catch (error) {\n console.log(error)\n }\n }}\n />\n
\n
\n
\n )\n}\n","import React from 'react'\nimport Modal from '../modal'\nimport ImagePicker from '../picker'\n\ninterface Props {\n unsplashAccessKey: any\n active?: boolean\n modalWidth?: number\n modalClassName?: string\n initialPhotoSearchQuery?: string\n setActive?: (active: boolean) => void\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePickerModal search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {boolean} active - Whether the image picker is active.\n * @param {function} setActive - Function to set the image picker active.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n * @param {number} modalWidth - The width of the modal. Default is 840px.\n * @param {string} modalClassName - The classname for the modal.\n */\nexport default function ImagePickerModal({\n unsplashAccessKey,\n active = false,\n initialPhotoSearchQuery = '',\n setActive = (_: boolean) => {},\n onPhotoSelect = (_: any) => {},\n modalWidth = 840,\n modalClassName = ''\n}: Props) {\n if (!active) {\n return null\n }\n\n return (\n
\n \n \n \n
\n )\n}\n","import React from 'react'\n\nexport default function Photo({ photo }: any) {\n console.log(photo)\n return (\n \n )\n}\n","import React from 'react'\n\nimport 'unsplash-image-picker/dist/index.css'\nimport UnsplashImagePickerModal from 'unsplash-image-picker'\nimport Photo from './component/photo'\n\n// type ControlProps = React.PropsWithChildren<{setVisible: (status: boolean) => void}>\n\nconst App = () => {\n const [active, setActive] = React.useState(false)\n const [photos, setActivePhotos] = React.useState([])\n const unsplashAccessKey = process.env.REACT_APP_UNSPLASH_ACCESS_KEY\n console.log(unsplashAccessKey)\n return (\n
\n {\n setActive(true)\n }}\n >\n Search image\n \n {\n let list = (photos ?? []) as any[]\n list.push(photo)\n setActivePhotos(list)\n setActive(false)\n }}\n />\n {/*
*/}\n
\n {photos?.map((photo: any, index: number) => (\n \n ))}\n
\n {/*
*/}\n
\n )\n}\n\nexport default App\n","import './index.css'\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nReactDOM.render(, document.getElementById('root'))\n"],"sourceRoot":""} \ No newline at end of file diff --git a/example/build/static/js/main.bb7bbf97.chunk.js b/example/build/static/js/main.bb7bbf97.chunk.js deleted file mode 100644 index 4a51cff..0000000 --- a/example/build/static/js/main.bb7bbf97.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonpunsplash-image-picker-example"]=this["webpackJsonpunsplash-image-picker-example"]||[]).push([[0],{13:function(e,t,a){},14:function(e,t,a){"use strict";a.r(t);a(8);var r=a(0),n=a.n(r),l=a(4),c=a.n(l),o=a(2),i=(a(13),a(1)),s=a.n(i),u=a(5);var m=["children","className","width","padding","active","setActive"];function d(e){var t=e.children,a=e.width,r=void 0===a?540:a,l=e.padding,c=void 0===l||l,o=e.active,i=void 0!==o&&o,u=e.setActive,d=void 0===u?function(e){}:u,v=function(e,t){if(null==e)return{};var a,r,n={},l=Object.keys(e);for(r=0;r=0||(n[a]=e[a]);return n}(e,m);return n.a.createElement("div",Object.assign({onClick:function(e){d(!i)},onKeyUp:function(e){"Escape"===e.key&&d(!1)},className:s()("Modal",{active:i})},v),n.a.createElement(h,{onClick:function(e){i&&e.stopPropagation()},padding:c,className:"overflow-hidden h-full",style:{maxWidth:r,width:"100%"}},t))}function h(e){var t=e.children,a=e.padding,r=void 0===a||a,l=e.style,c=void 0===l?{}:l,o=e.onClick,i=void 0===o?function(e){}:o;return n.a.createElement("div",{onClick:i,style:c,className:s()("Card rounded shadow bg-white mx-auto my-auto",{"p-4":r})},t)}function v(e){var t=e.photo,a=e.onPhotoSelect,r=void 0===a?function(e){}:a;return n.a.createElement("div",{className:"group relative h-60 sm:h-44 md:h-32 w-full place-items-center object-cover cursor-pointer border theme-border-default",key:t.id,onClick:function(){return r(t)}},n.a.createElement("img",{className:"card-img place-items-center w-full object-cover h-full rounded",src:t.urls.thumb,alt:t.alt_description}),n.a.createElement("div",{className:"absolute top-0 right-0 left-0 bottom-0 invisible group-hover:visible group-hover:bg-black/20",style:{color:"white"}},n.a.createElement("div",{className:"flex space-x-1 items-center place-content-center justify-between m-2"},n.a.createElement("div",{className:"flex items-center space-x-1"},n.a.createElement("img",{className:"rounded-full h-6 w-6",src:t.user.profile_image.small,alt:t.user.username}),n.a.createElement("h6",{className:"text-xs word-breaker"},t.user.name)))))}function f(e){var t=e.isLoading,a=void 0!==t&&t,r=e.isLoadingMore,l=void 0!==r&&r,c=e.photoList,o=e.total,i=e.onPhotoSelect,s=e.loadMore,u=n.a.useMemo((function(){return n.a.createRef()}),[]);return n.a.createElement("div",{className:"Body"},a?n.a.createElement("div",{className:"flex items-center justify-center h-96"},n.a.createElement(p,null)):n.a.createElement("div",null,Array.isArray(c)&&c.length>0&&n.a.createElement("div",{className:"PhotoList grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 overflow-y-auto p-4 pb-12",style:{maxHeight:"700px"},ref:u,onScroll:function(){if(u.current){var e=u.current,t=e.scrollTop;e.scrollHeight-(t+e.clientHeight)<20&&s()}}},c.map((function(e){return n.a.createElement(v,{key:e.id,photo:e,onPhotoSelect:i})})),l&&n.a.createElement("div",{className:"sm:col-span-2 md:col-span-3 my-4 flex justify-center"},n.a.createElement(p,null))),Array.isArray(c)&&0===c.length&&0===o&&n.a.createElement("div",{className:"flex items-center justify-center h-96"},"No photos found"),!o&&n.a.createElement("div",{className:"flex items-center justify-center h-96 text-gray-600"})))}function p(){return n.a.createElement("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-blue",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},n.a.createElement("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),n.a.createElement("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"}))}function g(e){var t=e.setQuery,a=e.query,r=e.onSearch;return n.a.createElement("div",null,n.a.createElement("div",null,n.a.createElement("form",{onSubmit:function(e){try{return e.preventDefault(),r(a),Promise.resolve()}catch(e){return Promise.reject(e)}},className:"flex items-center space-x-2"},n.a.createElement("label",{className:" w-full"},n.a.createElement("input",{className:"placeholder:italic placeholder:theme-text-subtitle-1 w-full border theme-border-default rounded-md py-2 pl-3 pr-3 focus:outline-none focus:theme-border-primary focus:ring-1 sm:text-sm",placeholder:"Search for an image",type:"text",name:"search",value:a,onChange:function(e){return t(e.target.value)}})),n.a.createElement("span",null,n.a.createElement("button",{className:"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md",type:"submit"},"Search")))))}function y(e){var t=e.unsplashAccessKey,a=e.initialPhotoSearchQuery,r=void 0===a?"":a,l=e.onPhotoSelect,c=void 0===l?function(e){}:l,o=n.a.useState([]),i=o[0],s=o[1],m=n.a.useState(),d=m[0],h=m[1],v=n.a.useState(""),p=v[0],y=v[1],E=n.a.useState(!1),b=E[0],x=E[1],N=n.a.useState(!1),w=N[0],S=N[1],P=n.a.useState(1),k=P[0],A=P[1],j=Object(u.a)({accessKey:t});n.a.useEffect((function(){""!==r&&(y(r),C(1,r))}),[]);var C=function(e,t,a){void 0===a&&(a=!1),b||w||(1===e?x(!0):S(!0),A(e),j.search.getPhotos({page:e,perPage:30,query:t,orientation:"landscape"}).then((function(e){var t,r=null===e||void 0===e||null===(t=e.response)||void 0===t?void 0:t.results;if(r){var n=r;a||(n=[].concat(i,r)),s(n),h(e.response.total)}x(!1),S(!1)})))};return n.a.createElement("div",{className:"ImagePicker items-center bg-white rounded"},n.a.createElement("div",{className:"bg-white "},n.a.createElement("div",{className:"Picker relative h-full rounded"},n.a.createElement("div",{className:"px-4 pt-4 font-bold text-lg bg-white "}," ","Search image"),n.a.createElement("div",{className:"shadow p-4 bg-white"},n.a.createElement("div",{className:""},n.a.createElement(g,{onSearch:function(e){s([]),C(1,e,!0)},query:p,setQuery:y}))),n.a.createElement(f,{total:d,photoList:i,isLoading:b,isLoadingMore:w,loadMore:function(){C(k+1,p)},onPhotoSelect:function(e){try{try{c(e)}catch(t){console.log(t)}return Promise.resolve()}catch(a){return Promise.reject(a)}}}))))}var E=function(e){var t=e.unsplashAccessKey,a=e.active,r=void 0!==a&&a,l=e.initialPhotoSearchQuery,c=void 0===l?"":l,o=e.setActive,i=void 0===o?function(e){}:o,s=e.onPhotoSelect,u=void 0===s?function(e){}:s,m=e.modalWidth,h=void 0===m?840:m,v=e.modalClassName,f=void 0===v?"":v;return r?n.a.createElement("div",{className:""},n.a.createElement(d,{active:r,setActive:i,width:h+"px",padding:!1,className:f},n.a.createElement(y,{unsplashAccessKey:t,initialPhotoSearchQuery:c,onPhotoSelect:u}))):null};function b(e){var t=e.photo;return console.log(t),n.a.createElement("img",{src:t.urls.regular,alt:t.alt_description,className:"sm:h-72 sm:w-full lg:h-52 object-cover rounded border shadow-md"})}var x=function(){var e=n.a.useState(!1),t=Object(o.a)(e,2),a=t[0],r=t[1],l=n.a.useState([]),c=Object(o.a)(l,2),i=c[0],s=c[1];return console.log("dTUBUnPASfrsKOWYzVpAwvkr9Ks2MuY3i5YCvSqAxWQ"),n.a.createElement("div",{className:"App flex flex-col item-start justify-center bg-gray-50"},n.a.createElement("div",{className:"flex flex-col items-center space-y-4 p-4 sm:p-0 "},n.a.createElement("button",{className:"button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded p-42 h-12",onClick:function(){r(!0)}},"Search image"),n.a.createElement(E,{unsplashAccessKey:"dTUBUnPASfrsKOWYzVpAwvkr9Ks2MuY3i5YCvSqAxWQ",active:a,setActive:r,initialPhotoSearchQuery:"",onPhotoSelect:function(e){var t=null!==i&&void 0!==i?i:[];t.push(e),s(t),r(!1)}}),n.a.createElement("div",{className:"grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center overflow-auto"},null===i||void 0===i?void 0:i.map((function(e,t){return n.a.createElement(b,{photo:e,key:t})})))))};c.a.render(n.a.createElement(x,null),document.getElementById("root"))},7:function(e,t,a){e.exports=a(14)},8:function(e,t,a){}},[[7,1,2]]]); -//# sourceMappingURL=main.bb7bbf97.chunk.js.map \ No newline at end of file diff --git a/example/build/static/js/main.bb7bbf97.chunk.js.map b/example/build/static/js/main.bb7bbf97.chunk.js.map deleted file mode 100644 index 3f08f31..0000000 --- a/example/build/static/js/main.bb7bbf97.chunk.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../../src/component/modal.tsx","../../src/component/picker/photo-card.tsx","../../src/component/picker/photo-list.component.tsx","../../src/component/picker/search-bar.component.tsx","../../src/component/picker/index.tsx","../../src/component/picker-modal/picker-modal.tsx","component/photo.tsx","App.tsx","index.tsx"],"names":["Modal","children","width","_ref$width","padding","_ref$padding","active","_ref$active","setActive","_e","_ref$setActive","props","React","onClick","onKeyUp","e","key","className","cx","Card","stopPropagation","style","maxWidth","_ref2$padding","_ref2$style","_","_ref2$onClick","UnsplashPhotoCard","photo","onPhotoSelect","_ref$onPhotoSelect","id","src","urls","thumb","alt","alt_description","color","user","profile_image","small","username","name","PhotoList","isLoading","_ref$isLoading","isLoadingMore","_ref$isLoadingMore","photoList","total","loadMore","ref","useMemo","createRef","Loader","Array","isArray","length","maxHeight","onScroll","current","scrollTop","scrollHeight","clientHeight","map","xmlns","fill","viewBox","cy","r","stroke","strokeWidth","d","SearchBar","setQuery","query","onSearch","onSubmit","preventDefault","placeholder","type","value","onChange","target","ImagePicker","unsplashAccessKey","initialPhotoSearchQuery","_ref$initialPhotoSear","useState","pics","setPics","setTotal","setIsLoading","setIsLoadingMore","page","setPage","unsplash","createApi","accessKey","useEffect","fetchPhotos","text","reset","search","getPhotos","perPage","orientation","then","response","newPics","_response$response","results","mergedPics","error","console","log","ImagePickerModal","modalWidth","_ref$modalWidth","modalClassName","_ref$modalClassName","Photo","regular","App","photos","setActivePhotos","process","list","push","index","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.bb7bbf97.chunk.js","sourcesContent":["import cx from 'classnames'\nimport React from 'react'\n\nexport default function Modal({\n children,\n className = '',\n width = 540,\n padding = true,\n active = false,\n setActive = function (_e: any) {},\n ...props\n}: any): JSX.Element {\n return (\n {\n if (active) {\n setActive(false)\n } else {\n setActive(true)\n }\n }}\n onKeyUp={(e) => {\n if (e.key === 'Escape') {\n setActive(false)\n }\n }}\n className={cx(`Modal`, {\n active: active\n })}\n {...props}\n >\n {\n // stop the card being closed when we click on inner divs\n if (active) {\n e.stopPropagation()\n }\n }}\n padding={padding}\n className='overflow-hidden h-full'\n style={{ maxWidth: width, width: '100%' }}\n >\n {children}\n \n \n )\n}\n\nfunction Card({\n children,\n padding = true,\n className = '',\n style = {},\n onClick = (_: any) => {}\n}: any): JSX.Element {\n return (\n \n {children}\n \n )\n}\n","import React from 'react'\n\n/**\n * @description PhotoCard component for UnsplashImagePicker\n * @param {Object} photo - The photo to display.\n * @param {funtion} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function UnsplashPhotoCard({\n photo,\n onPhotoSelect = (_: any) => {}\n}: any) {\n return (\n onPhotoSelect(photo)}\n >\n \n \n
\n
\n \n
{photo.user.name}
\n
\n
\n \n \n )\n}\n","import React from 'react'\nimport UnsplashPhotoCard from './photo-card'\n\ninterface Props {\n isLoading?: boolean\n isLoadingMore?: boolean\n photoList: Array\n total?: number | undefined\n onPhotoSelect: (photo: any) => void\n loadMore: () => void\n}\nfunction PhotoList({\n isLoading = false,\n isLoadingMore = false,\n photoList,\n total,\n onPhotoSelect,\n loadMore\n}: Props) {\n const listHeight = '700px' // 'calc(100 - 125px)'\n const ref = React.useMemo(() => React.createRef(), [])\n\n const onScroll = () => {\n if (ref.current) {\n const { scrollTop, scrollHeight, clientHeight } = ref.current\n if (scrollHeight - (scrollTop + clientHeight) < 20) {\n // Contributors list lazy loading you're at the bottom of the page\n // do this when we reach end\n loadMore()\n }\n }\n }\n\n return (\n
\n {isLoading ? (\n
\n \n
\n ) : (\n
\n {Array.isArray(photoList) && photoList.length > 0 && (\n \n {photoList.map((photo: any) => {\n return (\n \n )\n })}\n {isLoadingMore && (\n
\n \n
\n )}\n
\n )}\n {Array.isArray(photoList) &&\n photoList.length === 0 &&\n total === 0 && (\n
\n No photos found\n
\n )}\n {!total && (\n
\n )}\n
\n )}\n
\n )\n}\nfunction Loader() {\n return (\n \n \n \n \n )\n}\nexport default PhotoList\n","import React from 'react'\n\ninterface Props {\n query: string\n setQuery: (query: string) => void\n onSearch: (query: string) => void\n}\nfunction SearchBar({ setQuery, query, onSearch }: Props) {\n const searchPhotos = async (e: any) => {\n e.preventDefault()\n onSearch(query)\n }\n\n return (\n
\n
\n
\n \n \n {/* \n \n
\n
\n
\n )\n}\n\nexport default SearchBar\n","import React from 'react'\nimport { createApi } from 'unsplash-js'\nimport PhotoList from './photo-list.component'\nimport SearchBar from './search-bar.component'\n\ninterface Props {\n unsplashAccessKey: string\n initialPhotoSearchQuery?: string\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePicker search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n */\nexport default function ImagePicker({\n unsplashAccessKey,\n initialPhotoSearchQuery = '',\n onPhotoSelect = (_: any) => {}\n}: Props) {\n const [pics, setPics] = React.useState([])\n const [total, setTotal] = React.useState()\n const [query, setQuery] = React.useState('')\n const [isLoading, setIsLoading] = React.useState(false)\n const [isLoadingMore, setIsLoadingMore] = React.useState(false)\n const [page, setPage] = React.useState(1)\n\n const unsplash = createApi({ accessKey: unsplashAccessKey })\n\n React.useEffect(() => {\n if (initialPhotoSearchQuery !== '') {\n setQuery(initialPhotoSearchQuery)\n fetchPhotos(1, initialPhotoSearchQuery)\n }\n }, [])\n\n const fetchPhotos = (page: number, text: string, reset = false) => {\n if (isLoading || isLoadingMore) {\n return\n }\n if (page === 1) {\n setIsLoading(true)\n } else {\n setIsLoadingMore(true)\n }\n setPage(page)\n unsplash.search\n .getPhotos({\n page: page,\n perPage: 30,\n query: text,\n orientation: 'landscape'\n })\n .then((response: any) => {\n const newPics = response?.response?.results\n if (newPics) {\n let mergedPics = newPics\n if (!reset) {\n mergedPics = [...pics, ...newPics]\n }\n setPics(mergedPics)\n setTotal(response.response.total)\n }\n setIsLoading(false)\n setIsLoadingMore(false)\n })\n }\n\n return (\n
\n
\n
\n
\n {' '}\n Search image\n
\n
\n
\n {\n setPics([])\n fetchPhotos(1, query, true)\n }}\n query={query}\n setQuery={setQuery}\n />\n
\n
\n\n {\n fetchPhotos(page + 1, query)\n }}\n onPhotoSelect={async (photo: any) => {\n try {\n // let blob = await fetch(photo.urls.regular).then((r) => r.blob())\n // let image = await URL.createObjectURL(blob)\n onPhotoSelect(photo)\n } catch (error) {\n console.log(error)\n }\n }}\n />\n
\n
\n
\n )\n}\n","import React from 'react'\nimport Modal from '../modal'\nimport ImagePicker from '../picker'\n\ninterface Props {\n unsplashAccessKey: any\n active?: boolean\n modalWidth?: number\n modalClassName?: string\n initialPhotoSearchQuery?: string\n setActive?: (active: boolean) => void\n onPhotoSelect?: (photo: any) => void\n}\n\n/**\n * @description ImagePickerModal search image from Unsplash.\n * @param {string} unsplashAccessKey - The unsplash access key.\n * @param {string} initialPhotoSearchQuery - The initial search query.\n * @param {boolean} active - Whether the image picker is active.\n * @param {function} setActive - Function to set the image picker active.\n * @param {function} onPhotoSelect - Function to call when a photo is selected.\n * @param {number} modalWidth - The width of the modal. Default is 840px.\n * @param {string} modalClassName - The classname for the modal.\n */\nexport default function ImagePickerModal({\n unsplashAccessKey,\n active = false,\n initialPhotoSearchQuery = '',\n setActive = (_: boolean) => {},\n onPhotoSelect = (_: any) => {},\n modalWidth = 840,\n modalClassName = ''\n}: Props) {\n if (!active) {\n return null\n }\n\n return (\n
\n \n \n \n
\n )\n}\n","import React from 'react'\n\nexport default function Photo({ photo }: any) {\n console.log(photo)\n return (\n \n )\n}\n","import React from 'react'\n\nimport 'unsplash-image-picker/dist/index.css'\nimport UnsplashImagePickerModal from 'unsplash-image-picker'\nimport Photo from './component/photo'\n\n// type ControlProps = React.PropsWithChildren<{setVisible: (status: boolean) => void}>\n\nconst App = () => {\n const [active, setActive] = React.useState(false)\n const [photos, setActivePhotos] = React.useState([])\n const unsplashAccessKey = process.env.REACT_APP_UNSPLASH_ACCESS_KEY\n console.log(unsplashAccessKey)\n return (\n
\n
\n {\n setActive(true)\n }}\n >\n Search image\n \n {\n let list = (photos ?? []) as any[]\n list.push(photo)\n setActivePhotos(list)\n setActive(false)\n }}\n />\n
\n {photos?.map((photo: any, index: number) => (\n \n ))}\n
\n
\n
\n )\n}\n\nexport default App\n","import './index.css'\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nReactDOM.render(, document.getElementById('root'))\n"],"sourceRoot":""} \ No newline at end of file diff --git a/example/src/App.tsx b/example/src/App.tsx index 7c0af3b..ffcc489 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -12,34 +12,34 @@ const App = () => { const unsplashAccessKey = process.env.REACT_APP_UNSPLASH_ACCESS_KEY console.log(unsplashAccessKey) return ( -
-
- - { - let list = (photos ?? []) as any[] - list.push(photo) - setActivePhotos(list) - setActive(false) - }} - /> -
- {photos?.map((photo: any, index: number) => ( - - ))} -
+
+ + { + let list = (photos ?? []) as any[] + list.push(photo) + setActivePhotos(list) + setActive(false) + }} + /> + {/*
*/} +
+ {photos?.map((photo: any, index: number) => ( + + ))}
+ {/*
*/}
) } diff --git a/example/src/index.css b/example/src/index.css index 9f2eaf3..f688f39 100644 --- a/example/src/index.css +++ b/example/src/index.css @@ -10,10 +10,48 @@ body { } .App{ - height: 100vh; + height: 100vh; + display: flex; + margin: auto; + align-content: space-around; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + overflow-y: auto; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.Gallery { + column-count: 4; + max-width: 1000px; + margin: 10px auto; + overflow-y: auto; + max-height: calc(100vh - 150px); +} + +.Gallery>img { + flex: 100%; + margin-top: 1rem; + border-radius: 5px; +} + +@media only screen and (max-width: 700px) { + .Gallery { + column-count: 3; + margin: 1rem; + overflow-y: auto; + } +} + +@media only screen and (max-width: 400px) { + .Gallery { + column-count: 1; + padding: 0 auto; + overflow-y: auto; + } +} \ No newline at end of file