diff --git a/404.html b/404.html index a35dc0556..43719be76 100644 --- a/404.html +++ b/404.html @@ -4,8 +4,8 @@ Page Not Found | @modern-kit - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

diff --git a/assets/js/087cca41.0273fdad.js b/assets/js/087cca41.0273fdad.js deleted file mode 100644 index 4084f8e5b..000000000 --- a/assets/js/087cca41.0273fdad.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 087cca41.0273fdad.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4947],{5189:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useLocalStorage",c={id:"react/hooks/useLocalStorage",title:"useLocalStorage",description:"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useLocalStorage.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useKeyDown",permalink:"/modern-kit/docs/react/hooks/useKeyDown"},next:{title:"useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,removeState:a}=(0,o._)({key:"test",initialValue:"default"});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["state: ",t]}),(0,i.jsx)(e.button,{onClick:()=>n("foo"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>n("bar"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>a(),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"uselocalstorage",children:"useLocalStorage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,i.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,i.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,i.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,i.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useLocalStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseLocalStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseLocalStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseLocalStorageProps =\n | UseLocalStorageWithoutInitialValueProps\n | UseLocalStorageWithInitialValueProps;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useLocalStorage({\n key,\n initialValue,\n}: UseLocalStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useLocalStorage({\n key,\n}: UseLocalStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useLocalStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>ze,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ve,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>De,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var L=NaN,I=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,P=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return L;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||R.test(e)?P(e.slice(2),n?2:8):I.test(e)?L:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function D(){return"undefined"==typeof window}function Y(){return!D()}function W(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!K(e[o],t[o],n))return!1;return!0},K=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!K(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function J(e,t){return K(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(D())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Le="modern-kit-session-storage",Ie={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Le,subscribe:e=>{window.addEventListener(Le,e)},unsubscribe:e=>{window.removeEventListener(Le,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Le))}}},_e=e=>Ie[e],Re=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),Me=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Me,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ve(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,Ue=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,Ue)}}function Xe(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function De(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ke=_e("sessionStorage"),Je=e=>window.sessionStorage.getItem(e),Ze=e=>(Ke.subscribe(e),()=>{Ke.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Je(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Je(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",L="LG",I="Microsoft",_="Motorola",R="Opera",P="Samsung",M="Sharp",z="Sony",A="Xiaomi",$="Zebra",V="Facebook",F="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?D(e,500):e,this},this.setUA(v),this};K.VERSION="1.0.38",K.BROWSER=q([u,b,c]),K.CPU=q([w]),K.DEVICE=q([l,f,d,p,m,v,h,g,y]),K.ENGINE=K.OS=q([u,b]),e.exports&&(t=e.exports=K),t.UAParser=K;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new K;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/087cca41.5f025cfe.js b/assets/js/087cca41.5f025cfe.js new file mode 100644 index 000000000..d3e1e8c51 --- /dev/null +++ b/assets/js/087cca41.5f025cfe.js @@ -0,0 +1,2 @@ +/*! For license information please see 087cca41.5f025cfe.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4947],{5189:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useLocalStorage",c={id:"react/hooks/useLocalStorage",title:"useLocalStorage",description:"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useLocalStorage.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useKeyDown",permalink:"/modern-kit/docs/react/hooks/useKeyDown"},next:{title:"useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,removeState:a}=(0,o._)({key:"test",initialValue:"default"});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["state: ",t]}),(0,i.jsx)(e.button,{onClick:()=>n("foo"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>n("bar"),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>a(),children:'\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"uselocalstorage",children:"useLocalStorage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,i.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,i.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,i.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,i.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useLocalStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useLocalStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseLocalStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseLocalStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseLocalStorageProps =\n | UseLocalStorageWithoutInitialValueProps\n | UseLocalStorageWithInitialValueProps;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useLocalStorage({\n key,\n initialValue,\n}: UseLocalStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useLocalStorage({\n key,\n}: UseLocalStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useLocalStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useLocalStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Le,_:()=>$e,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>qe,jr:()=>Oe,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Te,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var L=NaN,I=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,_=/^0o[0-7]+$/i,P=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return L;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||_.test(e)?P(e.slice(2),n?2:8):I.test(e)?L:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(M(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!K(e[o],t[o],n))return!1;return!0},K=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!K(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function J(e,t){return K(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Le(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ie="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>_e[e],Me=Pe("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ve=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Ve(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Be=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Be)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ke=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ke(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ke(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ke(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ke(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",L="LG",I="Microsoft",R="Motorola",_="Opera",P="Samsung",M="Sharp",z="Sony",A="Xiaomi",$="Zebra",V="Facebook",F="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,F).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(g),this};K.VERSION="1.0.38",K.BROWSER=q([u,f,c]),K.CPU=q([w]),K.DEVICE=q([l,b,d,p,m,g,h,v,y]),K.ENGINE=K.OS=q([u,f]),e.exports&&(t=e.exports=K),t.UAParser=K;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new K;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/087cca41.0273fdad.js.LICENSE.txt b/assets/js/087cca41.5f025cfe.js.LICENSE.txt similarity index 100% rename from assets/js/087cca41.0273fdad.js.LICENSE.txt rename to assets/js/087cca41.5f025cfe.js.LICENSE.txt diff --git a/assets/js/0ed4549e.0876bc68.js b/assets/js/0ed4549e.0876bc68.js new file mode 100644 index 000000000..3c8433e2d --- /dev/null +++ b/assets/js/0ed4549e.0876bc68.js @@ -0,0 +1,2 @@ +/*! For license information please see 0ed4549e.0876bc68.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7567],{3424:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useSessionStorage",c={id:"react/hooks/useSessionStorage",title:"useSessionStorage",description:"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useSessionStorage.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo"},next:{title:"useStep",permalink:"/modern-kit/docs/react/hooks/useStep"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,removeState:a}=(0,o.Xs)({key:"test",initialValue:"default"});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["state: ",t]}),(0,i.jsx)(e.button,{onClick:()=>n("foo"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>n("bar"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>a(),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usesessionstorage",children:"useSessionStorage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,i.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,i.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,i.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,i.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useSessionStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseSessionStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseSessionStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseSessionStorageProps =\n | UseSessionStorageWithoutInitialValueProps\n | UseSessionStorageWithInitialValueProps;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useSessionStorage({\n key,\n initialValue,\n}: UseSessionStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useSessionStorage({\n key,\n}: UseSessionStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useSessionStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>ke,D9:()=>De,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>Se,XI:()=>Ne,Xs:()=>nt,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>qe,jr:()=>Oe,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>We,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Te,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,S=Object.prototype.toString,k="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:k:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return S.call(e)}(e)}(e)==C}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?I:+e}var A=function(){return m.Date.now()},$="Expected a function",L=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function W(){return!Y()}function D(e){return q(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=W()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function Se(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ke(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Pe={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Me=e=>Pe[e],ze=Me("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ve=(e,t)=>W()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Ve(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Be=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Be)}}function We(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",S="Apple",k="ASUS",j="BlackBerry",E="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",z="Sharp",A="Sony",$="Xiaomi",L="Zebra",V="Facebook",F="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,W.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,W.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,F).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=q([u,f,c]),J.CPU=q([w]),J.DEVICE=q([l,b,d,p,m,g,h,v,y]),J.ENGINE=J.OS=q([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/0ed4549e.4a698591.js.LICENSE.txt b/assets/js/0ed4549e.0876bc68.js.LICENSE.txt similarity index 100% rename from assets/js/0ed4549e.4a698591.js.LICENSE.txt rename to assets/js/0ed4549e.0876bc68.js.LICENSE.txt diff --git a/assets/js/0ed4549e.4a698591.js b/assets/js/0ed4549e.4a698591.js deleted file mode 100644 index 0072e0eae..000000000 --- a/assets/js/0ed4549e.4a698591.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 0ed4549e.4a698591.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7567],{3424:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useSessionStorage",c={id:"react/hooks/useSessionStorage",title:"useSessionStorage",description:"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useSessionStorage.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo"},next:{title:"useStep",permalink:"/modern-kit/docs/react/hooks/useStep"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,removeState:a}=(0,o.Xs)({key:"test",initialValue:"default"});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["state: ",t]}),(0,i.jsx)(e.button,{onClick:()=>n("foo"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "foo"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>n("bar"),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key\uc5d0 "bar"\ub370\uc774\ud130 \uc800\uc7a5'}),(0,i.jsx)(e.button,{onClick:()=>a(),children:'\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 "test"key \uc81c\uac70'})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usesessionstorage",children:"useSessionStorage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"React v18"}),"\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore"})})," \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 ",(0,i.jsx)(t.code,{children:"key"})," \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uc5d0 \uad6c\ub3c5\ud558\uace0\uc790 \ud558\ub294 ",(0,i.jsx)(t.code,{children:"key"}),"\uac00 \uc5c6\uc744 \uacbd\uc6b0 \ubc18\ud658\ud560 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\ub85c \ucd08\uae30\uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub610\ud55c, ",(0,i.jsx)(t.code,{children:"\uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)"}),"\uc758 \uacbd\uc6b0 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\uac00 \ub3d9\uc791\ud558\uc9c0 \uc54a\uae30 \ub54c\ubb38\uc5d0 ",(0,i.jsx)(t.code,{children:"initialValue"}),"\uac00 \ubc18\ud658\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"setState"}),"\ub294 \uac12 \uc790\uccb4\ub97c \ub118\uae38 \uc218 \uc788\uc73c\uba70, \ud568\uc218\ub3c4 \ub118\uae38 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud568\uc218\ub85c \ud65c\uc6a9 \uc2dc\uc5d0 \uc778\uc790\ub85c state\ub97c \uac00\uc838\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: [1, 2],\n});\n\nsetState([1, 2, 3]);\nsetState(state => [...state, 3]);\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsxs)(t.p,{children:["initialValue\ub97c \ub118\uaca8\uc8fc\uba74 \ub354\uc6b1 ",(0,i.jsx)(t.code,{children:"\uba85\ud655\ud55c \ud0c0\uc785 \ucd94\ub860"}),"\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n});\n\nstate; // number[] | null\nsetState(state => {\n state; // number[] | null\n});\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"const { state, setState } = useSessionStorage({\n key: 'test',\n initialValue: [],\n});\n\nstate; // number[]\nsetState(state => {\n state; // number[]\n});\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useSessionStorage/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseSessionStorageWithoutInitialValueProps {\n key: string;\n}\n\ninterface UseSessionStorageWithInitialValueProps {\n key: string;\n initialValue: T | (() => T);\n}\n\ntype UseSessionStorageProps =\n | UseSessionStorageWithoutInitialValueProps\n | UseSessionStorageWithInitialValueProps;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useSessionStorage({\n key,\n initialValue,\n}: UseSessionStorageWithInitialValueProps): {\n state: T;\n setState: Dispatch>;\n removeState: () => void;\n};\n\nfunction useSessionStorage({\n key,\n}: UseSessionStorageWithoutInitialValueProps): {\n state: T | null;\n setState: Dispatch>;\n removeState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useSessionStorage } from '@modern-kit/react';\n\nconst Example = () => {\n const { state, setState, removeState } = useSessionStorage({\n key: 'test',\n initialValue: 'default',\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc5d0\uc11c \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0\ub97c \ud655\uc778\ud574\ubcf4\uc138\uc694!

\n

state: {state}

\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>Se,iP:()=>st,ii:()=>Ve,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>ke});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,S=Object.prototype.toString,k="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:k:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return S.call(e)}(e)}(e)==C}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?I:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Se({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function ke(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Se({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Ie="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},_e=e=>Re[e],Pe=_e("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ve(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,Ue=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,Ue)}}function Xe(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Se(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",S="Apple",k="ASUS",j="BlackBerry",E="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",z="Sharp",L="Sony",A="Xiaomi",$="Zebra",V="Facebook",F="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,b,c]),J.CPU=q([w]),J.DEVICE=q([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=q([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.5a991913.js b/assets/js/11738f66.5a991913.js deleted file mode 100644 index ddbad85f1..000000000 --- a/assets/js/11738f66.5a991913.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 11738f66.5a991913.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4949],{1937:(e,t,n)=>{n.r(t),n.d(t,{ResizeObserver:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="useResizeObserver",c={id:"react/hooks/useResizeObserver",title:"useResizeObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useResizeObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious"},next:{title:"useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock"}},l={},u=()=>{const e={br:"br",div:"div",...(0,i.a)()},{ref:t,contentRect:n}=(0,o.yU)((e=>{console.log("resize",e)}));return(0,r.jsxs)(e.div,{ref:t,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,r.jsx)(e.br,{}),`width: ${n.width}, height: ${n.height}`]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"useresizeobserver",children:"useResizeObserver"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useResizeObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"/*\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action?: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>De,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Re,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ce,z$:()=>Se});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>f()?(0,r.jsx)(r.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,R=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var z=NaN,N=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return z;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}(e);var n=_.test(e);return n||M.test(e)?I(e.slice(2),n?2:8):N.test(e)?z:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&r?b(e):(r=i=void 0,a)}function h(){var e=L(),n=w(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(P(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function X(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function H(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return G(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,i.useState)(!1),p=!b,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,i.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,i.useRef)(null),n=ne(e);return(0,i.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",r=({target:e})=>{const r=t.current;r&&!r.contains(e)&&n(r)};return document.addEventListener(e,r),()=>{document.removeEventListener(e,r)}}),[n]),{ref:t}}(s);return(0,r.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?i.useLayoutEffect:i.useEffect;(0,i.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield D(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function Ce(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",ze="modern-kit-session-storage",Ne={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:ze,subscribe:e=>{window.addEventListener(ze,e)},unsubscribe:e=>{window.removeEventListener(ze,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(ze))}}},_e=e=>Ne[e],Me=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Pe=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Pe,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ie(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,r]=(0,i.useState)($e(e,t));return(0,i.useEffect)((()=>{const t=window.matchMedia(e),n=e=>r(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,r=a-t.top,i=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=r,u.elementPositionX=i,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,qe,Ue)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+He(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+He(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+He(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+He(c.width,r.width,s)}};function Ge(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=We(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ke(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function nt(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var rt={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",R="Google",T="Huawei",z="LG",N="Microsoft",_="Motorola",M="Opera",I="Samsung",P="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[b]=r,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[b]=r,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(rt,rt.exports);var it=rt.exports;function ot(){const[e,t]=(0,i.useState)(null);return pe((()=>{const e=new it.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[r,o]=(0,i.useState)({width:null,height:null}),a=(0,i.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,i.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),r}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.d527c8f6.js b/assets/js/11738f66.d527c8f6.js new file mode 100644 index 000000000..79cd4fb8e --- /dev/null +++ b/assets/js/11738f66.d527c8f6.js @@ -0,0 +1,2 @@ +/*! For license information please see 11738f66.d527c8f6.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4949],{1937:(e,t,n)=>{n.r(t),n.d(t,{ResizeObserver:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useResizeObserver",c={id:"react/hooks/useResizeObserver",title:"useResizeObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useResizeObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious"},next:{title:"useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock"}},l={},u=()=>{const e={br:"br",div:"div",...(0,r.a)()},{ref:t,contentRect:n}=(0,o.yU)((e=>{console.log("resize",e)}));return(0,i.jsxs)(e.div,{ref:t,style:{width:"100%",height:"400px",background:"#439966",fontSize:"2rem",color:"#fff"},children:["\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,i.jsx)(e.br,{}),`width: ${n.width}, height: ${n.height}`]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useresizeobserver",children:"useResizeObserver"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useResizeObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"/*\n * type ContentRect = {\n readonly bottom: number;\n readonly height: number;\n readonly left: number;\n readonly right: number;\n readonly top: number;\n readonly width: number;\n readonly x: number;\n readonly y: number;\n }\n */\ntype ContentRect = Omit;\n\nconst useResizeObserver: (\n action?: (entry: ResizeObserverEntry) => void\n) => {\n ref: React.RefObject;\n contentRect: ContentRect;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { forwardRef, useRef } from 'react';\nimport { useResizeObserver } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, contentRect } = useResizeObserver((entry) => {\n console.log('resize', entry);\n });\n\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n height: '400px', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n \n \ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n {`width: ${contentRect.width}, height: ${contentRect.height}`}\n \n );\n};\n"})}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver API"})}),"\n"]})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Xe,jr:()=>Re,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,R=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,z=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}(e);var n=_.test(e);return n||M.test(e)?I(e.slice(2),n?2:8):z.test(e)?N:+e}var $=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(L);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(P(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Re(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const ze="modern-kit-local-storage",_e="modern-kit-session-storage",Me={localStorage:{key:ze,subscribe:e=>{window.addEventListener(ze,e)},unsubscribe:e=>{window.removeEventListener(ze,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(ze))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Me[e],Pe=Ie("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",R="Google",T="Huawei",N="LG",z="Microsoft",_="Motorola",M="Opera",I="Samsung",P="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/11738f66.5a991913.js.LICENSE.txt b/assets/js/11738f66.d527c8f6.js.LICENSE.txt similarity index 100% rename from assets/js/11738f66.5a991913.js.LICENSE.txt rename to assets/js/11738f66.d527c8f6.js.LICENSE.txt diff --git a/assets/js/13c37bf4.e7da0452.js b/assets/js/13c37bf4.e7da0452.js new file mode 100644 index 000000000..e94fb7bf7 --- /dev/null +++ b/assets/js/13c37bf4.e7da0452.js @@ -0,0 +1,2 @@ +/*! For license information please see 13c37bf4.e7da0452.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6656],{7230:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="ClientOnly",c={id:"react/components/ClientOnly",title:"ClientOnly",description:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.",source:"@site/docs/react/components/ClientOnly.mdx",sourceDirName:"react/components",slug:"/react/components/ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AspectRatio",permalink:"/modern-kit/docs/react/components/AspectRatio"},next:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"}},l={},u=()=>{const e={div:"div",...(0,r.a)()};return(0,i.jsx)(o.qx,{fallback:(0,i.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4."}),children:(0,i.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4."})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"clientonly",children:"ClientOnly"})}),"\n",(0,i.jsx)(t.p,{children:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"SSR"})," \ud658\uacbd\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub9c8\uc6b4\ud2b8\ub418\uae30 \uc804\uacfc \ud6c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\ub8e8\uae30 \uc704\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/ClientOnly/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface ClientOnlyProps {\n fallback?: JSX.Element;\n}\n\nconst ClientOnly: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { ClientOnly } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4.}>\n
mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
\n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var A=function(){return m.Date.now()},$="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",A="Sony",$="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/13c37bf4.ea548641.js.LICENSE.txt b/assets/js/13c37bf4.e7da0452.js.LICENSE.txt similarity index 100% rename from assets/js/13c37bf4.ea548641.js.LICENSE.txt rename to assets/js/13c37bf4.e7da0452.js.LICENSE.txt diff --git a/assets/js/13c37bf4.ea548641.js b/assets/js/13c37bf4.ea548641.js deleted file mode 100644 index 7db12ed30..000000000 --- a/assets/js/13c37bf4.ea548641.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 13c37bf4.ea548641.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6656],{7230:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="ClientOnly",c={id:"react/components/ClientOnly",title:"ClientOnly",description:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.",source:"@site/docs/react/components/ClientOnly.mdx",sourceDirName:"react/components",slug:"/react/components/ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"AspectRatio",permalink:"/modern-kit/docs/react/components/AspectRatio"},next:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"}},l={},u=()=>{const e={div:"div",...(0,r.a)()};return(0,i.jsx)(o.qx,{fallback:(0,i.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4."}),children:(0,i.jsx)(e.div,{children:"mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4."})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"clientonly",children:"ClientOnly"})}),"\n",(0,i.jsx)(t.p,{children:"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4."}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"SSR"})," \ud658\uacbd\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 \ub9c8\uc6b4\ud2b8\ub418\uae30 \uc804\uacfc \ud6c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\ub8e8\uae30 \uc704\ud574 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/ClientOnly/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface ClientOnlyProps {\n fallback?: JSX.Element;\n}\n\nconst ClientOnly: ({\n fallback = <>\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { ClientOnly } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n mount\uac00 \uc644\ub8cc\ub418\uae30 \uc804\uc785\ub2c8\ub2e4.}>\n
mount\uac00 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
\n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/1c2388cf.8c60ec2a.js b/assets/js/1c2388cf.8c60ec2a.js deleted file mode 100644 index c70f6b69e..000000000 --- a/assets/js/1c2388cf.8c60ec2a.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 1c2388cf.8c60ec2a.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7840],{8154:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="SeparatedIterator",c={id:"react/components/SeparatedIterator",title:"SeparatedIterator",description:"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/SeparatedIterator.mdx",sourceDirName:"react/components",slug:"/react/components/SeparatedIterator",permalink:"/modern-kit/docs/react/components/SeparatedIterator",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"},next:{title:"SwitchCase",permalink:"/modern-kit/docs/react/components/SwithCase"}},l={},u=()=>{const e={div:"div",h3:"h3",...(0,i.a)()};return(0,r.jsx)(o.xu,{items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,r.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]}),separator:(0,r.jsx)(e.div,{style:{height:"3px",backgroundColor:"gray"}})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"separatediterator",children:"SeparatedIterator"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Iterator",children:"Iterator"}),"\ub97c \ud655\uc7a5\ud574 ",(0,r.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,r.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 ",(0,r.jsx)(t.code,{children:"\uad6c\ubd84\uc790(Separator)"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc758 ",(0,r.jsx)(t.code,{children:"Separator"}),"\ub294 \uc81c\uc678\ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, ",(0,r.jsx)(t.code,{children:"includeLastSeparator"}),"\ub97c ",(0,r.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["\ub610\ud55c, ",(0,r.jsx)(t.code,{children:"separatorInterval"}),"\ub97c \ud65c\uc6a9\ud574 \ud2b9\uc815 ",(0,r.jsx)(t.code,{children:"\uac04\uaca9"})," \ub9cc\ud07c Separator\ub97c \ub80c\ub354\ub9c1 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SeparatedIterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SeparatedIteratorProps extends IteratorProps {\n separator: JSX.Element;\n separatorInterval?: number; // default: 1\n includeLastSeparator?: boolean; // default: false\n}\n\nconst SeparatedIterator: ({\n itemKey,\n items,\n separator,\n renderItem,\n separatorInterval,\n includeLastSeparator,\n}: SeparatedIteratorProps) => JSX.Element;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SeparatedIterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n separator={
}\n />\n );\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Ie,Xs:()=>Qe,Yz:()=>Oe,_:()=>ze,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>He,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>je,z$:()=>Se});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>f()?(0,r.jsx)(r.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var z=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&r?b(e):(r=i=void 0,a)}function h(){var e=z(),n=p(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=L(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(L(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function B(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const H=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return H(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,i.useState)(!1),w=!b,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})};const pe=(0,i.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,i.useRef)(null),n=ne(e);return(0,i.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",r=({target:e})=>{const r=t.current;r&&!r.contains(e)&&n(r)};return document.addEventListener(e,r),()=>{document.removeEventListener(e,r)}}),[n]),{ref:t}}(s);return(0,r.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=D()?i.useLayoutEffect:i.useEffect;(0,i.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function je(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Re=e=>_e[e],Me=Re("localStorage"),Pe=e=>window.localStorage.getItem(e),Le=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Le,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Pe(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,r]=(0,i.useState)($e(e,t));return(0,i.useEffect)((()=>{const t=window.matchMedia(e),n=e=>r(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,r=a-t.top,i=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=r,u.elementPositionX=i,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+We(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+We(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+We(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+We(c.width,r.width,s)}};function He(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=Ge(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Re("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ke(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function nt(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var rt={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",L="Sharp",z="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([p]),J.DEVICE=B([l,f,d,w,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(rt,rt.exports);var it=rt.exports;function ot(){const[e,t]=(0,i.useState)(null);return we((()=>{const e=new it.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[r,o]=(0,i.useState)({width:null,height:null}),a=(0,i.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,i.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),r}}}]); \ No newline at end of file diff --git a/assets/js/1c2388cf.e377e934.js b/assets/js/1c2388cf.e377e934.js new file mode 100644 index 000000000..0af1a1d8e --- /dev/null +++ b/assets/js/1c2388cf.e377e934.js @@ -0,0 +1,2 @@ +/*! For license information please see 1c2388cf.e377e934.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7840],{8154:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="SeparatedIterator",c={id:"react/components/SeparatedIterator",title:"SeparatedIterator",description:"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/SeparatedIterator.mdx",sourceDirName:"react/components",slug:"/react/components/SeparatedIterator",permalink:"/modern-kit/docs/react/components/SeparatedIterator",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"},next:{title:"SwitchCase",permalink:"/modern-kit/docs/react/components/SwithCase"}},l={},u=()=>{const e={div:"div",h3:"h3",...(0,i.a)()};return(0,r.jsx)(o.xu,{items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,r.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]}),separator:(0,r.jsx)(e.div,{style:{height:"3px",backgroundColor:"gray"}})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"separatediterator",children:"SeparatedIterator"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/Iterator",children:"Iterator"}),"\ub97c \ud655\uc7a5\ud574 ",(0,r.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,r.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 ",(0,r.jsx)(t.code,{children:"\uad6c\ubd84\uc790(Separator)"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c \ub9c8\uc9c0\ub9c9 \uc694\uc18c\uc758 ",(0,r.jsx)(t.code,{children:"Separator"}),"\ub294 \uc81c\uc678\ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, ",(0,r.jsx)(t.code,{children:"includeLastSeparator"}),"\ub97c ",(0,r.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 \ud3ec\ud568\uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["\ub610\ud55c, ",(0,r.jsx)(t.code,{children:"separatorInterval"}),"\ub97c \ud65c\uc6a9\ud574 \ud2b9\uc815 ",(0,r.jsx)(t.code,{children:"\uac04\uaca9"})," \ub9cc\ud07c Separator\ub97c \ub80c\ub354\ub9c1 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SeparatedIterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface SeparatedIteratorProps extends IteratorProps {\n separator: JSX.Element;\n separatorInterval?: number; // default: 1\n includeLastSeparator?: boolean; // default: false\n}\n\nconst SeparatedIterator: ({\n itemKey,\n items,\n separator,\n renderItem,\n separatorInterval,\n includeLastSeparator,\n}: SeparatedIteratorProps) => JSX.Element;\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SeparatedIterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n separator={
}\n />\n );\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>rt,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>we,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>it,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Ie,z$:()=>Ce});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>f()?(0,r.jsx)(r.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=L();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&r?b(e):(r=i=void 0,a)}function h(){var e=L(),n=p(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return G(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,i.useState)(!1),w=!b,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})},pe=D()?i.useLayoutEffect:i.useEffect;function we(e,t,n,r={}){const i=ie(r),o=ne(n);pe((()=>{if(e)return e.addEventListener(t,o,i),()=>{e.removeEventListener(t,o,i)}}),[t,e,i,o])}function me(e){const t=(0,i.useRef)(null),n=(0,i.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),r=(0,i.useCallback)((({target:n})=>{const r=t.current;r&&!r.contains(n)&&e(r)}),[e]);return we(window.document,n,r),t}const he=(0,i.forwardRef)(((e,t)=>{var{as:n,children:i,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,r.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:i}))}));(0,i.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function Ce(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function Ie(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>Me[e],ze=Pe("localStorage"),Le=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)($e,(()=>Le(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Le(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,r]=(0,i.useState)(Fe(e,t)),o=(0,i.useCallback)((e=>r(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)(Xe),r=(0,i.useCallback)((t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return we(window.document,"mousemove",r),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+Je(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+Je(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+Je(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+Je(c.width,r.width,s)}};function Ze(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=Ke(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=et(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function rt(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function it(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function ot(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([p]),J.DEVICE=B([l,f,d,w,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,i.useState)(null);return pe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,i.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),r=oe(n,e),o=(0,i.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/1c2388cf.8c60ec2a.js.LICENSE.txt b/assets/js/1c2388cf.e377e934.js.LICENSE.txt similarity index 100% rename from assets/js/1c2388cf.8c60ec2a.js.LICENSE.txt rename to assets/js/1c2388cf.e377e934.js.LICENSE.txt diff --git a/assets/js/1ebcacad.a17bdb3b.js b/assets/js/1ebcacad.a17bdb3b.js new file mode 100644 index 000000000..e5993f1f2 --- /dev/null +++ b/assets/js/1ebcacad.a17bdb3b.js @@ -0,0 +1,2 @@ +/*! For license information please see 1ebcacad.a17bdb3b.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6088],{2056:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);n(7800);const a={},s="useStepState",c={id:"react/hooks/useStepState",title:"useStepState",description:"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useStepState.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useStep",permalink:"/modern-kit/docs/react/hooks/useStep"},next:{title:"useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,clearState:a,currentStep:s,goToNextStep:c,goToPrevStep:l}=(0,o.A)({maxStep:2,initialState:{name:""},storageOptions:{key:"stepState",type:"sessionStorage"}}),u={width:"300px",height:"120px",fontSize:"21px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{l((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"foo"})}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{c((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"bar"})}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:a,children:"\uc0c1\ud0dc \ucd08\uae30\ud654"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["currentStep: ",s]}),(0,i.jsxs)(e.p,{children:["state: ",JSON.stringify(t)]})]}),(0,i.jsxs)(e.div,{children:[1===s&&(0,i.jsx)(e.div,{style:{...u,backgroundColor:"red"},children:"1\ubc88 Step Box"}),2===s&&(0,i.jsx)(e.div,{style:{...u,backgroundColor:"green"},children:"2\ubc88 Step Box"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Best Practice",id:"best-practice",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usestepstate",children:"useStepState"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useStep",children:"useStep"})})," \uc744 \ud655\uc7a5\ud574 ",(0,i.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,i.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 ",(0,i.jsx)(t.code,{children:"\ub0b4\ubd80 \uc0c1\ud0dc"}),"\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"storageOptions"}),"\ub97c \ud65c\uc6a9\ud574 ",(0,i.jsx)(t.code,{children:"setState"})," \uc2dc\uc5d0 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud1a0\ub9ac\uc9c0(",(0,i.jsx)(t.code,{children:"sessionStorage"}),", ",(0,i.jsx)(t.code,{children:"localStorage"}),")\uc5d0 \uc0c1\ud0dc\ub97c \uc800\uc7a5 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"clearState"}),"\ub294 state\ub97c ",(0,i.jsx)(t.code,{children:"null"}),"\ub85c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"storageOptions"}),"\uac00 \uc788\uc744 \uacbd\uc6b0 \ud574\ub2f9 ",(0,i.jsx)(t.code,{children:"options"}),"\uc5d0 \ub300\uc751\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \ub370\uc774\ud130\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStepState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface StorageOptions {\n key: string;\n type: 'localStorage' | 'sessionStorage';\n}\n\ninterface UseStepWithInitialState extends UseStepProps {\n initialState: T;\n storageOptions?: StorageOptions;\n}\n\ninterface UseStepWithoutInitialState extends UseStepProps {\n storageOptions?: StorageOptions;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nexport function useStepState({\n initialState,\n ...props\n}: UseStepWithInitialState): ReturnType & {\n readonly state: T;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n\nexport function useStepState(props: UseStepWithoutInitialState): ReturnType<\n typeof useStep\n> & {\n readonly state: T | null;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStepState } from '@modern-kit/react';\n\nexport const Example = () => {\n const { state, setState, clearState, currentStep, goToNextStep, goToPrevStep } =\n useStepState({\n maxStep: 2,\n initialState: { name: '' },\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'bar' });\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'foo' });\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n
\n
\n

currentStep: {currentStep}

\n

state: {JSON.stringify(state)}

\n
\n
\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"best-practice",children:"Best Practice"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\ube0c\ub77c\uc6b0\uc800 \uc0c8\ub85c\uace0\uce68 \uc2dc \uc0c1\ud0dc\ub97c \uc801\uc808\ud558\uac8c \uc720\uc9c0\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,i.jsx)(t.code,{children:"queryString"}),"\uacfc ",(0,i.jsx)(t.code,{children:"react-router-dom"}),"\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"import { useStepState } from '@modern-kit/react';\nimport { useNavigate } from 'react-router-dom'\nimport qs from 'query-string'\n\nconst Example = () => {\n const parsedStorage = JSON.parse(sessionStorage.getItem('stepState'));\n const parsedQuery = qs.parse(location.search);\n\n const navigate = useNavigate();\n\n const { state, setState, goToNextStep, goToPrevStep } = useStepState({\n maxStep: 5,\n initialState: parsedStorage,\n initialStep: parsedQuery.step,\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n // ...\n return (\n // ...\n );\n};\n"})})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>fe,Cf:()=>ke,D9:()=>De,FS:()=>ct,GN:()=>Ee,Hk:()=>xe,KS:()=>ot,LN:()=>Ye,Mm:()=>Se,Nr:()=>oe,OR:()=>we,Pr:()=>He,S1:()=>se,VP:()=>ye,XI:()=>Ne,Xs:()=>nt,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>pe,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Ue,jr:()=>Oe,my:()=>me,nA:()=>ve,oM:()=>d,oz:()=>We,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>Ge,yn:()=>Te,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,h=b||w||Function("return this")(),m=h.Symbol,g=Object.prototype,v=g.hasOwnProperty,x=g.toString,S=m?m.toStringTag:void 0,y=Object.prototype.toString,k="[object Null]",j="[object Undefined]",C=m?m.toStringTag:void 0;var E="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,P=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,_=/^0o[0-7]+$/i,M=parseInt;function $(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:k:C&&C in Object(e)?function(e){var t=v.call(e,S),n=e[S];try{e[S]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[S]=n:delete e[S]),r}(e):function(e){return y.call(e)}(e)}(e)==E}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||_.test(e)?M(e.slice(2),n?2:8):P.test(e)?I:+e}var z=function(){return h.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(b(e))return h(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function h(e){return s=void 0,p&&i?f(e):(i=r=void 0,a)}function m(){var e=z(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=$(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L($(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h(z())},m}var B="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function W(){return!Y()}function D(e){return U(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,b]=(0,r.useState)(!1),w=!f,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:g},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},be=W()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);be((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function Se(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ke(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:f,resetStep:b}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){be((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Pe="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Me=e=>_e[e],$e=Me("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>($e.subscribe(e),()=>{$e.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),$e.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),$e.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>W()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Be={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ue(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Be),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,p=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,p=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ve)}}function We(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ge(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return be((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!W())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",f="version",b="architecture",w="console",h="mobile",m="tablet",g="smarttv",v="wearable",x="embedded",S="Amazon",y="Apple",k="ASUS",j="BlackBerry",C="Browser",E="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",P="Microsoft",R="Motorola",_="Opera",M="Samsung",$="Sharp",z="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",B="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,W.call(e,g,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,W.call(e,g,x.os),S&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=U([u,f,c]),J.CPU=U([b]),J.DEVICE=U([l,p,d,w,h,g,m,v,x]),J.ENGINE=J.OS=U([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return be((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){be((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/1ebcacad.e3fd493c.js.LICENSE.txt b/assets/js/1ebcacad.a17bdb3b.js.LICENSE.txt similarity index 100% rename from assets/js/1ebcacad.e3fd493c.js.LICENSE.txt rename to assets/js/1ebcacad.a17bdb3b.js.LICENSE.txt diff --git a/assets/js/1ebcacad.e3fd493c.js b/assets/js/1ebcacad.e3fd493c.js deleted file mode 100644 index cb4e7cf14..000000000 --- a/assets/js/1ebcacad.e3fd493c.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 1ebcacad.e3fd493c.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6088],{2056:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);n(7800);const a={},s="useStepState",c={id:"react/hooks/useStepState",title:"useStepState",description:"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useStepState.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useStep",permalink:"/modern-kit/docs/react/hooks/useStep"},next:{title:"useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{state:t,setState:n,clearState:a,currentStep:s,goToNextStep:c,goToPrevStep:l}=(0,o.A)({maxStep:2,initialState:{name:""},storageOptions:{key:"stepState",type:"sessionStorage"}}),u={width:"300px",height:"120px",fontSize:"21px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{l((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"foo"})}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{c((({prevStep:e,nextStep:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`),n({name:"bar"})}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:a,children:"\uc0c1\ud0dc \ucd08\uae30\ud654"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["currentStep: ",s]}),(0,i.jsxs)(e.p,{children:["state: ",JSON.stringify(t)]})]}),(0,i.jsxs)(e.div,{children:[1===s&&(0,i.jsx)(e.div,{style:{...u,backgroundColor:"red"},children:"1\ubc88 Step Box"}),2===s&&(0,i.jsx)(e.div,{style:{...u,backgroundColor:"green"},children:"2\ubc88 Step Box"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Best Practice",id:"best-practice",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usestepstate",children:"useStepState"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useStep",children:"useStep"})})," \uc744 \ud655\uc7a5\ud574 ",(0,i.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,i.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 ",(0,i.jsx)(t.code,{children:"\ub0b4\ubd80 \uc0c1\ud0dc"}),"\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"storageOptions"}),"\ub97c \ud65c\uc6a9\ud574 ",(0,i.jsx)(t.code,{children:"setState"})," \uc2dc\uc5d0 \ube0c\ub77c\uc6b0\uc800 \uc2a4\ud1a0\ub9ac\uc9c0(",(0,i.jsx)(t.code,{children:"sessionStorage"}),", ",(0,i.jsx)(t.code,{children:"localStorage"}),")\uc5d0 \uc0c1\ud0dc\ub97c \uc800\uc7a5 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"clearState"}),"\ub294 state\ub97c ",(0,i.jsx)(t.code,{children:"null"}),"\ub85c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"storageOptions"}),"\uac00 \uc788\uc744 \uacbd\uc6b0 \ud574\ub2f9 ",(0,i.jsx)(t.code,{children:"options"}),"\uc5d0 \ub300\uc751\ud558\ub294 \uc2a4\ud1a0\ub9ac\uc9c0 \ub370\uc774\ud130\ub97c \uc81c\uac70\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStepState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface StorageOptions {\n key: string;\n type: 'localStorage' | 'sessionStorage';\n}\n\ninterface UseStepWithInitialState extends UseStepProps {\n initialState: T;\n storageOptions?: StorageOptions;\n}\n\ninterface UseStepWithoutInitialState extends UseStepProps {\n storageOptions?: StorageOptions;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nexport function useStepState({\n initialState,\n ...props\n}: UseStepWithInitialState): ReturnType & {\n readonly state: T;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n\nexport function useStepState(props: UseStepWithoutInitialState): ReturnType<\n typeof useStep\n> & {\n readonly state: T | null;\n readonly setState: (newState: SetStateAction) => void;\n readonly clearState: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStepState } from '@modern-kit/react';\n\nexport const Example = () => {\n const { state, setState, clearState, currentStep, goToNextStep, goToPrevStep } =\n useStepState({\n maxStep: 2,\n initialState: { name: '' },\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'bar' });\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prevStep, nextStep }) => {\n console.log(`${prevStep}\uc5d0\uc11c ${nextStep}\ub85c \uc774\ub3d9`);\n setState({ name: 'foo' });\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n
\n
\n

currentStep: {currentStep}

\n

state: {JSON.stringify(state)}

\n
\n
\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"best-practice",children:"Best Practice"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\ube0c\ub77c\uc6b0\uc800 \uc0c8\ub85c\uace0\uce68 \uc2dc \uc0c1\ud0dc\ub97c \uc801\uc808\ud558\uac8c \uc720\uc9c0\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,i.jsx)(t.code,{children:"queryString"}),"\uacfc ",(0,i.jsx)(t.code,{children:"react-router-dom"}),"\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"import { useStepState } from '@modern-kit/react';\nimport { useNavigate } from 'react-router-dom'\nimport qs from 'query-string'\n\nconst Example = () => {\n const parsedStorage = JSON.parse(sessionStorage.getItem('stepState'));\n const parsedQuery = qs.parse(location.search);\n\n const navigate = useNavigate();\n\n const { state, setState, goToNextStep, goToPrevStep } = useStepState({\n maxStep: 5,\n initialState: parsedStorage,\n initialStep: parsedQuery.step,\n storageOptions: { key: 'stepState', type: 'sessionStorage' },\n });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToNextStep(({ nextStep }) => {\n setState({\n /* ... */\n });\n navigate(`/test?step=${nextStep}`);\n });\n };\n\n // ...\n return (\n // ...\n );\n};\n"})})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>Se,D9:()=>Ve,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>Ue,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>xe,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>ze,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>pe,fB:()=>tt,g4:()=>ye,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>be,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>He,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>ke});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=b||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,S=h?h.toStringTag:void 0,y=Object.prototype.toString,k="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,P=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,M=parseInt;function $(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:k:E&&E in Object(e)?function(e){var t=g.call(e,S),n=e[S];try{e[S]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[S]=n:delete e[S]),r}(e):function(e){return y.call(e)}(e)}(e)==C}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||R.test(e)?M(e.slice(2),n?2:8):P.test(e)?I:+e}var z=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError(L);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(b(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,p&&i?f(e):(i=r=void 0,a)}function h(){var e=z(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=$(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A($(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var B="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,b]=(0,r.useState)(!1),w=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const be=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ye({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:f,resetStep:b}}function ke(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ye({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Ie="modern-kit-session-storage",Pe={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},_e=e=>Pe[e],Re=_e("localStorage"),Me=e=>window.localStorage.getItem(e),$e=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)(Le(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Be=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Be)}}function Xe(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function He(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ge(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ye(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",f="version",b="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",S="Amazon",y="Apple",k="ASUS",j="BlackBerry",E="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",P="Microsoft",_="Motorola",R="Opera",M="Samsung",$="Sharp",z="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",B="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.os),S&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,f,c]),J.CPU=U([b]),J.DEVICE=U([l,p,d,w,m,v,h,g,x]),J.ENGINE=J.OS=U([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/225c6dfe.5643584e.js b/assets/js/225c6dfe.5643584e.js new file mode 100644 index 000000000..83673d8d9 --- /dev/null +++ b/assets/js/225c6dfe.5643584e.js @@ -0,0 +1,2 @@ +/*! For license information please see 225c6dfe.5643584e.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9287],{2870:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>l,default:()=>w,frontMatter:()=>c,metadata:()=>u,toc:()=>b});var i=n(1986),r=n(9937),o=n(7800),a=n(384),s=n(5549);const c={},l="useMouse",u={id:"react/hooks/useMouse",title:"useMouse",description:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMouse.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMouse",permalink:"/modern-kit/docs/react/hooks/useMouse",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"},next:{title:"useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork"}},d={},f=()=>{const e={div:"div",p:"p",...(0,r.a)()},{ref:t,position:n}=(0,a.ii)(),s=(0,o.useMemo)((()=>({display:"flex",alignItems:"center",justifyContent:"center",width:"500px",height:"500px",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.div,{ref:t,style:s,children:"\ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694."}),(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: ",n.screenX]}),(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: ",n.screenY]}),(0,i.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: ",n.clientX]}),(0,i.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: ",n.clientY]}),(0,i.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: ",n.pageX]}),(0,i.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: ",n.pageY]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: ",n.elementRelativeX]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: ",n.elementRelativeY]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : ",n.elementPositionX]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : ",n.elementPositionY]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usemouse",children:"useMouse"})}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)(t.p,{children:"\ud604\uc7ac \uc2a4\ud06c\ub9b0\uc5d0\uc11c\uc758 \uc704\uce58, \uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4\uc758 \uc704\uce58, \uc804\uccb4 \ubb38\uc11c\uc5d0\uc11c\uc758 \uc704\uce58, \ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 \uc704\uce58, \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4."}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc0c1\ub300\uc801\uc778 \uc704\uce58\uc640 \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub294 \uc81c\uacf5\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMouse/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface CursorPosition {\n screenX: number | null;\n screenY: number | null;\n clientX: number | null;\n clientY: number | null;\n pageX: number | null;\n pageY: number | null;\n elementRelativeX: number | null;\n elementRelativeY: number | null;\n elementPositionX: number | null;\n elementPositionY: number | null;\n}\n\nfunction useMouse(): {\n ref: React.RefObject;\n position: CursorPosition;\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMouse } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, position } = useMouse();\n const boxStyle = useMemo(() => {\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '500px', \n height: '500px',\n background: '#439966',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n <>\n
\n \ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694.\n
\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: {position.screenX}

\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: {position.screenY}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: {position.clientX}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: {position.clientY}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: {position.pageX}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: {position.pageY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: {position.elementRelativeX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: {position.elementRelativeY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : {position.elementPositionX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : {position.elementPositionY}

\n

\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(s.Z,{children:()=>(0,i.jsx)(f,{})})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>He,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>we,Pr:()=>Ze,S1:()=>se,VP:()=>ke,XI:()=>Me,Xs:()=>nt,Yz:()=>Ne,_:()=>$e,a9:()=>ue,ac:()=>Ae,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>qe,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ke,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Oe,z$:()=>je});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function M(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function X(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(M(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=M(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var Y=function(){return m.Date.now()},z="Expected a function",$=Math.max,L=Math.min;function A(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(z);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=Y();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=Y(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=X(t)||0,M(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(X(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(Y())},h}var F="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function H(e){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const Z=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return Z(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return Z(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>A(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},pe=D()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);pe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=K(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Me({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Ie={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Pe=e=>Ie[e],Xe=Pe("localStorage"),Ye=e=>window.localStorage.getItem(e),ze=e=>(Xe.subscribe(e),()=>{Xe.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Ye(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ye(t),r=n?te(n):i,o=K(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Xe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Xe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Fe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Fe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,Ue)}}function De(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function He(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ze({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Ke(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=K(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=K(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(F);return M(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),A(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",T="Google",M="Huawei",N="LG",R="Microsoft",_="Motorola",I="Opera",P="Samsung",X="Sharp",Y="Sony",z="Xiaomi",$="Zebra",L="Facebook",A="Chromium OS",F="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,A).replace(/macos/i,F)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};G.VERSION="1.0.38",G.BROWSER=q([u,b,c]),G.CPU=q([p]),G.DEVICE=q([l,f,d,w,m,v,h,g,y]),G.ENGINE=G.OS=q([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/225c6dfe.abb4e92d.js.LICENSE.txt b/assets/js/225c6dfe.5643584e.js.LICENSE.txt similarity index 100% rename from assets/js/225c6dfe.abb4e92d.js.LICENSE.txt rename to assets/js/225c6dfe.5643584e.js.LICENSE.txt diff --git a/assets/js/225c6dfe.abb4e92d.js b/assets/js/225c6dfe.abb4e92d.js deleted file mode 100644 index 6215fdb7e..000000000 --- a/assets/js/225c6dfe.abb4e92d.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 225c6dfe.abb4e92d.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9287],{2870:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="useMouse",l={id:"react/hooks/useMouse",title:"useMouse",description:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMouse.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMouse",permalink:"/modern-kit/docs/react/hooks/useMouse",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"},next:{title:"useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork"}},u={},d=()=>{const e={div:"div",p:"p",...(0,r.a)()},{ref:t,position:n}=(0,a.ii)(),s=(0,o.useMemo)((()=>({display:"flex",alignItems:"center",justifyContent:"center",width:"500px",height:"500px",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.div,{ref:t,style:s,children:"\ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694."}),(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: ",n.screenX]}),(0,i.jsxs)(e.p,{children:["\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: ",n.screenY]}),(0,i.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: ",n.clientX]}),(0,i.jsxs)(e.p,{children:["\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: ",n.clientY]}),(0,i.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: ",n.pageX]}),(0,i.jsxs)(e.p,{children:["\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: ",n.pageY]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: ",n.elementRelativeX]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: ",n.elementRelativeY]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : ",n.elementPositionX]}),(0,i.jsxs)(e.p,{children:["\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : ",n.elementPositionY]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usemouse",children:"useMouse"})}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)(t.p,{children:"\ud604\uc7ac \uc2a4\ud06c\ub9b0\uc5d0\uc11c\uc758 \uc704\uce58, \uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4\uc758 \uc704\uce58, \uc804\uccb4 \ubb38\uc11c\uc5d0\uc11c\uc758 \uc704\uce58, \ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 \uc704\uce58, \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4."}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc0c1\ub300\uc801\uc778 \uc704\uce58\uc640 \ud574\ub2f9 \uc5d8\ub9ac\uba3c\ud2b8\uc758 \uc704\uce58\ub294 \uc81c\uacf5\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMouse/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface CursorPosition {\n screenX?: number;\n screenY?: number;\n clientX?: number;\n clientY?: number;\n pageX?: number;\n pageY?: number;\n elementRelativeX?: number;\n elementRelativeY?: number;\n elementPositionX?: number;\n elementPositionY?: number;\n}\n\nconst useMouse: () => {\n targetRef: T,\n position: CursorPosition:\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMouse } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, position } = useMouse();\n const boxStyle = useMemo(() => {\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '500px', \n height: '500px',\n background: '#439966',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n <>\n
\n \ub9c8\uc6b0\uc2a4\ub97c \uc6c0\uc9c1\uc5ec\ubcf4\uc138\uc694.\n
\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 X\uc88c\ud45c: {position.screenX}

\n

\uc0ac\uc6a9\uc790 \ubaa8\ub2c8\ud130 \ub0b4 Y\uc88c\ud45c: {position.screenY}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 X\uc88c\ud45c: {position.clientX}

\n

\uc2a4\ud06c\ub9b0 \uc601\uc5ed \ub0b4 Y\uc88c\ud45c: {position.clientY}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 X\uc88c\ud45c: {position.pageX}

\n

\uc804\uccb4 \ubb38\uc11c \uae30\uc900 Y\uc88c\ud45c: {position.pageY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 X\uc88c\ud45c: {position.elementRelativeX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8 \uae30\uc900 Y\uc88c\ud45c: {position.elementRelativeY}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 X\uc88c\ud45c : {position.elementPositionX}

\n

\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\uc758 Y\uc88c\ud45c : {position.elementPositionY}

\n

\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ue,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>ze,a9:()=>ue,ac:()=>Le,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>$e,jr:()=>Ce,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function M(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function X(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(M(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=M(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var z=function(){return m.Date.now()},Y="Expected a function",L=Math.max,$=Math.min;function A(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(Y);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?$(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=X(t)||0,M(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(X(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var F="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function H(e){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>A(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const pe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Me="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Me,subscribe:e=>{window.addEventListener(Me,e)},unsubscribe:e=>{window.removeEventListener(Me,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Me))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Ie=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),Xe=e=>(Ie.subscribe(e),()=>{Ie.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Xe,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ye=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Le(e,t){const[n,i]=(0,r.useState)(Ye(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function $e(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Ae=()=>navigator.onLine,Fe=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ae,Fe)}}function Be(){return Le("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+He(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+He(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+He(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+He(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(F);return M(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),A(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",T="Google",M="Huawei",N="LG",R="Microsoft",_="Motorola",I="Opera",P="Samsung",X="Sharp",z="Sony",Y="Xiaomi",L="Zebra",$="Facebook",A="Chromium OS",F="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,A).replace(/macos/i,F)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,b,c]),J.CPU=q([p]),J.DEVICE=q([l,f,d,w,m,v,h,g,y]),J.ENGINE=J.OS=q([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/24c74d07.0164b733.js b/assets/js/24c74d07.0164b733.js new file mode 100644 index 000000000..6aa55ca46 --- /dev/null +++ b/assets/js/24c74d07.0164b733.js @@ -0,0 +1,2 @@ +/*! For license information please see 24c74d07.0164b733.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[39],{172:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="FallbackLazyImage",c={id:"react/components/FallbackLazyImage",title:"FallbackLazyImage",description:"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/FallbackLazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"},next:{title:"IfElse",permalink:"/modern-kit/docs/react/components/IfElse"}},l={},u=()=>{const e={div:"div",...(0,r.a)()},t={width:"500px",height:"500px",backgroundColor:"green"};return(0,i.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Wrapper Styling: css",id:"wrapper-styling-css",level:3},{value:"Wrapper Styling: css-in-js",id:"wrapper-styling-css-in-js",level:3},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"fallbacklazyimage",children:"FallbackLazyImage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/LazyImage",children:"LazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 ",(0,i.jsx)(t.code,{children:"load \uc5ec\ubd80"}),"\uc5d0 \ub530\ub978 ",(0,i.jsx)(t.code,{children:"Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"src"}),"\uc640 \ub354\ubd88\uc5b4 ",(0,i.jsx)(t.code,{children:"width"}),", ",(0,i.jsx)(t.code,{children:"height"}),", ",(0,i.jsx)(t.code,{children:"fallback"})," props\ub97c \ud544\uc218\ub85c \ub118\uaca8\uc918\uc57c \ud558\uba70, fallback\uc758 \ud06c\uae30\ub294 \ud574\ub2f9 width, height\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucd94\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"duration"})," props\ub294 \uc2e4\uc81c \uc774\ubbf8\uc9c0\uac00 load \ub41c \ud6c4, fallback \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc2e4\uc81c \uc774\ubbf8\uc9c0\ub85c \uc804\ud658 \ub420 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",children:"transition-duration"})})," \uac12\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/FallbackLazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescrpt"',children:"interface FallbackLazyImageProps extends LazyImageProps {\n fallback: JSX.Element;\n width: string | number;\n height: string | number;\n duration?: CSSProperties['transitionDuration']; // default: 0.2s\n}\n\nconst FallbackLazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { FallbackLazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const skeletonStyle = useMemo(\n () => ({\n width: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n height: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n backgroundColor: 'green',\n }),\n []\n );\n return (\n
\n }\n width={400}\n height={400}\n src={img1}\n alt=\"img1\"\n />\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"wrapper-styling-css",children:"Wrapper Styling: css"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub0b4 ",(0,i.jsx)(t.code,{children:"Image Wrapper"}),"\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"lazy-image-wrapper"})," \ud074\ub798\uc2a4\ub97c \uac16\uc2b5\ub2c8\ub2e4. \ud574\ub2f9 \ud074\ub798\uc2a4\ub97c \ud65c\uc6a9\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-css",children:"/* css stylesheet */\n.lazy-image-wrapper {\n border-radius: 12px;\n overflow: hidden;\n}\n\n.lazy-image-wrapper > img {\n /* image styling */\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,i.jsx)(t.h3,{id:"wrapper-styling-css-in-js",children:"Wrapper Styling: css-in-js"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"css-in-js"}),"\uc758 ",(0,i.jsx)(t.code,{children:"\uc0c1\uc18d"}),"\uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"const Image = styled(FallbackLazyImage)`\n border-radius: 12px;\n overflow: hidden;\n\n & > img {\n /* image styling */\n }\n`;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>Ye,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>We,Mm:()=>xe,Nr:()=>oe,OR:()=>we,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>ze,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>Ve,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Ie,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var z=NaN,N=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,L=/^0o[0-7]+$/i,_=parseInt;function F(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return z;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||L.test(e)?_(e.slice(2),n?2:8):N.test(e)?z:+e}var M=function(){return m.Date.now()},P="Expected a function",A=Math.max,$=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(P);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=M();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?$(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=M(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=F(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(F(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(M())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function W(){return"undefined"==typeof window}function V(){return!W()}function Y(e){return B(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,r.useState)(!1),w=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},pe=V()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);pe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(W())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield D(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:p}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ie(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function ze(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",Le={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},_e=e=>Le[e],Fe=_e("localStorage"),Me=e=>window.localStorage.getItem(e),Pe=e=>(Fe.subscribe(e),()=>{Fe.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Pe,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Fe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Fe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)($e(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,De=()=>!0;function We({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,De)}}function Ve(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=_e("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",p="architecture",w="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",I="Firefox",O="Google",T="Huawei",z="LG",N="Microsoft",R="Motorola",L="Opera",_="Samsung",F="Sharp",M="Sony",P="Xiaomi",A="Zebra",$="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,V.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,V.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?W(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([p]),J.DEVICE=B([l,b,d,w,m,g,h,v,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>W()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/24c74d07.270bb37d.js.LICENSE.txt b/assets/js/24c74d07.0164b733.js.LICENSE.txt similarity index 100% rename from assets/js/24c74d07.270bb37d.js.LICENSE.txt rename to assets/js/24c74d07.0164b733.js.LICENSE.txt diff --git a/assets/js/24c74d07.270bb37d.js b/assets/js/24c74d07.270bb37d.js deleted file mode 100644 index 3f4563d52..000000000 --- a/assets/js/24c74d07.270bb37d.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 24c74d07.270bb37d.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[39],{172:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="FallbackLazyImage",c={id:"react/components/FallbackLazyImage",title:"FallbackLazyImage",description:"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/FallbackLazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper"},next:{title:"IfElse",permalink:"/modern-kit/docs/react/components/IfElse"}},l={},u=()=>{const e={div:"div",...(0,r.a)()},t={width:"500px",height:"500px",backgroundColor:"green"};return(0,i.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.a9,{fallback:(0,i.jsx)(e.div,{style:t}),src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Wrapper Styling: css",id:"wrapper-styling-css",level:3},{value:"Wrapper Styling: css-in-js",id:"wrapper-styling-css-in-js",level:3},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"fallbacklazyimage",children:"FallbackLazyImage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/LazyImage",children:"LazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 ",(0,i.jsx)(t.code,{children:"load \uc5ec\ubd80"}),"\uc5d0 \ub530\ub978 ",(0,i.jsx)(t.code,{children:"Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"src"}),"\uc640 \ub354\ubd88\uc5b4 ",(0,i.jsx)(t.code,{children:"width"}),", ",(0,i.jsx)(t.code,{children:"height"}),", ",(0,i.jsx)(t.code,{children:"fallback"})," props\ub97c \ud544\uc218\ub85c \ub118\uaca8\uc918\uc57c \ud558\uba70, fallback\uc758 \ud06c\uae30\ub294 \ud574\ub2f9 width, height\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucd94\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"duration"})," props\ub294 \uc2e4\uc81c \uc774\ubbf8\uc9c0\uac00 load \ub41c \ud6c4, fallback \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc2e4\uc81c \uc774\ubbf8\uc9c0\ub85c \uc804\ud658 \ub420 \ub54c \uc0ac\uc6a9\ud558\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration",children:"transition-duration"})})," \uac12\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/FallbackLazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescrpt"',children:"interface FallbackLazyImageProps extends LazyImageProps {\n fallback: JSX.Element;\n width: string | number;\n height: string | number;\n duration?: CSSProperties['transitionDuration']; // default: 0.2s\n}\n\nconst FallbackLazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { FallbackLazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\n\nconst Example = () => {\n const skeletonStyle = useMemo(\n () => ({\n width: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n height: '400px', // \uc2e4\uc81c img \ud06c\uae30\uc640 \ub3d9\uc77c\ud558\uac8c \ub9de\ucdb0\uc8fc\uc138\uc694.\n backgroundColor: 'green',\n }),\n []\n );\n return (\n
\n }\n width={400}\n height={400}\n src={img1}\n alt=\"img1\"\n />\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"wrapper-styling-css",children:"Wrapper Styling: css"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub0b4 ",(0,i.jsx)(t.code,{children:"Image Wrapper"}),"\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"lazy-image-wrapper"})," \ud074\ub798\uc2a4\ub97c \uac16\uc2b5\ub2c8\ub2e4. \ud574\ub2f9 \ud074\ub798\uc2a4\ub97c \ud65c\uc6a9\ud558\uc5ec \uc2a4\ud0c0\uc77c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-css",children:"/* css stylesheet */\n.lazy-image-wrapper {\n border-radius: 12px;\n overflow: hidden;\n}\n\n.lazy-image-wrapper > img {\n /* image styling */\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,i.jsx)(t.h3,{id:"wrapper-styling-css-in-js",children:"Wrapper Styling: css-in-js"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"css-in-js"}),"\uc758 ",(0,i.jsx)(t.code,{children:"\uc0c1\uc18d"}),"\uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"const Image = styled(FallbackLazyImage)`\n border-radius: 12px;\n overflow: hidden;\n\n & > img {\n /* image styling */\n }\n`;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>De,FS:()=>ot,GN:()=>je,Hk:()=>ge,KS:()=>nt,LN:()=>Ue,Mm:()=>ve,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Ie,Xs:()=>Qe,Yz:()=>Oe,_:()=>Me,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>$e,jr:()=>Ce,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>He,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",I=/\s/,O=/^\s+/;function z(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var T=NaN,N=/^[-+]0x[0-9a-f]+$/i,L=/^0b[01]+$/i,R=/^0o[0-7]+$/i,_=parseInt;function F(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return T;if(z(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=z(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=L.test(e);return n||R.test(e)?_(e.slice(2),n?2:8):N.test(e)?T:+e}var M=function(){return m.Date.now()},P="Expected a function",A=Math.max,$=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(P);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=M();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?$(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=M(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=F(t)||0,z(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(F(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(M())},h}var X="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,r.useState)(!1),w=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const pe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ge=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ve(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield D(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const ze="modern-kit-local-storage",Te="modern-kit-session-storage",Ne={localStorage:{key:ze,subscribe:e=>{window.addEventListener(ze,e)},unsubscribe:e=>{window.removeEventListener(ze,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(ze))}},sessionStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}}},Le=e=>Ne[e],Re=Le("localStorage"),_e=e=>window.localStorage.getItem(e),Fe=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Me(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Fe,(()=>_e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=_e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Pe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)(Pe(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function $e(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function He(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ge(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Le("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return z(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",p="architecture",w="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",I="Firefox",O="Google",z="Huawei",T="LG",N="Microsoft",L="Motorola",R="Opera",_="Samsung",F="Sharp",M="Sony",P="Xiaomi",A="Zebra",$="Facebook",q="Chromium OS",X="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=U([u,f,c]),J.CPU=U([p]),J.DEVICE=U([l,b,d,w,m,g,h,v,y]),J.ENGINE=J.OS=U([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/295f1714.2d5aeeae.js b/assets/js/295f1714.2d5aeeae.js deleted file mode 100644 index 689b91b88..000000000 --- a/assets/js/295f1714.2d5aeeae.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 295f1714.2d5aeeae.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4549],{7543:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useHover",l={id:"react/hooks/useHover",title:"useHover",description:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useHover.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useHover",permalink:"/modern-kit/docs/react/hooks/useHover",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"},next:{title:"useImageStatus",permalink:"/modern-kit/docs/react/hooks/useImageStatus"}},u={},d=()=>{const e={div:"div",...(0,r.a)()},[t,n]=(0,a.useState)(0),{ref:s,isHovered:c}=(0,o.XI)({onEnter:()=>n((e=>e+1)),onLeave:()=>n((e=>e-1))});return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.div,{ref:s,style:{width:"200px",height:"200px",backgroundColor:"skyBlue"},children:c?"hover":"leave"}),(0,i.jsx)(e.div,{children:t})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usehover",children:"useHover"})}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useHover/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useHover: ({\n onEnter?: (event: MouseEvent) => void,\n onLeave?: (event: MouseEvent) => void,\n}) => {\n ref: T,\n isHovered: boolean\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useHover } from '@modern-kit/react';\n\nconst Example = () => {\n const [counter, setCounter] = useState(0);\n\n const { ref, isHovered } = useHover({\n onEnter: () => setCounter((count) => count + 1),\n onLeave: () => setCounter((count) => count - 1)\n });\n\n const style = {\n width: '200px',\n height: '200px',\n backgroundColor: 'skyBlue'\n };\n\n return (\n <>\n
{isHovered ? 'hover' : 'leave'}
\n
{counter}
\n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ue,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>ze,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,I=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,R=/^0o[0-7]+$/i,L=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=M.test(e);return n||R.test(e)?L(e.slice(2),n?2:8):I.test(e)?_:+e}var z=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(P(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var H="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function D(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Ie={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Me=e=>Ie[e],Re=Me("localStorage"),Le=e=>window.localStorage.getItem(e),Pe=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Pe,(()=>Le(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Le(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,He=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,He)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const De=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+De(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+De(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+De(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+De(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Me("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(H);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",_="LG",I="Microsoft",M="Motorola",R="Opera",L="Samsung",P="Sharp",z="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",H="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,H)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/295f1714.7029a697.js b/assets/js/295f1714.7029a697.js new file mode 100644 index 000000000..4a7abc1e6 --- /dev/null +++ b/assets/js/295f1714.7029a697.js @@ -0,0 +1,2 @@ +/*! For license information please see 295f1714.7029a697.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4549],{7543:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useHover",l={id:"react/hooks/useHover",title:"useHover",description:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useHover.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useHover",permalink:"/modern-kit/docs/react/hooks/useHover",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"},next:{title:"useImageStatus",permalink:"/modern-kit/docs/react/hooks/useImageStatus"}},u={},d=()=>{const e={div:"div",...(0,r.a)()},[t,n]=(0,a.useState)(0),{ref:s,isHovered:c}=(0,o.XI)({onEnter:()=>n((e=>e+1)),onLeave:()=>n((e=>e-1))});return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.div,{ref:s,style:{width:"200px",height:"200px",backgroundColor:"skyBlue"},children:c?"hover":"leave"}),(0,i.jsx)(e.div,{children:t})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usehover",children:"useHover"})}),"\n",(0,i.jsx)(t.p,{children:"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useHover/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useHover: ({\n onEnter?: (event: MouseEvent) => void,\n onLeave?: (event: MouseEvent) => void,\n}) => {\n ref: T,\n isHovered: boolean\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useHover } from '@modern-kit/react';\n\nconst Example = () => {\n const [counter, setCounter] = useState(0);\n\n const { ref, isHovered } = useHover({\n onEnter: () => setCounter((count) => count + 1),\n onLeave: () => setCounter((count) => count - 1)\n });\n\n const style = {\n width: '200px',\n height: '200px',\n backgroundColor: 'skyBlue'\n };\n\n return (\n <>\n
{isHovered ? 'hover' : 'leave'}
\n
{counter}
\n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>De,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>_e,_:()=>Ae,a9:()=>ue,ac:()=>He,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,I=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):I.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function H(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function D(e){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>H(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function _e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ie="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>Me[e],ze=Pe("localStorage"),Le=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Le(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Le(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function He(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ue)}}function Ye(){return He("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),H(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",_="LG",I="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",H="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,H).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/295f1714.2d5aeeae.js.LICENSE.txt b/assets/js/295f1714.7029a697.js.LICENSE.txt similarity index 100% rename from assets/js/295f1714.2d5aeeae.js.LICENSE.txt rename to assets/js/295f1714.7029a697.js.LICENSE.txt diff --git a/assets/js/308b5f81.65c494c1.js b/assets/js/308b5f81.65c494c1.js new file mode 100644 index 000000000..e20186f69 --- /dev/null +++ b/assets/js/308b5f81.65c494c1.js @@ -0,0 +1,2 @@ +/*! For license information please see 308b5f81.65c494c1.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4580],{1956:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="useIntersectionObserver",c={id:"react/hooks/useIntersectionObserver",title:"useIntersectionObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useIntersectionObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useIntersectionObserver",permalink:"/modern-kit/docs/react/hooks/useIntersectionObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useImageStatus",permalink:"/modern-kit/docs/react/hooks/useImageStatus"},next:{title:"useInterval",permalink:"/modern-kit/docs/react/hooks/useInterval"}},l={},u=()=>{const e={br:"br",div:"div",...(0,i.a)()},{ref:t}=(0,o.S1)({onIntersectStart:e=>{console.log("onIntersectStart: ",e)},onIntersectEnd:e=>{console.log("onIntersectEnd: ",e)}}),n={height:"800px",backgroundColor:"teal"};return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.div,{style:n}),(0,r.jsxs)(e.div,{ref:t,style:{color:"white",fontSize:"24px",backgroundColor:"blue"},children:["\ud0c0\uac9f \uc694\uc18c",(0,r.jsx)(e.br,{}),"\uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."]}),(0,r.jsx)(e.div,{style:n})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Exmaple",id:"exmaple",level:2},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"useintersectionobserver",children:"useIntersectionObserver"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 ",(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,r.jsx)(t.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,r.jsx)(t.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"calledOnce"}),"\uc635\uc158\uc744 ",(0,r.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 ",(0,r.jsx)(t.code,{children:"onIntersectStart"}),"\uc640 ",(0,r.jsx)(t.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"enabled"}),"\uc635\uc158\uc744 \ud1b5\ud574 ",(0,r.jsx)(t.code,{children:"onIntersect*"})," \ucf5c\ubc31 \ud568\uc218\ub4e4\uc758 \ud638\ucd9c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,r.jsx)(t.code,{children:"false"}),"\ub77c\uba74 \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ud558\ub354\ub77c\ub3c4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,r.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useIntersectionObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n enabled?: boolean;\n}\n"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useIntersectionObserver: ({\n onIntersectStart,\n onIntersectEnd,\n enabled, // default: true\n calledOnce, // default: false\n root, // default: null\n threshold, // default: 0\n rootMargin, // default: '0px 0px 0px 0px'\n}: UseIntersectionObserverProps) => { \n ref: React.RefCallback \n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useIntersectionObserver } from \'@modern-kit/react\';\n\nconst Example = () => {\n const { ref: targetRef } = useIntersectionObserver({\n onIntersectStart: (entry) => {\n console.log("onIntersectStart: ", entry);\n },\n onIntersectEnd: (entry) => {\n console.log("onIntersectEnd: ", entry);\n },\n });\n \n const boxStyle = {\n height: "800px", \n backgroundColor: "teal"\n }\n\n return (\n
\n
\n
\n \ud0c0\uac9f \uc694\uc18c
\n \uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n
\n
\n
\n );\n};\n'})}),"\n",(0,r.jsx)(t.h2,{id:"exmaple",children:"Exmaple"}),"\n","\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function f(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>rt,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>it,g4:()=>Ee,iP:()=>dt,ii:()=>Xe,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Ie,z$:()=>je});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function b(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>b()?(0,r.jsx)(r.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var A=function(){return m.Date.now()},$="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&r?f(e):(r=i=void 0,a)}function h(){var e=A(),n=w(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var U="Expected a function";function X(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return G(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,i.useState)(!1),p=!f,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},be=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?i.useLayoutEffect:i.useEffect;function pe(e,t,n,r={}){const i=ie(r),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,i),()=>{e.removeEventListener(t,o,i)}}),[t,e,i,o])}function me(e){const t=(0,i.useRef)(null),n=(0,i.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),r=(0,i.useCallback)((({target:n})=>{const r=t.current;r&&!r.contains(n)&&e(r)}),[e]);return pe(window.document,n,r),t}const he=(0,i.forwardRef)(((e,t)=>{var{as:n,children:i,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,r.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:i}))}));(0,i.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),b=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function je(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function Ie(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Pe=e=>Me[e],ze=Pe("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ae(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,r]=(0,i.useState)(Fe(e,t)),o=(0,i.useCallback)((e=>r(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)(Ue),r=(0,i.useCallback)((t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",r),{ref:e,position:t}}const Be=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,Be,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+Je(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+Je(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+Je(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+Je(c.width,r.width,s)}};function Ze(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=Ke(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=et(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function rt(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function it(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function ot(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",A="Sony",$="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[f]=r,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[f]=r,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,i.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,i.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),r=oe(n,e),o=(0,i.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/308b5f81.d41202fb.js.LICENSE.txt b/assets/js/308b5f81.65c494c1.js.LICENSE.txt similarity index 100% rename from assets/js/308b5f81.d41202fb.js.LICENSE.txt rename to assets/js/308b5f81.65c494c1.js.LICENSE.txt diff --git a/assets/js/308b5f81.d41202fb.js b/assets/js/308b5f81.d41202fb.js deleted file mode 100644 index fc07b850f..000000000 --- a/assets/js/308b5f81.d41202fb.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 308b5f81.d41202fb.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4580],{1956:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="useIntersectionObserver",c={id:"react/hooks/useIntersectionObserver",title:"useIntersectionObserver",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useIntersectionObserver.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useIntersectionObserver",permalink:"/modern-kit/docs/react/hooks/useIntersectionObserver",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useImageStatus",permalink:"/modern-kit/docs/react/hooks/useImageStatus"},next:{title:"useInterval",permalink:"/modern-kit/docs/react/hooks/useInterval"}},l={},u=()=>{const e={br:"br",div:"div",...(0,i.a)()},{ref:t}=(0,o.S1)({onIntersectStart:e=>{console.log("onIntersectStart: ",e)},onIntersectEnd:e=>{console.log("onIntersectEnd: ",e)}}),n={height:"800px",backgroundColor:"teal"};return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.div,{style:n}),(0,r.jsxs)(e.div,{ref:t,style:{color:"white",fontSize:"24px",backgroundColor:"blue"},children:["\ud0c0\uac9f \uc694\uc18c",(0,r.jsx)(e.br,{}),"\uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."]}),(0,r.jsx)(e.div,{style:n})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Exmaple",id:"exmaple",level:2},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"useintersectionobserver",children:"useIntersectionObserver"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 ",(0,r.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,r.jsx)(t.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,r.jsx)(t.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"calledOnce"}),"\uc635\uc158\uc744 ",(0,r.jsx)(t.code,{children:"true"}),"\ub85c \uc124\uc815\ud558\uba74 ",(0,r.jsx)(t.code,{children:"onIntersectStart"}),"\uc640 ",(0,r.jsx)(t.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"enabled"}),"\uc635\uc158\uc744 \ud1b5\ud574 ",(0,r.jsx)(t.code,{children:"onIntersect*"})," \ucf5c\ubc31 \ud568\uc218\ub4e4\uc758 \ud638\ucd9c\uc744 \uc81c\uc5b4 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. ",(0,r.jsx)(t.code,{children:"false"}),"\ub77c\uba74 \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ud558\ub354\ub77c\ub3c4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,r.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useIntersectionObserver/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n enabled?: boolean;\n}\n"})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useIntersectionObserver: ({\n onIntersectStart,\n onIntersectEnd,\n enabled, // default: true\n calledOnce, // default: false\n root, // default: null\n threshold, // default: 0\n rootMargin, // default: '0px 0px 0px 0px'\n}: UseIntersectionObserverProps) => { \n ref: React.RefCallback \n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useIntersectionObserver } from \'@modern-kit/react\';\n\nconst Example = () => {\n const { ref: targetRef } = useIntersectionObserver({\n onIntersectStart: (entry) => {\n console.log("onIntersectStart: ", entry);\n },\n onIntersectEnd: (entry) => {\n console.log("onIntersectEnd: ", entry);\n },\n });\n \n const boxStyle = {\n height: "800px", \n backgroundColor: "teal"\n }\n\n return (\n
\n
\n
\n \ud0c0\uac9f \uc694\uc18c
\n \uac1c\ubc1c\uc790 \ub3c4\uad6c \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n
\n
\n
\n );\n};\n'})}),"\n",(0,r.jsx)(t.h2,{id:"exmaple",children:"Exmaple"}),"\n","\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function f(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Ie,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ve,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>je,z$:()=>Se});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function b(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>b()?(0,r.jsx)(r.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&r?f(e):(r=i=void 0,a)}function h(){var e=L(),n=w(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function X(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const V={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return G(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,i.useState)(!1),p=!f,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},be=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,i.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,i.useRef)(null),n=ne(e);return(0,i.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",r=({target:e})=>{const r=t.current;r&&!r.contains(e)&&n(r)};return document.addEventListener(e,r),()=>{document.removeEventListener(e,r)}}),[n]),{ref:t}}(s);return(0,r.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?i.useLayoutEffect:i.useEffect;(0,i.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield B(e,V[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),b=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function je(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Me=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Pe(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,r]=(0,i.useState)(Ae(e,t));return(0,i.useEffect)((()=>{const t=window.matchMedia(e),n=e=>r(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,r=a-t.top,i=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=r,u.elementPositionX=i,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,qe,Ue)}}function Ve(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+We(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+We(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+We(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+We(c.width,r.width,s)}};function Ge(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=He(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ke(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function nt(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var rt={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[f]=r,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[f]=r,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(rt,rt.exports);var it=rt.exports;function ot(){const[e,t]=(0,i.useState)(null);return pe((()=>{const e=new it.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[r,o]=(0,i.useState)({width:null,height:null}),a=(0,i.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,i.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),r}}}]); \ No newline at end of file diff --git a/assets/js/3842c52b.025b1d76.js b/assets/js/3842c52b.12dc062c.js similarity index 62% rename from assets/js/3842c52b.025b1d76.js rename to assets/js/3842c52b.12dc062c.js index 955814d1c..167a1e44a 100644 --- a/assets/js/3842c52b.025b1d76.js +++ b/assets/js/3842c52b.12dc062c.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8852],{8021:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>o,contentTitle:()=>c,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var n=s(1986),r=s(9937);const a={},c="usePreservedCallback",l={id:"react/hooks/usePreservedCallback",title:"usePreservedCallback",description:"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 \ucc38\uc870\ub97c \uc720\uc9c0\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePreservedCallback.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePreservedCallback",permalink:"/modern-kit/docs/react/hooks/usePreservedCallback",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme"},next:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"}},o={},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"as-is",id:"as-is",level:3},{value:"to-be (usePreservedCallback)",id:"to-be-usepreservedcallback",level:3}];function i(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"usepreservedcallback",children:"usePreservedCallback"})}),"\n",(0,n.jsxs)(t.p,{children:["\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 ",(0,n.jsx)(t.code,{children:"\ucc38\uc870\ub97c \uc720\uc9c0"}),"\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,n.jsx)(t.p,{children:"\uc774 \ud6c5\uc740 \ud2b9\ud788 \ucf5c\ubc31 \ud568\uc218\uac00 \ub80c\ub354\ub9c1 \uc911\uc5d0 \ubcc0\uacbd\ub420 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \ubd88\ud544\uc694\ud55c \ud568\uc218 \uc0dd\uc131\uc744 \ubc29\uc9c0\ud558\uace0 \ucd5c\uc801\ud654\ud558\uba70, \ucd5c\uc2e0 \ubc84\uc804\uc758 \ucf5c\ubc31 \ud568\uc218\ub97c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreservedCallback/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,n.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function usePreservedCallback any>(\n callback?: T\n): T;\n"})}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.h3,{id:"as-is",children:"as-is"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import React, { useEffect, useState } from "react";\n\nconst Example = () => {\n const [state, setState] = useState(0);\n\n const callback = () => {\n setState(state + 1);\n };\n\n useEffect(() => {\n callback(); // \ubb34\ud55c \ud638\ucd9c\n }, [callback]);\n\n return (\n <>{/* ... */}\n );\n}\n'})}),"\n",(0,n.jsx)(t.h3,{id:"to-be-usepreservedcallback",children:"to-be (usePreservedCallback)"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useEffect, useState } from \"react\";\nimport { usePreservedCallback } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(0);\n\n const callback = usePreservedCallback(() => {\n setState(state + 1);\n });\n\n useEffect(() => {\n callback(); // 1\ud68c\ub9cc \ud638\ucd9c\n }, [callback]);\n\n return (\n <>{/* ... */}\n );\n}\n"})})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(i,{...e})}):i(e)}},9937:(e,t,s)=>{s.d(t,{Z:()=>l,a:()=>c});var n=s(7800);const r={},a=n.createContext(r);function c(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8852],{8021:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>o,contentTitle:()=>c,default:()=>u,frontMatter:()=>a,metadata:()=>l,toc:()=>d});var n=s(1986),r=s(9937);const a={},c="usePreservedCallback",l={id:"react/hooks/usePreservedCallback",title:"usePreservedCallback",description:"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 \ucc38\uc870\ub97c \uc720\uc9c0\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePreservedCallback.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePreservedCallback",permalink:"/modern-kit/docs/react/hooks/usePreservedCallback",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme"},next:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"}},o={},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"as-is",id:"as-is",level:3},{value:"to-be (usePreservedCallback)",id:"to-be-usepreservedcallback",level:3}];function i(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"usepreservedcallback",children:"usePreservedCallback"})}),"\n",(0,n.jsxs)(t.p,{children:["\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 ",(0,n.jsx)(t.code,{children:"\ucc38\uc870\ub97c \uc720\uc9c0"}),"\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,n.jsx)(t.p,{children:"\uc774 \ud6c5\uc740 \ud2b9\ud788 \ucf5c\ubc31 \ud568\uc218\uac00 \ub80c\ub354\ub9c1 \uc911\uc5d0 \ubcc0\uacbd\ub420 \ub54c \uc720\uc6a9\ud569\ub2c8\ub2e4. \ubd88\ud544\uc694\ud55c \ud568\uc218 \uc0dd\uc131\uc744 \ubc29\uc9c0\ud558\uace0 \ucd5c\uc801\ud654\ud558\uba70, \ucd5c\uc2e0 \ubc84\uc804\uc758 \ucf5c\ubc31 \ud568\uc218\ub97c \uc0ac\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreservedCallback/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,n.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function usePreservedCallback any>(\n callback?: T // default: noop\n): T;\n"})}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(t.h3,{id:"as-is",children:"as-is"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import React, { useEffect, useState } from "react";\n\nconst Example = () => {\n const [state, setState] = useState(0);\n\n const callback = () => {\n setState(state + 1);\n };\n\n useEffect(() => {\n callback(); // \ubb34\ud55c \ud638\ucd9c\n }, [callback]);\n\n return (\n <>{/* ... */}\n );\n}\n'})}),"\n",(0,n.jsx)(t.h3,{id:"to-be-usepreservedcallback",children:"to-be (usePreservedCallback)"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useEffect, useState } from \"react\";\nimport { usePreservedCallback } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(0);\n\n const callback = usePreservedCallback(() => {\n setState(state + 1);\n });\n\n useEffect(() => {\n callback(); // 1\ud68c\ub9cc \ud638\ucd9c\n }, [callback]);\n\n return (\n <>{/* ... */}\n );\n}\n"})})]})}function u(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(i,{...e})}):i(e)}},9937:(e,t,s)=>{s.d(t,{Z:()=>l,a:()=>c});var n=s(7800);const r={},a=n.createContext(r);function c(e){const t=n.useContext(a);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:c(e.components),n.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/3bdef6d7.0ac8d617.js b/assets/js/3bdef6d7.0ac8d617.js new file mode 100644 index 000000000..04f45721f --- /dev/null +++ b/assets/js/3bdef6d7.0ac8d617.js @@ -0,0 +1,2 @@ +/*! For license information please see 3bdef6d7.0ac8d617.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8090],{7201:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useDebouncedState",c={id:"react/hooks/useDebouncedState",title:"useDebouncedState",description:"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebouncedState.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue"},next:{title:"useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle"}},l={},u=()=>{const e={div:"div",input:"input",p:"p",...(0,r.a)()},[t,n]=(0,o.GN)("",500);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: ",t]}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.input,{type:"text",onChange:e=>n(e.target.value)})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebouncedstate",children:"useDebouncedState"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useState"}),"\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedState(\n initialState: T,\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): [T, DebounceReturnType>>];\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedState } from '@modern-kit/react';\n\nconst Example = () => {\n const [debouncedState, setDebouncedState] = useDebouncedState(\"\", 500);\n\n return (\n
\n

\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: {debouncedValue}

\n
\n setDebouncedState(e.target.value)} />\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ue,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>Ae,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Xe,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Te,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):_.test(e)?R:+e}var D=function(){return m.Date.now()},$="Expected a function",A=Math.max,L=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=D();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=D(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(D())},h}var q="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function Y(){return!U()}function W(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Pe={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Me=e=>Pe[e],ze=Me("localStorage"),De=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>De(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=De(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,Ve=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,Ve)}}function Ye(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",D="Sony",$="Xiaomi",A="Zebra",L="Facebook",F="Chromium OS",q="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>U()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/3bdef6d7.b82041d0.js.LICENSE.txt b/assets/js/3bdef6d7.0ac8d617.js.LICENSE.txt similarity index 100% rename from assets/js/3bdef6d7.b82041d0.js.LICENSE.txt rename to assets/js/3bdef6d7.0ac8d617.js.LICENSE.txt diff --git a/assets/js/3bdef6d7.b82041d0.js b/assets/js/3bdef6d7.b82041d0.js deleted file mode 100644 index 3b066e599..000000000 --- a/assets/js/3bdef6d7.b82041d0.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 3bdef6d7.b82041d0.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8090],{7201:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useDebouncedState",c={id:"react/hooks/useDebouncedState",title:"useDebouncedState",description:"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebouncedState.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue"},next:{title:"useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle"}},l={},u=()=>{const e={div:"div",input:"input",p:"p",...(0,r.a)()},[t,n]=(0,o.GN)("",500);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: ",t]}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.input,{type:"text",onChange:e=>n(e.target.value)})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebouncedstate",children:"useDebouncedState"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useState"}),"\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedState/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedState(\n initialState: T,\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): [T, DebounceReturnType>>];\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedState } from '@modern-kit/react';\n\nconst Example = () => {\n const [debouncedState, setDebouncedState] = useDebouncedState(\"\", 500);\n\n return (\n
\n

\ub514\ubc14\uc6b4\uc2f1 \uc0c1\ud0dc: {debouncedValue}

\n
\n setDebouncedState(e.target.value)} />\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ae,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ve,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ue,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):_.test(e)?R:+e}var L=function(){return m.Date.now()},D="Expected a function",$=Math.max,A=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(D);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?A(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var q="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const V={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function Y(){return!U()}function W(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,V[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Pe=Ie("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const De=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(De(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ae(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,qe)}}function Ve(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ue(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",L="Sony",D="Xiaomi",$="Zebra",A="Facebook",F="Chromium OS",q="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/3ffd14c6.5b59016a.js b/assets/js/3ffd14c6.5b59016a.js deleted file mode 100644 index 27b211021..000000000 --- a/assets/js/3ffd14c6.5b59016a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2014],{111:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var r=t(1986),s=t(9937);const o={},i="useOnClickOutside",c={id:"react/hooks/useOnClickOutside",title:"useOnClickOutside",description:"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8 \uc678\ubd80 \uc694\uc18c\ub97c \ud074\ub9ad \ud560 \uacbd\uc6b0 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useOnClickOutside.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useOnClickOutside",permalink:"/modern-kit/docs/react/hooks/useOnClickOutside",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork"},next:{title:"usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme"}},d={},a=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"useonclickoutside",children:"useOnClickOutside"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"ref"}),"\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8 \uc678\ubd80 \uc694\uc18c\ub97c \ud074\ub9ad \ud560 \uacbd\uc6b0 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useOnClickOutside/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"const useOnClickOutside: (\n action: (targetElement: T) => void\n) => {\n ref: React.RefObject;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMemo } from 'react';\nimport { useOnClickOutside } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref } = useOnClickOutside(() => {\n window.alert('outside click')\n });\n \n const boxStyle = useMemo(() => {\n return {\n width: '400px',\n height: '400px',\n background: '#439966',\n fontSize: '1.5rem',\n color: '#fff',\n };\n }, []);\n\n return (\n
\n Target Box\n
\n );\n};\n"})})]})}function u(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},9937:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>i});var r=t(7800);const s={},o=r.createContext(s);function i(e){const n=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:i(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/42a77533.437ec114.js b/assets/js/42a77533.437ec114.js new file mode 100644 index 000000000..7a0321d15 --- /dev/null +++ b/assets/js/42a77533.437ec114.js @@ -0,0 +1,2 @@ +/*! For license information please see 42a77533.437ec114.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3142],{4601:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>u,toc:()=>w});var i=n(1986),r=n(9937),o=n(7800),a=n(384),s=n(5549);const c={},l="useOutsidePointerDown",u={id:"react/hooks/useOutsidePointerDown",title:"useOutsidePointerDown",description:"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useOutsidePointerDown.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useOutsidePointerDown",permalink:"/modern-kit/docs/react/hooks/useOutsidePointerDown",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork"},next:{title:"usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme"}},d={},f=()=>{const e={div:"div",h3:"h3",p:"p",...(0,r.a)()},[t,n]=(0,o.useState)(0),s=(0,a.B1)((()=>{n(t+1)})),c=(0,o.useMemo)((()=>({width:"400px",height:"400px",background:"#439966",color:"#fff"})),[]),l=(0,o.useMemo)((()=>({width:"400px",height:"400px",background:"#439966",color:"#fff"})),[]);return(0,i.jsxs)(e.div,{style:c,children:[(0,i.jsx)(e.h3,{children:"Inner Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["number: ",t]}),(0,i.jsx)(e.div,{ref:s,style:l,children:(0,i.jsx)(e.h3,{children:"Inner Box"})})]})},w=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useoutsidepointerdown",children:"useOutsidePointerDown"})}),"\n",(0,i.jsx)(t.p,{children:"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsxs)(t.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c(",(0,i.jsx)(t.code,{children:"ref"}),"\ub85c \uc9c0\uc815\ub41c \uc694\uc18c) \uc678\ubd80\uc5d0\uc11c \uc0ac\uc6a9\uc790\uac00 \ub9c8\uc6b0\uc2a4\ub97c \ud074\ub9ad\ud558\uac70\ub098, \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 \uc81c\uacf5\ub41c ",(0,i.jsx)(t.code,{children:"callback"})," \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubaa8\ubc14\uc77c \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,i.jsx)(t.code,{children:"touchstart"}),", \ub370\uc2a4\ud06c\ud0d1 \ud658\uacbd\uc5d0\uc11c\ub294 ",(0,i.jsx)(t.code,{children:"mousedown"})," \uc774\ubca4\ud2b8\ub97c \uac10\uc9c0\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useOutsidePointerDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useOutsidePointerDown(\n callback: (targetElement: T) => void\n): React.RefObject;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMemo, useState } from 'react';\nimport { useOutsidePointerDown } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n const targetRef = useOutsidePointerDown(() => {\n setNumber(number + 1);\n });\n \n const outerBoxStyle = useMemo(() => {\n return {\n width: '400px',\n height: '400px',\n background: '#439966',\n color: '#fff',\n };\n }, []);\n\n const InnerBoxStyle = useMemo(() => {\n return {\n width: '400px',\n height: '400px',\n background: '#439966',\n color: '#fff',\n };\n }, []);\n\n return (\n
\n

Inner Box \uc678\ubd80\ub97c \ud074\ub9ad\ud574\ubcf4\uc138\uc694!

\n

number: {number}

\n\n
\n

Inner Box

\n
\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(s.Z,{children:()=>(0,i.jsx)(f,{})}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",children:"PointerEvent"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>we,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ze,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Pe,_:()=>Le,a9:()=>ue,ac:()=>Be,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>De,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ke,qx:()=>w,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>je});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const w=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=b||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,I=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,_=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||M.test(e)?_(e.slice(2),n?2:8):I.test(e)?P:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function B(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function w(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(b(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?w(e):(i=r=void 0,a)}function h(){var e=$(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?w(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),w(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var q="Expected a function";function D(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return D(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>D(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const Z=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return Z(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return Z(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>B(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[w,b]=(0,r.useState)(!1),p=!w,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const we=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},be=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);be((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(we,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return D(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>D(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return D(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return D(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=K(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),w=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:w,resetStep:b}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){be((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Pe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ie="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},_e=e=>Me[e],ze=_e("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=K(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Be(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function De(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ue)}}function Ye(){return Be("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ze({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return be((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Ke(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=_e("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=K(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=K(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),B(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",w="version",b="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",I="Microsoft",R="Motorola",M="Opera",_="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",B="Chromium OS",q="Mac OS",D=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[w]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[w]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,B).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};G.VERSION="1.0.38",G.BROWSER=D([u,w,c]),G.CPU=D([b]),G.DEVICE=D([l,f,d,p,m,v,h,g,y]),G.ENGINE=G.OS=D([u,w]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return be((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){be((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/47a95eb2.0f206a9e.js.LICENSE.txt b/assets/js/42a77533.437ec114.js.LICENSE.txt similarity index 100% rename from assets/js/47a95eb2.0f206a9e.js.LICENSE.txt rename to assets/js/42a77533.437ec114.js.LICENSE.txt diff --git a/assets/js/42f2960f.45b2ab07.js b/assets/js/42f2960f.6a9d4a0e.js similarity index 97% rename from assets/js/42f2960f.45b2ab07.js rename to assets/js/42f2960f.6a9d4a0e.js index d07f00183..236fa0629 100644 --- a/assets/js/42f2960f.45b2ab07.js +++ b/assets/js/42f2960f.6a9d4a0e.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8469],{4959:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>d,toc:()=>l});var r=t(1986),a=t(9937);const s={},i="useFileReader",d={id:"react/hooks/useFileReader",title:"useFileReader",description:"File \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(readAsText,readAsDataURL,readAsArrayBuffer)\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useFileReader.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useFileReader",permalink:"/modern-kit/docs/react/hooks/useFileReader",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle"},next:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"}},o={},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usefilereader",children:"useFileReader"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"File"})," \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(",(0,r.jsx)(n.code,{children:"readAsText"}),",",(0,r.jsx)(n.code,{children:"readAsDataURL"}),",",(0,r.jsx)(n.code,{children:"readAsArrayBuffer"}),")\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useFileReader/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type ReadType = 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer';\n\ninterface FileContent {\n status: 'fulfilled' | 'rejected';\n readValue: string | ArrayBuffer;\n originFile: Nullable;\n}\n\ninterface ReadFileOptions {\n file: FileList | File;\n readType: ReadType;\n accepts?: string[];\n}\n\nconst useFileReader: () => {\n readFile: ({\n file,\n readType,\n accepts,\n }: ReadFileOptions) => Promise;\n fileContents: FileContent[];\n isLoading: boolean;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useFileReader } from '@modern-kit/react';\n\nconst Example = () => {\n const { readFile, fileContents, loading } = useFileReader()\n\n const handleChange = (e: React.ChangeEvent) => {\n if(!e.target.files) return;\n\n readFile({ file: e.target.files, readType: 'readAsText' }); \n /*\n * 1. readFile\uc740 Promise \ubc18\ud658\ud569\ub2c8\ub2e4. \ud574\ub2f9 \uac12\uc740 fileContents\uc640 \ub3d9\uc77c\ud569\ub2c8\ub2e4.\n * ex) const data = await readFile(e.target.files, 'readAsDataURL'); \n * \n * 2. accepts\ub85c \uc6d0\ud558\ub294 \ud30c\uc77c \ud0c0\uc785\ub9cc \uc77d\uc5b4\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n * accepts\uc635\uc158\uc744 \ub118\uaca8\uc8fc\uc9c0 \uc54a\uc73c\uba74 \ubaa8\ub4e0 \ud30c\uc77c \ud0c0\uc785\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4.\n * ex) readFile({ file: e.target.files, readType: 'readAsText', accepts: ['text/plain'] }); \n */\n }\n\n return (\n
\n \n
\n );\n};\n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},9937:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>i});var r=t(7800);const a={},s=r.createContext(a);function i(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8469],{4959:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>d,toc:()=>l});var r=t(1986),a=t(9937);const s={},i="useFileReader",d={id:"react/hooks/useFileReader",title:"useFileReader",description:"File \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(readAsText,readAsDataURL,readAsArrayBuffer)\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useFileReader.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useFileReader",permalink:"/modern-kit/docs/react/hooks/useFileReader",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useEventListener",permalink:"/modern-kit/docs/react/hooks/useEventListener"},next:{title:"useForceUpdate",permalink:"/modern-kit/docs/react/hooks/useForceUpdate"}},o={},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"usefilereader",children:"useFileReader"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.code,{children:"File"})," \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(",(0,r.jsx)(n.code,{children:"readAsText"}),",",(0,r.jsx)(n.code,{children:"readAsDataURL"}),",",(0,r.jsx)(n.code,{children:"readAsArrayBuffer"}),")\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useFileReader/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"type ReadType = 'readAsText' | 'readAsDataURL' | 'readAsArrayBuffer';\n\ninterface FileContent {\n status: 'fulfilled' | 'rejected';\n readValue: string | ArrayBuffer;\n originFile: Nullable;\n}\n\ninterface ReadFileOptions {\n file: FileList | File;\n readType: ReadType;\n accepts?: string[];\n}\n\nconst useFileReader: () => {\n readFile: ({\n file,\n readType,\n accepts,\n }: ReadFileOptions) => Promise;\n fileContents: FileContent[];\n isLoading: boolean;\n};\n"})}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useFileReader } from '@modern-kit/react';\n\nconst Example = () => {\n const { readFile, fileContents, loading } = useFileReader()\n\n const handleChange = (e: React.ChangeEvent) => {\n if(!e.target.files) return;\n\n readFile({ file: e.target.files, readType: 'readAsText' }); \n /*\n * 1. readFile\uc740 Promise \ubc18\ud658\ud569\ub2c8\ub2e4. \ud574\ub2f9 \uac12\uc740 fileContents\uc640 \ub3d9\uc77c\ud569\ub2c8\ub2e4.\n * ex) const data = await readFile(e.target.files, 'readAsDataURL'); \n * \n * 2. accepts\ub85c \uc6d0\ud558\ub294 \ud30c\uc77c \ud0c0\uc785\ub9cc \uc77d\uc5b4\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n * accepts\uc635\uc158\uc744 \ub118\uaca8\uc8fc\uc9c0 \uc54a\uc73c\uba74 \ubaa8\ub4e0 \ud30c\uc77c \ud0c0\uc785\uc744 \ud5c8\uc6a9\ud569\ub2c8\ub2e4.\n * ex) readFile({ file: e.target.files, readType: 'readAsText', accepts: ['text/plain'] }); \n */\n }\n\n return (\n
\n \n
\n );\n};\n"})})]})}function u(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},9937:(e,n,t)=>{t.d(n,{Z:()=>d,a:()=>i});var r=t(7800);const a={},s=r.createContext(a);function i(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/47a95eb2.0f206a9e.js b/assets/js/47a95eb2.0f206a9e.js deleted file mode 100644 index ff313e7c6..000000000 --- a/assets/js/47a95eb2.0f206a9e.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 47a95eb2.0f206a9e.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[410],{183:(e,t,n)=>{n.r(t),n.d(t,{Input:()=>d,InputExample:()=>p,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="DebounceWrapper",l={id:"react/components/DebounceWrapper",title:"DebounceWrapper",description:"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/DebounceWrapper.mdx",sourceDirName:"react/components",slug:"/react/components/DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly"},next:{title:"FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage"}},u={},d=({onChange:e})=>{const t={input:"input",...(0,r.a)()},[n,a]=(0,o.useState)("");return(0,i.jsx)(t.input,{type:"text",onChange:t=>{a(t.target.value),e(t.target.value)},value:n})},p=()=>{const e={p:"p",...(0,r.a)()},[t,n]=(0,o.useState)("");return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.uM,{capture:"onChange",wait:500,children:(0,i.jsx)(d,{onChange:e=>{n(e)}})}),(0,i.jsxs)(e.p,{children:["Text: ",t]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"debouncewrapper",children:"DebounceWrapper"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8",(0,i.jsx)(t.code,{children:"(ex: Click Event)"}),"\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/DebounceWrapper/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n\ninterface DebounceWrapperProps {\n children: JSX.Element; // \ud558\ub098\uc758 \uc694\uc18c\ub9cc children prop\uc73c\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n capture: string;\n wait: DebounceParameters[1]; // number\n options?: DebounceParameters[2]; // DebounceSettings\n}\n\nconst DebounceWrapper: ({\n children,\n capture,\n wait,\n options,\n}: DebounceWrapperProps) => React.FunctionComponentElement;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { DebounceWrapper } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(t.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,i.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,i.jsx)(a.uM,{capture:"onClick",wait:500,children:(0,i.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,i.jsx)("br",{}),"\n","\n","\n",(0,i.jsx)(t.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,i.jsx)(p,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Xe,FS:()=>ot,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ve,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Fe,cM:()=>at,df:()=>pe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ae,jr:()=>je,my:()=>fe,nA:()=>he,oM:()=>d,oz:()=>We,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ue,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var f="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=f||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?I:+e}var L=function(){return m.Date.now()},$="Expected a function",F=Math.max,A=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=L();if(f(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?A(n,o-(e-l)):n}(e))}function m(e){return s=void 0,p&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=f(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?F(z(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var B="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const W={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function V(){return!U()}function Y(e){return q(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,f]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),f(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const fe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=V()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,W[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:b,resetStep:f}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Ie="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Re=e=>_e[e],Me=Re("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ae(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const De=()=>navigator.onLine,Be=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,De,Be)}}function We(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function Xe(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ue(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ve({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ye=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ye(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ye(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ye(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ye(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Re("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",b="version",f="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",I="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",F="Zebra",A="Facebook",D="Chromium OS",B="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,V.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,V.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,b,c]),J.CPU=q([f]),J.DEVICE=q([l,p,d,w,m,v,h,g,y]),J.ENGINE=J.OS=q([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/47a95eb2.467da0b7.js b/assets/js/47a95eb2.467da0b7.js new file mode 100644 index 000000000..00f5fc8dc --- /dev/null +++ b/assets/js/47a95eb2.467da0b7.js @@ -0,0 +1,2 @@ +/*! For license information please see 47a95eb2.467da0b7.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[410],{183:(e,t,n)=>{n.r(t),n.d(t,{Input:()=>d,InputExample:()=>p,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="DebounceWrapper",l={id:"react/components/DebounceWrapper",title:"DebounceWrapper",description:"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/DebounceWrapper.mdx",sourceDirName:"react/components",slug:"/react/components/DebounceWrapper",permalink:"/modern-kit/docs/react/components/DebounceWrapper",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly"},next:{title:"FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage"}},u={},d=({onChange:e})=>{const t={input:"input",...(0,r.a)()},[n,a]=(0,o.useState)("");return(0,i.jsx)(t.input,{type:"text",onChange:t=>{a(t.target.value),e(t.target.value)},value:n})},p=()=>{const e={p:"p",...(0,r.a)()},[t,n]=(0,o.useState)("");return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(a.uM,{capture:"onChange",wait:500,children:(0,i.jsx)(d,{onChange:e=>{n(e)}})}),(0,i.jsxs)(e.p,{children:["Text: ",t]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Button Click Case",id:"button-click-case",level:3},{value:"Input Change Case",id:"input-change-case",level:3},{value:"Example",id:"example",level:2},{value:"Button Click Case",id:"button-click-case-1",level:3},{value:"Input Change Case",id:"input-change-case-1",level:3}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"debouncewrapper",children:"DebounceWrapper"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8",(0,i.jsx)(t.code,{children:"(ex: Click Event)"}),"\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/DebounceWrapper/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n\ninterface DebounceWrapperProps {\n children: JSX.Element; // \ud558\ub098\uc758 \uc694\uc18c\ub9cc children prop\uc73c\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n capture: string;\n wait: DebounceParameters[1]; // number\n options?: DebounceParameters[2]; // DebounceSettings\n}\n\nconst DebounceWrapper: ({\n children,\n capture,\n wait,\n options,\n}: DebounceWrapperProps) => React.FunctionComponentElement;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"button-click-case",children:"Button Click Case"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { DebounceWrapper } from '@modern-kit/react'\n\nconst Example = () => {\n const onClick = () => {\n console.log('debounce');\n };\n \n return (\n \n \n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"input-change-case",children:"Input Change Case"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"const Input = ({ onChange }: { onChange: (value: string) => void }) => {\n const [value, setValue] = useState('');\n\n const handleChange = (e: ChangeEvent) => {\n setValue(e.target.value);\n onChange(e.target.value);\n };\n\n return ;\n};\n\nconst Example = () => {\n const [text, setText] = useState('');\n\n const onChange = (value: string) => {\n setText(value);\n };\n\n return (\n <>\n \n \n \n

{text}

\n \n );\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(t.h3,{id:"button-click-case-1",children:"Button Click Case"}),"\n",(0,i.jsx)("p",{style:{marginBottom:"4px"},children:"\ube0c\ub77c\uc6b0\uc800\uc758 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc5d0\uc11c \ub3d9\uc791\uc744 \ud655\uc778\ud558\uc138\uc694."}),"\n",(0,i.jsx)(a.uM,{capture:"onClick",wait:500,children:(0,i.jsx)("button",{onClick:()=>{console.log("debounce")},children:"Button"})}),"\n",(0,i.jsx)("br",{}),"\n","\n","\n",(0,i.jsx)(t.h3,{id:"input-change-case-1",children:"Input Change Case"}),"\n",(0,i.jsx)(p,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>Ye,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ue,Mm:()=>xe,Nr:()=>oe,OR:()=>we,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Ie,_:()=>Fe,a9:()=>ue,ac:()=>De,cM:()=>lt,df:()=>pe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>We,jr:()=>Te,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>Ve,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var f="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=f||w||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?I:+e}var L=function(){return m.Date.now()},$="Expected a function",F=Math.max,A=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=L();if(f(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?A(n,o-(e-l)):n}(e))}function m(e){return s=void 0,p&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=f(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?F(z(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var B="Expected a function";function W(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const q={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function V(){return!U()}function Y(e){return W(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>W(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,f]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),f(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},fe=V()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);fe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return W(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>W(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,q[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return W(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return W(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:b,resetStep:f}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){fe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>Me[e],ze=Pe("localStorage"),Le=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Fe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Le(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Le(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function De(e,t){const[n,i]=(0,r.useState)(Ae(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Be={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function We(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Be),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,p=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,p=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ve(){return De("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return fe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",b="version",f="architecture",w="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",I="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",F="Zebra",A="Facebook",D="Chromium OS",B="Mac OS",W=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,V.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,V.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,D).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=W([u,b,c]),J.CPU=W([f]),J.DEVICE=W([l,p,d,w,m,g,h,v,y]),J.ENGINE=J.OS=W([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return fe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){fe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>U()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/54102c04.d6db603d.js.LICENSE.txt b/assets/js/47a95eb2.467da0b7.js.LICENSE.txt similarity index 100% rename from assets/js/54102c04.d6db603d.js.LICENSE.txt rename to assets/js/47a95eb2.467da0b7.js.LICENSE.txt diff --git a/assets/js/54102c04.7c9e1c75.js b/assets/js/54102c04.7c9e1c75.js new file mode 100644 index 000000000..1fa903621 --- /dev/null +++ b/assets/js/54102c04.7c9e1c75.js @@ -0,0 +1,2 @@ +/*! For license information please see 54102c04.7c9e1c75.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2269],{4871:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="LazyImage",c={id:"react/components/LazyImage",title:"LazyImage",description:"useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/LazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Iterator",permalink:"/modern-kit/docs/react/components/Iterator"},next:{title:"OutsideClick",permalink:"/modern-kit/docs/react/components/OutsideClick"}},l={},u=()=>{const e={div:"div",...(0,r.a)()};return(0,i.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ub97c \ud65c\uc6a9\ud574 ",(0,i.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,i.jsx)(t.code,{children:"Lazy Loading"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,i.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,i.jsxs)(t.p,{children:["\ub9cc\uc57d, \uc774\ubbf8\uc9c0 ",(0,i.jsx)(t.code,{children:"load"})," \uc911\uc5d0 ",(0,i.jsx)(t.code,{children:"\ud2b9\uc815 Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub178\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74, \uc774\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(t.code,{children:"LazyImage\ub97c \ud655\uc7a5"}),"\ud574\uc11c \ub9cc\ub4e0 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/FallbackLazyImage",children:"FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \uac00 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/LazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>$e,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Be,jr:()=>Ie,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,z=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,L=/^0o[0-7]+$/i,_=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=R.test(e);return n||L.test(e)?_(e.slice(2),n?2:8):z.test(e)?N:+e}var P=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=P();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=P(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(M(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(P())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const Y={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,Y[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const ze="modern-kit-local-storage",Re="modern-kit-session-storage",Le={localStorage:{key:ze,subscribe:e=>{window.addEventListener(ze,e)},unsubscribe:e=>{window.removeEventListener(ze,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(ze))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},_e=e=>Le[e],Me=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),Ae=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ye,Ue)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=_e("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",O="Firefox",I="Google",T="Huawei",N="LG",z="Microsoft",R="Motorola",L="Opera",_="Samsung",M="Sharp",P="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,g,h,v,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/5d610355.ce5e9f7c.js.LICENSE.txt b/assets/js/54102c04.7c9e1c75.js.LICENSE.txt similarity index 100% rename from assets/js/5d610355.ce5e9f7c.js.LICENSE.txt rename to assets/js/54102c04.7c9e1c75.js.LICENSE.txt diff --git a/assets/js/54102c04.d6db603d.js b/assets/js/54102c04.d6db603d.js deleted file mode 100644 index 0403b5dec..000000000 --- a/assets/js/54102c04.d6db603d.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 54102c04.d6db603d.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[2269],{4871:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="LazyImage",c={id:"react/components/LazyImage",title:"LazyImage",description:"useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/LazyImage.mdx",sourceDirName:"react/components",slug:"/react/components/LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Iterator",permalink:"/modern-kit/docs/react/components/Iterator"},next:{title:"OutsideClick",permalink:"/modern-kit/docs/react/components/OutsideClick"}},l={},u=()=>{const e={div:"div",...(0,r.a)()};return(0,i.jsxs)(e.div,{style:{background:"#f8f8f8",width:"500px"},children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/b5640bec-2abc-4205-afbf-ccfd9876a90b",alt:"img1",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/207743a7-b29f-4826-bc08-8df0d67e568b",alt:"img2",width:500,height:500}),(0,i.jsx)(e.div,{style:{width:"100%",height:"150px"}}),(0,i.jsx)(o.wY,{src:"https://github.com/Team-Grace/devgrace/assets/64779472/d1957ec8-fe87-406e-bfda-fb4ee505b152",alt:"img3",width:500,height:500})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"lazyimage",children:"LazyImage"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ub97c \ud65c\uc6a9\ud574 ",(0,i.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c ",(0,i.jsx)(t.code,{children:"Lazy Loading"})," \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,i.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,i.jsxs)(t.p,{children:["\ub9cc\uc57d, \uc774\ubbf8\uc9c0 ",(0,i.jsx)(t.code,{children:"load"})," \uc911\uc5d0 ",(0,i.jsx)(t.code,{children:"\ud2b9\uc815 Fallback \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub178\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74, \uc774\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(t.code,{children:"LazyImage\ub97c \ud655\uc7a5"}),"\ud574\uc11c \ub9cc\ub4e0 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/components/FallbackLazyImage",children:"FallbackLazyImage \ucef4\ud3ec\ub10c\ud2b8"})})," \uac00 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/LazyImage/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"interface LazyImageProps\n extends React.ComponentProps<'img'>,\n IntersectionObserverInit {\n src: string;\n}\n\nconst LazyImage: React.ForwardRefExoticComponent<\n Omit & React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { LazyImage } from '@modern-kit/react';\nimport img1 from '../assets/img1.png';\nimport img2 from '../assets/img2.png';\n\nconst Example = () => {\n return (\n
\n {/* ... */}\n \n {/* ... */}\n \n {/* ... */}\n
\n );\n}; \n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ue,FS:()=>ot,GN:()=>Ee,Hk:()=>ge,KS:()=>nt,LN:()=>Ye,Mm:()=>ve,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Ie,_:()=>Pe,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>He,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>pe,yU:()=>Ve,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,m="object"==typeof self&&self&&self.Object===Object&&self,p=w||m||Function("return this")(),h=p.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var z=NaN,N=/^[-+]0x[0-9a-f]+$/i,L=/^0b[01]+$/i,R=/^0o[0-7]+$/i,_=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return z;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=L.test(e);return n||R.test(e)?_(e.slice(2),n?2:8):N.test(e)?z:+e}var P=function(){return p.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function m(){var e=P();if(w(e))return p(e);s=setTimeout(m,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function p(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=P(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(m,t),b(c)}return void 0===s&&(s=setTimeout(m,t)),a}return t=M(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:p(P())},h}var X="Expected a function";function Y(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function W(e){return Y(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>Y(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),m=!b,p=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:p,children:[m&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),me=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const pe=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ge=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ve(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return Y(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>Y(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return Y(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return Y(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){me((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",ze="modern-kit-session-storage",Ne={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:ze,subscribe:e=>{window.addEventListener(ze,e)},unsubscribe:e=>{window.removeEventListener(ze,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(ze))}}},Le=e=>Ne[e],Re=Le("localStorage"),_e=e=>window.localStorage.getItem(e),Me=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Pe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Me,(()=>_e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=_e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return me((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Be(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return me((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function He(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ge(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Le("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",m="console",p="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",I="Google",T="Huawei",z="LG",N="Microsoft",L="Motorola",R="Opera",_="Samsung",M="Sharp",P="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",Y=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=Y([u,b,c]),J.CPU=Y([w]),J.DEVICE=Y([l,f,d,m,p,g,h,v,y]),J.ENGINE=J.OS=Y([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return me((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){me((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return me((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/5d610355.ce5e9f7c.js b/assets/js/5d610355.ce5e9f7c.js deleted file mode 100644 index 0af7cdc26..000000000 --- a/assets/js/5d610355.ce5e9f7c.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 5d610355.ce5e9f7c.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1958],{4126:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useInterval",l={id:"react/hooks/useInterval",title:"useInterval",description:"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useInterval.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useInterval",permalink:"/modern-kit/docs/react/hooks/useInterval",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIntersectionObserver",permalink:"/modern-kit/docs/react/hooks/useIntersectionObserver"},next:{title:"useIsMounted",permalink:"/modern-kit/docs/react/hooks/useIsMounted"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(0),{set:s,clear:c,reset:l}=(0,o.Yz)((()=>n(t+1)),{delay:1e3,enabled:!1});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:t}),(0,i.jsx)(e.button,{onClick:s,children:"set"}),(0,i.jsx)(e.button,{onClick:c,children:"clear"}),(0,i.jsx)(e.button,{onClick:l,children:"reset"})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useinterval",children:"useInterval"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"window.setInterval"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["2\ubc88\uc9f8 \uc778\uc790 options\ub294 ",(0,i.jsx)(t.code,{children:"number"})," \ud639\uc740 ",(0,i.jsx)(t.code,{children:"{ delay: SetIntervalParameters[1]; enabled?: boolean }"})," \ud0c0\uc785\uc758 \uac1d\uccb4\ub97c \ub118\uaca8 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["options\uac00 ",(0,i.jsx)(t.code,{children:"number"})," \ud0c0\uc785\uc774\uba74 \ud574\ub2f9 \uac12\uc740 ",(0,i.jsx)(t.code,{children:"setInterval"}),"\uc758 ",(0,i.jsx)(t.code,{children:"delay"})," \uac12\uc774 \ub418\uba70, \uac1d\uccb4 \ud0c0\uc785\uc77c \uacbd\uc6b0 delay\uc640 \ub354\ubd88\uc5b4 ",(0,i.jsx)(t.code,{children:"setInterval\uc758 \ub3d9\uc791 \uc5ec\ubd80"}),"\ub97c \uacb0\uc815\ud558\ub294 ",(0,i.jsx)(t.code,{children:"enabled"})," \uc635\uc158\uc744 \ucd94\uac00\ub85c \ub2e4\ub8f0 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\ud83d\udca1 options\uac00 number \ud0c0\uc785\uc758 \uacbd\uc6b0 enabled\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"true"}),"\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["interval\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"set"}),", ",(0,i.jsx)(t.code,{children:"reset"}),", ",(0,i.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useInterval/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntervalOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useInterval(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useInterval(\n callback: () => void,\n options: IntervalOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useInterval } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, clear, reset } = useInterval(\n () => setNumber(number + 1),\n { delay: 1000, enabled: false } // \uc790\ub3d9 \uc2e4\ud589 X\n );\n\n /*\n * useInterval(() => {\n * setNumber(number + 1);\n * }, 1000); // \uc790\ub3d9 \uc2e4\ud589\n */\n\n return (\n
\n

{number}

\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Ye,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},Y=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield Y(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Re=e=>_e[e],Me=Re("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Re("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",O="Firefox",I="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/5d610355.e6858672.js b/assets/js/5d610355.e6858672.js new file mode 100644 index 000000000..33d872696 --- /dev/null +++ b/assets/js/5d610355.e6858672.js @@ -0,0 +1,2 @@ +/*! For license information please see 5d610355.e6858672.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1958],{4126:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useInterval",l={id:"react/hooks/useInterval",title:"useInterval",description:"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useInterval.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useInterval",permalink:"/modern-kit/docs/react/hooks/useInterval",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIntersectionObserver",permalink:"/modern-kit/docs/react/hooks/useIntersectionObserver"},next:{title:"useIsMounted",permalink:"/modern-kit/docs/react/hooks/useIsMounted"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(0),{set:s,clear:c,reset:l}=(0,o.Yz)((()=>n(t+1)),{delay:1e3,enabled:!1});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:t}),(0,i.jsx)(e.button,{onClick:s,children:"set"}),(0,i.jsx)(e.button,{onClick:c,children:"clear"}),(0,i.jsx)(e.button,{onClick:l,children:"reset"})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useinterval",children:"useInterval"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"window.setInterval"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["2\ubc88\uc9f8 \uc778\uc790 options\ub294 ",(0,i.jsx)(t.code,{children:"number"})," \ud639\uc740 ",(0,i.jsx)(t.code,{children:"{ delay: SetIntervalParameters[1]; enabled?: boolean }"})," \ud0c0\uc785\uc758 \uac1d\uccb4\ub97c \ub118\uaca8 \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["options\uac00 ",(0,i.jsx)(t.code,{children:"number"})," \ud0c0\uc785\uc774\uba74 \ud574\ub2f9 \uac12\uc740 ",(0,i.jsx)(t.code,{children:"setInterval"}),"\uc758 ",(0,i.jsx)(t.code,{children:"delay"})," \uac12\uc774 \ub418\uba70, \uac1d\uccb4 \ud0c0\uc785\uc77c \uacbd\uc6b0 delay\uc640 \ub354\ubd88\uc5b4 ",(0,i.jsx)(t.code,{children:"setInterval\uc758 \ub3d9\uc791 \uc5ec\ubd80"}),"\ub97c \uacb0\uc815\ud558\ub294 ",(0,i.jsx)(t.code,{children:"enabled"})," \uc635\uc158\uc744 \ucd94\uac00\ub85c \ub2e4\ub8f0 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\ud83d\udca1 options\uac00 number \ud0c0\uc785\uc758 \uacbd\uc6b0 enabled\ub294 \uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"true"}),"\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["interval\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"set"}),", ",(0,i.jsx)(t.code,{children:"reset"}),", ",(0,i.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useInterval/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntervalOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useInterval(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useInterval(\n callback: () => void,\n options: IntervalOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useInterval } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, clear, reset } = useInterval(\n () => setNumber(number + 1),\n { delay: 1000, enabled: false } // \uc790\ub3d9 \uc2e4\ud589 X\n );\n\n /*\n * useInterval(() => {\n * setNumber(number + 1);\n * }, 1000); // \uc790\ub3d9 \uc2e4\ud589\n */\n\n return (\n
\n

{number}

\n \n \n \n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Be,jr:()=>Ie,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",C=h?h.toStringTag:void 0;var E="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},Y=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield Y(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ye=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ye)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",C="Browser",E="Chrome",O="Firefox",I="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/61a35b61.ad78099b.js.LICENSE.txt b/assets/js/5d610355.e6858672.js.LICENSE.txt similarity index 100% rename from assets/js/61a35b61.ad78099b.js.LICENSE.txt rename to assets/js/5d610355.e6858672.js.LICENSE.txt diff --git a/assets/js/61a35b61.82ede79f.js b/assets/js/61a35b61.82ede79f.js new file mode 100644 index 000000000..e4128f903 --- /dev/null +++ b/assets/js/61a35b61.82ede79f.js @@ -0,0 +1,2 @@ +/*! For license information please see 61a35b61.82ede79f.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9034],{1982:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(5549);const s={},c="useMediaQuery",l={id:"react/hooks/useMediaQuery",title:"useMediaQuery",description:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMediaQuery.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage"},next:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"}},u={},d=()=>{const e={div:"div",p:"p",...(0,r.a)()},t=(0,o.ac)("(min-width: 768px)");return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,i.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function w(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"})}),"\n",(0,i.jsx)(t.p,{children:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMediaQuery/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const isMatch = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(a.Z,{children:()=>(0,i.jsx)(d,{})})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>we,Cf:()=>Se,D9:()=>Qe,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>He,S1:()=>se,VP:()=>ke,XI:()=>Me,Xs:()=>nt,Yz:()=>Ne,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Je,qx:()=>w,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const w=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=b||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function M(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(M(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=M(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var $=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function w(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(b(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?w(e):(i=r=void 0,a)}function h(){var e=$(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?w(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),w(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,M(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function Q(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return Q(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!Z(e[o],t[o],n))return!1;return!0},Z=(e,t,n)=>{if(e===t)return!0;if(K(e)&&K(t)&&isNaN(e)&&isNaN(t))return!0;if(J(e)&&J(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!Z(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function G(e,t){return Z(e,t,new WeakMap)}function J(e){return"function"==typeof e}function K(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=G){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{J(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[w,b]=(0,r.useState)(!1),p=!w,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const we=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},be=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);be((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(we,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Q(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=J(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),w=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:w,resetStep:b}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){be((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Me({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return K(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Ie={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Pe=e=>Ie[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(J(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=J(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function Qe(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return be((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ze=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ge=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ze(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ze(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ze(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ze(c.width,i.width,s)}};function Je(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ge(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ke=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Ke.subscribe(e),()=>{Ke.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(J(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=J(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=J(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=J(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return M(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return K(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",w="version",b="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",M="Huawei",N="LG",R="Microsoft",_="Motorola",I="Opera",P="Samsung",z="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Q=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};Z.VERSION="1.0.38",Z.BROWSER=B([u,w,c]),Z.CPU=B([b]),Z.DEVICE=B([l,f,d,p,m,v,h,g,y]),Z.ENGINE=Z.OS=B([u,w]),e.exports&&(t=e.exports=Z),t.UAParser=Z;var G=typeof n!==o&&(n.jQuery||n.Zepto);if(G&&!G.ua){var J=new Z;G.ua=J.getResult(),G.ua.get=function(){return J.getUA()},G.ua.set=function(e){J.setUA(e);var t=J.getResult();for(var n in t)G.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return be((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){be((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/67c089fb.9ec40726.js.LICENSE.txt b/assets/js/61a35b61.82ede79f.js.LICENSE.txt similarity index 100% rename from assets/js/67c089fb.9ec40726.js.LICENSE.txt rename to assets/js/61a35b61.82ede79f.js.LICENSE.txt diff --git a/assets/js/61a35b61.ad78099b.js b/assets/js/61a35b61.ad78099b.js deleted file mode 100644 index ad6be08dd..000000000 --- a/assets/js/61a35b61.ad78099b.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 61a35b61.ad78099b.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9034],{1982:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useMediaQuery",c={id:"react/hooks/useMediaQuery",title:"useMediaQuery",description:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useMediaQuery.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useMediaQuery",permalink:"/modern-kit/docs/react/hooks/useMediaQuery",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage"},next:{title:"useMergeRefs",permalink:"/modern-kit/docs/react/hooks/useMergeRefs"}},l={},u=()=>{const e={div:"div",p:"p",...(0,r.a)()},t=(0,o.ac)("(min-width: 768px)");return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \ub108\ube44\ub97c \uc218\uc815\ud574\ubcf4\uc138\uc694!"}),(0,i.jsx)(e.p,{children:t?"viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.":"viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4."})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usemediaquery",children:"useMediaQuery"})}),"\n",(0,i.jsx)(t.p,{children:"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useMediaQuery/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useMediaQuery: (query: string, defaultValue?: boolean) => boolean\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useMediaQuery } from '@modern-kit/react';\n\nconst Example = () => {\n const isMatch = useMediaQuery('(min-width: 768px)');\n\n return (\n
\n

\n {isMatch\n ? 'viewport \ub108\ube44\uac00 768px \uc774\uc0c1\uc785\ub2c8\ub2e4.'\n : 'viewport \ub108\ube44\uac00 768px \ubbf8\ub9cc\uc785\ub2c8\ub2e4.'}\n

\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Ze,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>He,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function M(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(M(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=M(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,M(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function Q(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return Q(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Z(e)&&Z(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Z(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Q(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=K(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Z(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Me="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Me,subscribe:e=>{window.addEventListener(Me,e)},unsubscribe:e=>{window.removeEventListener(Me,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Me))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Re=e=>_e[e],Ie=Re("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Ie.subscribe(e),()=>{Ie.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=K(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Qe=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Qe(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Qe(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Qe(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Qe(c.width,i.width,s)}};function He(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ge=Re("sessionStorage"),Je=e=>window.sessionStorage.getItem(e),Ke=e=>(Ge.subscribe(e),()=>{Ge.unsubscribe(e)});function Ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(Ke,(()=>Je(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Je(t),r=n?te(n):i,o=K(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Ge.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ge.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=K(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return M(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Z(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",M="Huawei",N="LG",_="Microsoft",R="Motorola",I="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Q=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};G.VERSION="1.0.38",G.BROWSER=B([u,b,c]),G.CPU=B([w]),G.DEVICE=B([l,f,d,p,m,v,h,g,y]),G.ENGINE=G.OS=B([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/63f47a7c.5ea6d889.js b/assets/js/63f47a7c.5ea6d889.js new file mode 100644 index 000000000..53e115c74 --- /dev/null +++ b/assets/js/63f47a7c.5ea6d889.js @@ -0,0 +1,2 @@ +/*! For license information please see 63f47a7c.5ea6d889.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7539],{7972:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>f,assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>u,toc:()=>b});var i=n(1986),r=n(9937),o=n(384),a=n(7800),s=n(5549);const c={},l="useEventListener",u={id:"react/hooks/useEventListener",title:"useEventListener",description:"\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \uc790\ub3d9\uc73c\ub85c \uc81c\uac70\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useEventListener.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useEventListener",permalink:"/modern-kit/docs/react/hooks/useEventListener",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle"},next:{title:"useFileReader",permalink:"/modern-kit/docs/react/hooks/useFileReader"}},d={},f=()=>{const e={div:"div",h3:"h3",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(0);return(0,o.OR)(document,"click",(()=>{n(t+1)})),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"\ud654\uba74\uc744 \ud074\ub9ad\ud574\ubcf4\uc138\uc694!"}),(0,i.jsxs)(e.p,{children:["number: ",t]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function w(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useeventlistener",children:"useEventListener"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 ",(0,i.jsx)(t.code,{children:"\uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00"}),"\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c ",(0,i.jsx)(t.code,{children:"\uc790\ub3d9\uc73c\ub85c \uc81c\uac70"}),"\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useEventListener/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// Window Event based useEventListener interface\nexport function useEventListener(\n element: Window,\n type: K,\n listener: (event: WindowEventMap[K]) => void,\n options?: AddEventListenerOptions\n): void;\n\n// Document Event based useEventListener interface\nexport function useEventListener(\n element: Document,\n type: K,\n listener: (event: DocumentEventMap[K]) => void,\n options?: AddEventListenerOptions\n): void;\n\n// MediaQueryList Event based useEventListener interface\nexport function useEventListener(\n element: MediaQueryList,\n type: K,\n listener: (event: MediaQueryListEventMap[K]) => void,\n options?: AddEventListenerOptions\n): void;\n\n// Element Event based useEventListener interface\nexport function useEventListener<\n K extends keyof HTMLElementEventMap,\n T extends HTMLElement\n>(\n element: T | null,\n type: K,\n listener: (event: HTMLElementEventMap[K]) => void,\n options?: AddEventListenerOptions\n): void;\n\n// SVGElement Event based useEventListener interface\nexport function useEventListener<\n K extends keyof HTMLElementEventMap,\n T extends SVGElement\n>(\n element: T | null,\n type: K,\n listener: (event: SVGElementEventMap[K]) => void,\n options?: AddEventListenerOptions\n): void;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState, useRef } from 'react';\nimport { useEventListener } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0)\n \n // document\uc5d0 click \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ud130 \ucd94\uac00\n useEventListener(document, 'click', () => {\n setNumber(number + 1);\n })\n\n return (\n
\n

\ud654\uba74\uc744 \ud074\ub9ad\ud574\ubcf4\uc138\uc694!

\n

number: {number}

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(s.Z,{children:()=>(0,i.jsx)(f,{})})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Ee,D9:()=>Ye,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>De,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>He,S1:()=>se,VP:()=>ke,XI:()=>Le,Xs:()=>nt,Yz:()=>Me,_:()=>$e,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Se,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ke,qQ:()=>Je,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,E="[object Null]",S="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function L(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var M=NaN,N=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,_=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?S:E:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return M;if(L(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=L(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||_.test(e)?I(e.slice(2),n?2:8):N.test(e)?M:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,L(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(P(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const V={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function D(){return"undefined"==typeof window}function K(){return!D()}function Y(e){return B(this,0,void 0,(function*(){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(J(e)&&J(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function Z(e,t){return G(e,t,new WeakMap)}function J(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=Z){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{J(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=K()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(D())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,V[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Ee(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Se({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=J(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Se({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Le({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Me(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Pe=Ie("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(J(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=J(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>K()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ve=()=>navigator.onLine,Ue=()=>!0;function De({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ve,Ue)}}function Ke(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ze=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Je(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ze(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(J(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=J(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=J(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=J(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!K())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Se(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return L(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",E="ASUS",S="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",L="Huawei",M="LG",N="Microsoft",R="Motorola",_="Opera",I="Samsung",P="Sharp",z="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,K.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,K.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?D(e,500):e,this},this.setUA(v),this};G.VERSION="1.0.38",G.BROWSER=B([u,b,c]),G.CPU=B([w]),G.DEVICE=B([l,f,d,p,m,v,h,g,y]),G.ENGINE=G.OS=B([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var Z=typeof n!==o&&(n.jQuery||n.Zepto);if(Z&&!Z.ua){var J=new G;Z.ua=J.getResult(),Z.ua.get=function(){return J.getUA()},Z.ua.set=function(e){J.setUA(e);var t=J.getResult();for(var n in t)Z.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>D()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/67c0cc0e.336b4b95.js.LICENSE.txt b/assets/js/63f47a7c.5ea6d889.js.LICENSE.txt similarity index 100% rename from assets/js/67c0cc0e.336b4b95.js.LICENSE.txt rename to assets/js/63f47a7c.5ea6d889.js.LICENSE.txt diff --git a/assets/js/67c089fb.46db16ad.js b/assets/js/67c089fb.46db16ad.js new file mode 100644 index 000000000..1f5ffc43d --- /dev/null +++ b/assets/js/67c089fb.46db16ad.js @@ -0,0 +1,2 @@ +/*! For license information please see 67c089fb.46db16ad.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3776],{2280:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="useDebounce",l={id:"react/hooks/useDebounce",title:"useDebounce",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebounce.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList"},next:{title:"useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,o.a)()},[t,n]=(0,r.useState)(1),[s,c]=(0,r.useState)(1),l=(0,a.Nr)((()=>{c(s+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{style:{display:"flex"},children:[(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsx)(e.div,{style:{width:"50px"}}),(0,i.jsx)(e.button,{onClick:l,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["count: ",t]}),(0,i.jsxs)(e.p,{children:["debouncedCount: ",s]})]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebounce",children:"useDebounce"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebounce any>(\n callback: T,\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n): DebounceReturnType;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [debouncedCount, setDebouncedCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const debouncedCountUp = useDebounce(() => {\n setDebouncedCount(debouncedCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

debouncedCount: {debouncedCount}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>rt,LN:()=>Ve,Mm:()=>xe,Nr:()=>re,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>Le,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>be,fB:()=>ot,g4:()=>Ce,iP:()=>dt,ii:()=>Ue,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Te,z$:()=>Ee});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):_.test(e)?R:+e}var D=function(){return m.Date.now()},$="Expected a function",L=Math.max,A=Math.min;function F(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=D();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?A(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=D(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,r=(d="maxWait"in n)?L(z(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(D())},h}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>F(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,o.useState)(!1),p=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})},we=Y()?o.useLayoutEffect:o.useEffect;function pe(e,t,n,i={}){const o=oe(i),r=ne(n);we((()=>{if(e)return e.addEventListener(t,r,o),()=>{e.removeEventListener(t,r,o)}}),[t,e,o,r])}function me(e){const t=(0,o.useRef)(null),n=(0,o.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,o.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,o.forwardRef)(((e,t)=>{var{as:n,children:o,callback:a}=e,s=r(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:o}))}));(0,o.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function xe(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield B(e,X[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function je(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Te(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=je("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Re(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Pe={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Me=e=>Pe[e],ze=Me("localStorage"),De=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)($e,(()=>De(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=De(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,o.useState)(Ae(e,t)),r=(0,o.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",r),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ue(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(qe),i=(0,o.useCallback)((t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=r-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Be=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Xe,Be)}}function Ye(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+Je(c.width,i.width,s)}};function Ze(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=et(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},Ce(e))}function ot(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),F(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function rt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",D="Sony",$="Xiaomi",L="Zebra",A="Facebook",F="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,f,c]),J.CPU=U([w]),J.DEVICE=U([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=U([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,o.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=re(n,e),r=(0,o.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/6dde689d.80fea765.js.LICENSE.txt b/assets/js/67c089fb.46db16ad.js.LICENSE.txt similarity index 100% rename from assets/js/6dde689d.80fea765.js.LICENSE.txt rename to assets/js/67c089fb.46db16ad.js.LICENSE.txt diff --git a/assets/js/67c089fb.9ec40726.js b/assets/js/67c089fb.9ec40726.js deleted file mode 100644 index 871a92622..000000000 --- a/assets/js/67c089fb.9ec40726.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 67c089fb.9ec40726.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3776],{2280:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="useDebounce",l={id:"react/hooks/useDebounce",title:"useDebounce",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDebounce.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList"},next:{title:"useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,o.a)()},[t,n]=(0,r.useState)(1),[s,c]=(0,r.useState)(1),l=(0,a.Nr)((()=>{c(s+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{style:{display:"flex"},children:[(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsx)(e.div,{style:{width:"50px"}}),(0,i.jsx)(e.button,{onClick:l,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["count: ",t]}),(0,i.jsxs)(e.p,{children:["debouncedCount: ",s]})]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebounce",children:"useDebounce"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebounce/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// lodash-es DebounceSettings\n// https://www.geeksforgeeks.org/lodash-_-debounce-method/\ninterface DebounceSettings {\n leading?: boolean | undefined;\n maxWait?: number | undefined;\n trailing?: boolean | undefined;\n}\n\ntype DebounceParameters = Parameters;\ntype DebounceReturnType = ReturnType<\n typeof debounce\n>;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebounce any>(\n callback: T,\n wait: DebounceParameters[1], // number\n options?: DebounceParameters[2] // DebounceSettings\n): DebounceReturnType;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebounce } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [debouncedCount, setDebouncedCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const debouncedCountUp = useDebounce(() => {\n setDebouncedCount(debouncedCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

debouncedCount: {debouncedCount}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Be,FS:()=>rt,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Ue,Mm:()=>ge,Nr:()=>re,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ae,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ee,z$:()=>Se});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},D="Expected a function",$=Math.max,A=Math.min;function F(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(D);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?A(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,r=(d="maxWait"in n)?$(z(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>F(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,o.useState)(!1),p=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})};const we=(0,o.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=r(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,o.useRef)(null),n=ne(e);return(0,o.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield B(e,X[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ce(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Ee(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ce("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Oe(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Pe=Ie("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Me(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const De=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,o.useState)(De(e,t));return(0,o.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ae(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,i=a-t.top,o=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=o,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Fe,qe)}}function Xe(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+We(c.width,i.width,s)}};function Ge(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=He(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ke(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),F(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",L="Sony",D="Xiaomi",$="Zebra",A="Facebook",F="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,f,c]),J.CPU=U([w]),J.DEVICE=U([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=U([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var ot=it.exports;function rt(){const[e,t]=(0,o.useState)(null);return pe((()=>{const e=new ot.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,r]=(0,o.useState)({width:null,height:null}),a=(0,o.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),c=(0,o.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/67c0cc0e.336b4b95.js b/assets/js/67c0cc0e.336b4b95.js deleted file mode 100644 index c4a25e985..000000000 --- a/assets/js/67c0cc0e.336b4b95.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 67c0cc0e.336b4b95.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6439],{5745:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>w,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var o=n(1986),i=n(9937),r=n(384),a=n(7800);const s={},l="useScrollTo",c={id:"react/hooks/useScrollTo",title:"useScrollTo",description:"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useScrollTo.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock"},next:{title:"useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage"}},u={},d=()=>{const e={button:"button",div:"div",...(0,i.a)()},{containerRef:t,scrollToPosition:n,scrollToElement:s}=(0,r.qQ)(),l=(0,a.useRef)(null),c=e=>{s(l.current,{behavior:"smooth",offsetY:e})},u=e=>{s(l.current,{behavior:"smooth",alignY:e})};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{n({behavior:"smooth",top:400})},children:"\ud3ec\uc9c0\uc158 \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>{s(l.current,{behavior:"smooth"})},children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>c(200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset 200"}),(0,o.jsx)(e.button,{onClick:()=>c(-200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset -200"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>u("start"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align start"}),(0,o.jsx)(e.button,{onClick:()=>u("center"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align center"}),(0,o.jsx)(e.button,{onClick:()=>u("end"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align end"})]}),(0,o.jsxs)(e.div,{ref:t,style:{width:"500px",height:"800px",overflow:"scroll"},children:[(0,o.jsx)(e.div,{style:{height:"400px",background:"green"},children:"InnerBox1"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"red"},children:"InnerBox2"}),(0,o.jsx)(e.div,{ref:l,style:{height:"400px",background:"coral",fontSize:"24px"},children:"target Box"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"aqua"},children:"InnerBox4"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"black"},children:"InnerBox4"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usescrollto",children:"useScrollTo"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"\uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["useScrollTo \ud6c5\uc774 \ubc18\ud658\ud558\ub294 ",(0,o.jsx)(t.code,{children:"containerRef"}),"\ub97c \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ud560\ub2f9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4.\n",(0,o.jsx)(t.code,{children:"containerRef"}),"\ub97c \ud560\ub2f9\ud558\uc9c0 \uc54a\uc73c\uba74 ",(0,o.jsx)(t.code,{children:"window"}),"\ub97c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"scrollToPosition"})," \ud568\uc218\ub294 top, left\uc640 \uac19\uc740 ",(0,o.jsx)(t.code,{children:"position"}),"\uc744 \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"scrollToElement"})," \ud568\uc218\ub294 \uc778\uc790\ub85c \ub123\uc740 ",(0,o.jsx)(t.code,{children:"\ud0c0\uac9f \uc694\uc18c"}),"\ub97c \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"offsetY/X"})," \uac12\uc744 \uc635\uc158\uc73c\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: Window | null\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: HTMLDivElement | null\n\n
\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollTo/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type ScrollBehavior = \"auto\" | \"instant\" | \"smooth\";\ntype Align = 'start' | 'center' | 'end';\n\ninterface ScrollOptions {\n behavior?: ScrollBehavior; // default: 'auto'\n}\n\ninterface ScrollToOptions extends ScrollOptions {\n left?: number; // default: 0\n top?: number; // default: 0\n}\n\ninterface ScrollToElementOptions {\n offsetX?: number; // default: 0\n offsetY?: number; // default: 0\n behavior?: ScrollBehavior; // default: 'auto'\n alignY?: Align; // default: 'start'\n alignX?: Align; // default: 'start'\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useScrollTo(): {\n containerRef: React.MutableRefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n\nfunction useScrollTo(): {\n containerRef: React.RefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollTo } from '@modern-kit/react';\n\nconst Example = () => {\n const { containerRef, scrollToPosition, scrollToElement } = useScrollTo();\n const targetRef = useRef(null);\n\n const handleScrollToPosition = () => {\n scrollToPosition({\n behavior: 'smooth',\n top: 400,\n });\n };\n\n const handleScrollToElement = () => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n });\n };\n\n const handleScrollToElementOffset = (offset: number) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n offsetY: offset,\n });\n };\n\n const handleScrollToElementAlign = (type: Align) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n alignY: type,\n });\n };\n return (\n
\n
\n \n \n \n \n
\n\n
\n \n \n \n
\n\n \n
InnerBox1
\n
InnerBox2
\n
\n target Box\n
\n
InnerBox4
\n
InnerBox4
\n
\n
\n );\n};\n\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var o=n(7800);const i={},r=o.createContext(i);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>ye,D9:()=>Ue,FS:()=>rt,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>re,Pr:()=>Ve,S1:()=>se,VP:()=>xe,XI:()=>Ce,Xs:()=>Qe,Yz:()=>Oe,_:()=>ze,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Be,jr:()=>Te,my:()=>we,nA:()=>me,oM:()=>d,oz:()=>Ye,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>ce,xX:()=>de,xu:()=>he,yU:()=>De,yn:()=>je,z$:()=>Se});var o=n(1986),i=n(7800);n(4041);function r(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:l}=e,c=r(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},l)),[n,l]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,o.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},c,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,o.jsx)(o.Fragment,{}),children:t})=>f()?(0,o.jsx)(o.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=m?m.toStringTag:void 0;var T="[object Symbol]",C=/\s/,O=/^\s+/;function R(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,I=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,_=/^0o[0-7]+$/i,P=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var o=!0}catch(e){}var i=x.call(e);return o&&(t?e[y]=n:delete e[y]),i}(e):function(e){return k.call(e)}(e)}(e)==T}(e))return N;if(R(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=R(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&C.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=M.test(e);return n||_.test(e)?P(e.slice(2),n?2:8):I.test(e)?N:+e}var z=function(){return h.Date.now()},A="Expected a function",$=Math.max,B=Math.min;function F(e,t,n){var o,i,r,a,s,l,c=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=o,r=i;return o=i=void 0,c=t,a=e.apply(r,n)}function w(e){var n=e-l;return void 0===l||n>=t||n<0||d&&e-c>=r}function p(){var e=z();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-l);return d?B(n,r-(e-c)):n}(e))}function h(e){return s=void 0,f&&o?b(e):(o=i=void 0,a)}function m(){var e=z(),n=w(e);if(o=arguments,i=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(p,t),u?b(e):a}(l);if(d)return clearTimeout(s),s=setTimeout(p,t),b(l)}return void 0===s&&(s=setTimeout(p,t)),a}return t=L(t)||0,R(n)&&(u=!!n.leading,r=(d="maxWait"in n)?$(L(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),c=0,o=l=i=s=void 0},m.flush=function(){return void 0===s?a:h(z())},m}var q="Expected a function";function X(e,t,n,o){return new(n||(n=Promise))((function(t,i){function r(e){try{s(o.next(e))}catch(e){i(e)}}function a(e){try{s(o.throw(e))}catch(e){i(e)}}function s(e){var o;e.done?t(e.value):(o=e.value,o instanceof n?o:new n((function(e){e(o)}))).then(r,a)}s((o=o.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const Y={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,o)=>{e.toBlob((e=>{e?n(e):o(new Error(`Failed to create blob with format ${t}`))}),t)}));function D(){return"undefined"==typeof window}function V(){return!D()}function H(e){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(const r of o)if(!i.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const o=[...e],i=[...t];return G(o,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[o,i]of e)if(!t.has(o)||!J(i,t.get(o),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function oe(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,o]=(0,i.useState)(e),r=ne(t);return(0,i.useEffect)((()=>{r(n,e)||o(e)}),[r,n,e]),n}function re(e,t,n={}){const o=ne(e),r=ie(n),a=(0,i.useMemo)((()=>F(o,t,r)),[o,t,r]);return oe((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:o})=>{const r=i.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,i.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:o=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const l=(0,i.useRef)(0),c=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],r)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(c.current=!0,l.current+=1,e(i)):c.current&&(c.current=!1,l.current+=1,t(i)),o&&l.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function le(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const ce=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:l,className:c}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=c?`lazy-image ${c}`:"lazy-image";return(0,o.jsx)("img",Object.assign({className:f,ref:le(t,d),alt:l},u))}));ce.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:l,style:c,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,i.useState)(!1),p=!b,h=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},c)),[p,u,c]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,o.jsxs)("div",{className:l?`lazy-image-wrapper ${l}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,o.jsx)(ce,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,o.jsx)(i.Fragment,{children:r?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:l,rootMargin:c,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:l,rootMargin:c,enabled:u});return(0,o.jsx)("div",Object.assign({ref:le(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(o=e)&&o.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var o}),[t]);return(0,o.jsx)(o.Fragment,{children:e.map(((e,t)=>(0,o.jsx)(i.Fragment,{children:n(e,t)},r(e,t))))})};const we=(0,i.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,l=r(e,["as","children","callback"]);const{ref:c}=function(e){const t=(0,i.useRef)(null),n=ne(e);return(0,i.useEffect)((()=>{const e=function(){if(D())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",o=({target:e})=>{const o=t.current;o&&!o.contains(e)&&n(o)};return document.addEventListener(e,o),()=>{document.removeEventListener(e,o)}}),[n]),{ref:t}}(s);return(0,o.jsx)(n||"div",Object.assign({ref:le(c,t)},l,{children:a}))})),pe=V()?i.useLayoutEffect:i.useEffect;(0,i.createContext)({parentPortalElement:null});const he=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const l=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,o.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,o.jsxs)(o.Fragment,{children:[r(e,t),l(t)&&n]})})},me=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,o.jsx)(i.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,o.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,i.useState)(null),[n,o]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var o;const i=null!==(o=null==n?void 0:n.toText)&&void 0!==o&&o;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const o=yield function(e,t="png"){return new Promise(((n,o)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(i,0,0);const r=yield U(e,Y[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),o(e)}})),i.onerror=()=>{o(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[o.type]:o})]),o}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return o(e),!0}catch(e){return o(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return o(e),!0}catch(e){return o(null),!1}}))),[])}}function ye(e=0){const[t,n]=(0,i.useState)(e),o=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:o,decrement:r,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[o,r]=(0,i.useState)(t),a=(0,i.useMemo)((()=>oo>0),[o]),l=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(o):t;if(i>=0&&i<=e)return n&&n({prev:o,next:i}),void r(t);throw new Error("Step not valid")}),[o,e]),c=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?o+1:o-1}),[e,o]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=c(e,!0);t&&t({prev:o,next:i}),r(i)}),[n,o,c]),d=(0,i.useCallback)(((e,t)=>{const n=c(e,!1);t&&t({prev:o,next:n}),r(n)}),[o,c]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:o,next:t}),r(t)}),[o,t]);return{currentStep:o,hasNextStep:a,hasPrevStep:s,setStep:l,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:o,goToPrevStep:r,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:o,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[o,r]=(0,i.useState)(e);return[o,re(r,t,n)]}function je(e,t={}){const[n,o]=(0,i.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;o(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{o(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ce({onEnter:e=ee,onLeave:t=ee}={}){const[n,o]=(0,i.useState)(!1),r=(0,i.useRef)(null),a=ne((t=>{o(!0),e(t)})),s=ne((e=>{o(!1),t(e)}));return(0,i.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Oe(e,t){const n=(0,i.useRef)(),o=ne(e),r=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),l=(0,i.useCallback)((()=>{n.current=window.setInterval(o,a)}),[o,a]),c=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{c(),l()}),[c,l]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return l(),()=>c()}),[c,l,s,a]),{set:l,reset:u,clear:c}}const Re="modern-kit-local-storage",Ne="modern-kit-session-storage",Ie={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Me=e=>Ie[e],_e=Me("localStorage"),Pe=e=>window.localStorage.getItem(e),Le=e=>(_e.subscribe(e),()=>{_e.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,o=ie(Z(n)?n():n),r=(0,i.useSyncExternalStore)(Le,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(o)));return{state:(0,i.useMemo)((()=>r?te(r):o),[r,o]),setState:(0,i.useCallback)((e=>{try{const n=Pe(t),i=n?te(n):o,r=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(r)),_e.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,o]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),_e.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,o]=(0,i.useState)(Ae(e,t));return(0,i.useEffect)((()=>{const t=window.matchMedia(e),n=e=>o(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Be(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:o,screenY:i,clientX:r,clientY:a,pageX:s,pageY:l}=t,c={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,o=a-t.top,i=t.left+window.scrollX,s=t.top+window.scrollY;c.elementRelativeX=n,c.elementRelativeY=o,u.elementPositionX=i,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:o,screenY:i,clientX:r,clientY:a,pageX:s,pageY:l},c),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const o=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",o),window.addEventListener("offline",i),()=>{window.removeEventListener("online",o),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,Fe,qe)}}function Ye(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function De(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,i.useRef)(null),r=ne(e),a=(0,i.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,i.useEffect)((()=>{const e=o.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:o,contentRect:t}}function Ve({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),o=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&o(),()=>r())),[e,o,r]),{ref:t,lock:o,unlock:r}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const o=t.getBoundingClientRect(),{offsetX:i=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:o.top+window.scrollY+r+He(window.innerHeight,o.height,a),left:o.left+window.scrollX+i+He(window.innerWidth,o.width,s)};const l=e.getBoundingClientRect();return{top:o.top-l.top+e.scrollTop+r+He(l.height,o.height,a),left:o.left-l.left+e.scrollLeft+i+He(l.width,o.width,s)}};function Ge(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:o=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:o,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const o=e.current,{behavior:i="auto"}=n,{left:r,top:a}=We(o,t,n);o.scrollTo({top:a,left:r,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Me("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,o=ie(Z(n)?n():n),r=(0,i.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(o)));return{state:(0,i.useMemo)((()=>r?te(r):o),[r,o]),setState:(0,i.useCallback)((e=>{try{const n=Ke(t),i=n?te(n):o,r=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,o]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),o=ie(t),[r,a]=(0,i.useState)(o),s=(0,i.useCallback)((e=>{a((t=>{const o=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],i=Z(n)?n():n;o.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,o)}return o}))}),[n]),l=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:l},ke(e))}function tt(e,t,n={}){const o=ne(e),r=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var o=!0,i=!0;if("function"!=typeof e)throw new TypeError(q);return R(n)&&(o="leading"in n?!!n.leading:o,i="trailing"in n?!!n.trailing:i),F(e,t,{leading:o,maxWait:t,trailing:i})}(o,t,r)),[o,t,r]);return oe((()=>a.cancel())),a}function nt(e,t){const n=(0,i.useRef)(),o=ne(e),r=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),l=(0,i.useCallback)((()=>{n.current=setTimeout(o,a)}),[o,a]),c=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{c(),l()}),[c,l]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return l(),()=>c()}),[l,c,a,s]),{set:l,reset:u,clear:c}}var ot={exports:{}};!function(e,t){!function(n,o){var i="function",r="undefined",a="object",s="string",l="major",c="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",T="Chrome",C="Firefox",O="Google",R="Huawei",N="LG",I="Microsoft",M="Motorola",_="Opera",P="Samsung",L="Sharp",z="Sony",A="Xiaomi",$="Zebra",B="Facebook",F="Chromium OS",q="Mac OS",X=function(e){for(var t={},n=0;n0?2===l.length?typeof l[1]==i?this[l[0]]=l[1].call(this,u):this[l[0]]=l[1]:3===l.length?typeof l[1]!==i||l[1].exec&&l[1].test?this[l[0]]=u?u.replace(l[1],l[2]):o:this[l[0]]=u?l[1].call(this,u,l[2]):o:4===l.length&&(this[l[0]]=u?l[3].call(this,u.replace(l[1],l[2])):o):this[l]=u||o;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[c]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=o,e[b]=o,V.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=o,e[b]=o,V.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?D(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,l]),J.CPU=X([w]),J.DEVICE=X([c,f,d,p,h,v,m,g,x]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(ot,ot.exports);var it=ot.exports;function rt(){const[e,t]=(0,i.useState)(null);return pe((()=>{const e=new it.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[o,r]=(0,i.useState)({width:null,height:null}),a=(0,i.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),l=(0,i.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)})),[a,l]),o}}}]); \ No newline at end of file diff --git a/assets/js/67c0cc0e.ad847503.js b/assets/js/67c0cc0e.ad847503.js new file mode 100644 index 000000000..325a7143a --- /dev/null +++ b/assets/js/67c0cc0e.ad847503.js @@ -0,0 +1,2 @@ +/*! For license information please see 67c0cc0e.ad847503.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6439],{5745:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>l,default:()=>w,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var o=n(1986),i=n(9937),r=n(384),a=n(7800);const s={},l="useScrollTo",c={id:"react/hooks/useScrollTo",title:"useScrollTo",description:"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useScrollTo.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock"},next:{title:"useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage"}},u={},d=()=>{const e={button:"button",div:"div",...(0,i.a)()},{containerRef:t,scrollToPosition:n,scrollToElement:s}=(0,r.qQ)(),l=(0,a.useRef)(null),c=e=>{s(l.current,{behavior:"smooth",offsetY:e})},u=e=>{s(l.current,{behavior:"smooth",alignY:e})};return(0,o.jsxs)(e.div,{children:[(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>{n({behavior:"smooth",top:400})},children:"\ud3ec\uc9c0\uc158 \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>{s(l.current,{behavior:"smooth"})},children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864"}),(0,o.jsx)(e.button,{onClick:()=>c(200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset 200"}),(0,o.jsx)(e.button,{onClick:()=>c(-200),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 offset -200"})]}),(0,o.jsxs)(e.div,{children:[(0,o.jsx)(e.button,{onClick:()=>u("start"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align start"}),(0,o.jsx)(e.button,{onClick:()=>u("center"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align center"}),(0,o.jsx)(e.button,{onClick:()=>u("end"),children:"\ud0c0\uac9f \uc694\uc18c \uc2a4\ud06c\ub864 align end"})]}),(0,o.jsxs)(e.div,{ref:t,style:{width:"500px",height:"800px",overflow:"scroll"},children:[(0,o.jsx)(e.div,{style:{height:"400px",background:"green"},children:"InnerBox1"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"red"},children:"InnerBox2"}),(0,o.jsx)(e.div,{ref:l,style:{height:"400px",background:"coral",fontSize:"24px"},children:"target Box"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"aqua"},children:"InnerBox4"}),(0,o.jsx)(e.div,{style:{height:"400px",background:"black"},children:"InnerBox4"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,i.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"usescrollto",children:"useScrollTo"})}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"\uc2a4\ud06c\ub864"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:["useScrollTo \ud6c5\uc774 \ubc18\ud658\ud558\ub294 ",(0,o.jsx)(t.code,{children:"containerRef"}),"\ub97c \ud2b9\uc815 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \ud560\ub2f9\ud558\uba74 \ud574\ub2f9 \uc694\uc18c\ub97c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4.\n",(0,o.jsx)(t.code,{children:"containerRef"}),"\ub97c \ud560\ub2f9\ud558\uc9c0 \uc54a\uc73c\uba74 ",(0,o.jsx)(t.code,{children:"window"}),"\ub97c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"scrollToPosition"})," \ud568\uc218\ub294 top, left\uc640 \uac19\uc740 ",(0,o.jsx)(t.code,{children:"position"}),"\uc744 \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864\ud569\ub2c8\ub2e4."]}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"scrollToElement"})," \ud568\uc218\ub294 \uc778\uc790\ub85c \ub123\uc740 ",(0,o.jsx)(t.code,{children:"\ud0c0\uac9f \uc694\uc18c"}),"\ub97c \uae30\uc900\uc73c\ub85c \uc2a4\ud06c\ub864 \ud569\ub2c8\ub2e4. ",(0,o.jsx)(t.code,{children:"offsetY/X"})," \uac12\uc744 \uc635\uc158\uc73c\ub85c \ubc1b\uc544\uc62c \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: Window | null\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"const { containerRef } = useScrollTo();\n// containerRef: HTMLDivElement | null\n\n
\n"})}),"\n",(0,o.jsx)("br",{}),"\n",(0,o.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,o.jsx)(t.p,{children:(0,o.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollTo/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,o.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type ScrollBehavior = \"auto\" | \"instant\" | \"smooth\";\ntype Align = 'start' | 'center' | 'end';\n\ninterface ScrollOptions {\n behavior?: ScrollBehavior; // default: 'auto'\n}\n\ninterface ScrollToOptions extends ScrollOptions {\n left?: number; // default: 0\n top?: number; // default: 0\n}\n\ninterface ScrollToElementOptions {\n offsetX?: number; // default: 0\n offsetY?: number; // default: 0\n behavior?: ScrollBehavior; // default: 'auto'\n alignY?: Align; // default: 'start'\n alignX?: Align; // default: 'start'\n}\n"})}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"// \ud568\uc218 \uc624\ubc84\ub85c\ub529\nfunction useScrollTo(): {\n containerRef: React.MutableRefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n\nfunction useScrollTo(): {\n containerRef: React.RefObject;\n scrollToPosition: (scrollToOptions?: ScrollToOptions) => void;\n scrollToElement: (\n target: E,\n scrollToElementOptions?: ScrollToElementOptions\n ) => void;\n};\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollTo } from '@modern-kit/react';\n\nconst Example = () => {\n const { containerRef, scrollToPosition, scrollToElement } = useScrollTo();\n const targetRef = useRef(null);\n\n const handleScrollToPosition = () => {\n scrollToPosition({\n behavior: 'smooth',\n top: 400,\n });\n };\n\n const handleScrollToElement = () => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n });\n };\n\n const handleScrollToElementOffset = (offset: number) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n offsetY: offset,\n });\n };\n\n const handleScrollToElementAlign = (type: Align) => {\n scrollToElement(targetRef.current, {\n behavior: 'smooth',\n alignY: type,\n });\n };\n return (\n
\n
\n \n \n \n \n
\n\n
\n \n \n \n
\n\n \n
InnerBox1
\n
InnerBox2
\n
\n target Box\n
\n
InnerBox4
\n
InnerBox4
\n
\n
\n );\n};\n\n"})}),"\n",(0,o.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,o.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var o=n(7800);const i={},r=o.createContext(i);function a(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),o.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>ot,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>He,FS:()=>lt,GN:()=>je,Hk:()=>xe,KS:()=>rt,LN:()=>Ve,Mm:()=>ye,Nr:()=>re,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Re,Xs:()=>nt,Yz:()=>Ne,_:()=>$e,a9:()=>ue,ac:()=>Fe,cM:()=>ct,df:()=>fe,fB:()=>it,g4:()=>Ee,iP:()=>dt,ii:()=>Xe,jr:()=>Oe,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>ce,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Ce,z$:()=>Te});var o=n(1986),i=n(7800);n(4041);function r(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:l}=e,c=r(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},l)),[n,l]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,o.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},c,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,o.jsx)(o.Fragment,{}),children:t})=>f()?(0,o.jsx)(o.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",T=m?m.toStringTag:void 0;var j="[object Symbol]",C=/\s/,O=/^\s+/;function R(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,I=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,_=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:T&&T in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var o=!0}catch(e){}var i=x.call(e);return o&&(t?e[y]=n:delete e[y]),i}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(R(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=R(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&C.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=M.test(e);return n||_.test(e)?P(e.slice(2),n?2:8):I.test(e)?N:+e}var A=function(){return h.Date.now()},L="Expected a function",$=Math.max,B=Math.min;function F(e,t,n){var o,i,r,a,s,l,c=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=o,r=i;return o=i=void 0,c=t,a=e.apply(r,n)}function w(e){var n=e-l;return void 0===l||n>=t||n<0||d&&e-c>=r}function p(){var e=A();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-l);return d?B(n,r-(e-c)):n}(e))}function h(e){return s=void 0,f&&o?b(e):(o=i=void 0,a)}function m(){var e=A(),n=w(e);if(o=arguments,i=this,l=e,n){if(void 0===s)return function(e){return c=e,s=setTimeout(p,t),u?b(e):a}(l);if(d)return clearTimeout(s),s=setTimeout(p,t),b(l)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,R(n)&&(u=!!n.leading,r=(d="maxWait"in n)?$(z(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),c=0,o=l=i=s=void 0},m.flush=function(){return void 0===s?a:h(A())},m}var q="Expected a function";function X(e,t,n,o){return new(n||(n=Promise))((function(t,i){function r(e){try{s(o.next(e))}catch(e){i(e)}}function a(e){try{s(o.throw(e))}catch(e){i(e)}}function s(e){var o;e.done?t(e.value):(o=e.value,o instanceof n?o:new n((function(e){e(o)}))).then(r,a)}s((o=o.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const Y={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,o)=>{e.toBlob((e=>{e?n(e):o(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function H(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const o=Object.keys(e),i=Object.keys(t);if(o.length!==i.length)return!1;for(const r of o)if(!i.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const o=[...e],i=[...t];return G(o,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[o,i]of e)if(!t.has(o)||!J(i,t.get(o),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function oe(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,o]=(0,i.useState)(e),r=ne(t);return(0,i.useEffect)((()=>{r(n,e)||o(e)}),[r,n,e]),n}function re(e,t,n={}){const o=ne(e),r=ie(n),a=(0,i.useMemo)((()=>F(o,t,r)),[o,t,r]);return oe((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:o})=>{const r=i.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,o);return(0,i.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:o=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const l=(0,i.useRef)(0),c=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],r)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(c.current=!0,l.current+=1,e(i)):c.current&&(c.current=!1,l.current+=1,t(i)),o&&l.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function le(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const ce=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:l,className:c}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=c?`lazy-image ${c}`:"lazy-image";return(0,o.jsx)("img",Object.assign({className:f,ref:le(t,d),alt:l},u))}));ce.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:l,style:c,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,i.useState)(!1),p=!b,h=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},c)),[p,u,c]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,o.jsxs)("div",{className:l?`lazy-image-wrapper ${l}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,o.jsx)(ce,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,o.jsx)(i.Fragment,{children:r?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:l,rootMargin:c,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:l,rootMargin:c,enabled:u});return(0,o.jsx)("div",Object.assign({ref:le(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(o=e)&&o.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var o}),[t]);return(0,o.jsx)(o.Fragment,{children:e.map(((e,t)=>(0,o.jsx)(i.Fragment,{children:n(e,t)},r(e,t))))})},we=D()?i.useLayoutEffect:i.useEffect;function pe(e,t,n,o={}){const i=ie(o),r=ne(n);we((()=>{if(e)return e.addEventListener(t,r,i),()=>{e.removeEventListener(t,r,i)}}),[t,e,i,r])}function he(e){const t=(0,i.useRef)(null),n=(0,i.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),o=(0,i.useCallback)((({target:n})=>{const o=t.current;o&&!o.contains(n)&&e(o)}),[e]);return pe(window.document,n,o),t}const me=(0,i.forwardRef)(((e,t)=>{var{as:n,children:i,callback:a}=e,s=r(e,["as","children","callback"]);const l=he(a);return(0,o.jsx)(n||"div",Object.assign({ref:le(l,t)},s,{children:i}))}));(0,i.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const l=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,o.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,o.jsxs)(o.Fragment,{children:[r(e,t),l(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,o.jsx)(i.Fragment,r?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,o.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ye(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,i.useState)(null),[n,o]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var o;const i=null!==(o=null==n?void 0:n.toText)&&void 0!==o&&o;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const o=yield function(e,t="png"){return new Promise(((n,o)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const o=e.getContext("2d");if(!o)throw new Error("Failed to get 2d context");o.drawImage(i,0,0);const r=yield U(e,Y[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),o(e)}})),i.onerror=()=>{o(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[o.type]:o})]),o}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return o(e),!0}catch(e){return o(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return o(e),!0}catch(e){return o(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,i.useState)(e),o=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:o,decrement:r,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[o,r]=(0,i.useState)(t),a=(0,i.useMemo)((()=>oo>0),[o]),l=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(o):t;if(i>=0&&i<=e)return n&&n({prev:o,next:i}),void r(t);throw new Error("Step not valid")}),[o,e]),c=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?o+1:o-1}),[e,o]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=c(e,!0);t&&t({prev:o,next:i}),r(i)}),[n,o,c]),d=(0,i.useCallback)(((e,t)=>{const n=c(e,!1);t&&t({prev:o,next:n}),r(n)}),[o,c]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:o,next:t}),r(t)}),[o,t]);return{currentStep:o,hasNextStep:a,hasPrevStep:s,setStep:l,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Te(e,t=0){const{currentStep:n,goToNextStep:o,goToPrevStep:r,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:o,prevIndex:r,setIndex:s}}function je(e,t,n={}){const[o,r]=(0,i.useState)(e);return[o,re(r,t,n)]}function Ce(e,t={}){const[n,o]=(0,i.useState)(""),[r,a]=je("",e,t);return{value:n,debouncedValue:r,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;o(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{o(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Re({onEnter:e=ee,onLeave:t=ee}={}){const[n,o]=(0,i.useState)(!1),r=(0,i.useRef)(null),a=ne((t=>{o(!0),e(t)})),s=ne((e=>{o(!1),t(e)}));return(0,i.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Ne(e,t){const n=(0,i.useRef)(),o=ne(e),r=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),l=(0,i.useCallback)((()=>{n.current=window.setInterval(o,a)}),[o,a]),c=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{c(),l()}),[c,l]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return l(),()=>c()}),[c,l,s,a]),{set:l,reset:u,clear:c}}const Ie="modern-kit-local-storage",Me="modern-kit-session-storage",_e={localStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}},sessionStorage:{key:Me,subscribe:e=>{window.addEventListener(Me,e)},unsubscribe:e=>{window.removeEventListener(Me,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Me))}}},Pe=e=>_e[e],ze=Pe("localStorage"),Ae=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,o=ie(Z(n)?n():n),r=(0,i.useSyncExternalStore)(Le,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(o)));return{state:(0,i.useMemo)((()=>r?te(r):o),[r,o]),setState:(0,i.useCallback)((e=>{try{const n=Ae(t),i=n?te(n):o,r=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(r)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,o]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Be=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,o]=(0,i.useState)(Be(e,t)),r=(0,i.useCallback)((e=>o(e.matches)),[]);return pe(window.matchMedia(e),"change",r),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)(qe),o=(0,i.useCallback)((t=>{const{screenX:o,screenY:i,clientX:r,clientY:a,pageX:s,pageY:l}=t;let c=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();c=r-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:o,screenY:i,clientX:r,clientY:a,pageX:s,pageY:l,elementRelativeX:c,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",o),{ref:e,position:t}}const Ye=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const o=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",o),window.addEventListener("offline",i),()=>{window.removeEventListener("online",o),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,Ye,Ue)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function He(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),o=(0,i.useRef)(null),r=ne(e),a=(0,i.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,i.useEffect)((()=>{const e=o.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:o,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),o=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&o(),()=>r())),[e,o,r]),{ref:t,lock:o,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const o=t.getBoundingClientRect(),{offsetX:i=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:o.top+window.scrollY+r+Je(window.innerHeight,o.height,a),left:o.left+window.scrollX+i+Je(window.innerWidth,o.width,s)};const l=e.getBoundingClientRect();return{top:o.top-l.top+e.scrollTop+r+Je(l.height,o.height,a),left:o.left-l.left+e.scrollLeft+i+Je(l.width,o.width,s)}};function Ze(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:o=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:o,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const o=e.current,{behavior:i="auto"}=n,{left:r,top:a}=Ke(o,t,n);o.scrollTo({top:a,left:r,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,o=ie(Z(n)?n():n),r=(0,i.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(o)));return{state:(0,i.useMemo)((()=>r?te(r):o),[r,o]),setState:(0,i.useCallback)((e=>{try{const n=et(t),i=n?te(n):o,r=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,o]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function ot(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),o=ie(t),[r,a]=(0,i.useState)(o),s=(0,i.useCallback)((e=>{a((t=>{const o=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const o=window[e],i=Z(n)?n():n;o.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,o)}return o}))}),[n]),l=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:l},Ee(e))}function it(e,t,n={}){const o=ne(e),r=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var o=!0,i=!0;if("function"!=typeof e)throw new TypeError(q);return R(n)&&(o="leading"in n?!!n.leading:o,i="trailing"in n?!!n.trailing:i),F(e,t,{leading:o,maxWait:t,trailing:i})}(o,t,r)),[o,t,r]);return oe((()=>a.cancel())),a}function rt(e,t){const n=(0,i.useRef)(),o=ne(e),r=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),l=(0,i.useCallback)((()=>{n.current=setTimeout(o,a)}),[o,a]),c=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{c(),l()}),[c,l]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return l(),()=>c()}),[l,c,a,s]),{set:l,reset:u,clear:c}}var at={exports:{}};!function(e,t){!function(n,o){var i="function",r="undefined",a="object",s="string",l="major",c="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",E="BlackBerry",T="Browser",j="Chrome",C="Firefox",O="Google",R="Huawei",N="LG",I="Microsoft",M="Motorola",_="Opera",P="Samsung",z="Sharp",A="Sony",L="Xiaomi",$="Zebra",B="Facebook",F="Chromium OS",q="Mac OS",X=function(e){for(var t={},n=0;n0?2===l.length?typeof l[1]==i?this[l[0]]=l[1].call(this,u):this[l[0]]=l[1]:3===l.length?typeof l[1]!==i||l[1].exec&&l[1].test?this[l[0]]=u?u.replace(l[1],l[2]):o:this[l[0]]=u?l[1].call(this,u,l[2]):o:4===l.length&&(this[l[0]]=u?l[3].call(this,u.replace(l[1],l[2])):o):this[l]=u||o;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[c]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=o,e[b]=o,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=o,e[b]=o,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,l]),J.CPU=X([w]),J.DEVICE=X([c,f,d,p,h,v,m,g,x]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function lt(){const[e,t]=(0,i.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function ct({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,i.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),o=re(n,e),r=(0,i.useCallback)((()=>{(e?o:n)({width:window.innerWidth,height:window.innerHeight})}),[e,o]);return pe(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/771be322.018dec28.js.LICENSE.txt b/assets/js/67c0cc0e.ad847503.js.LICENSE.txt similarity index 100% rename from assets/js/771be322.018dec28.js.LICENSE.txt rename to assets/js/67c0cc0e.ad847503.js.LICENSE.txt diff --git a/assets/js/6bd54dd6.94cc39ed.js b/assets/js/6bd54dd6.f3a8e1e4.js similarity index 68% rename from assets/js/6bd54dd6.94cc39ed.js rename to assets/js/6bd54dd6.f3a8e1e4.js index 5645c7fd7..a88ddcbbd 100644 --- a/assets/js/6bd54dd6.94cc39ed.js +++ b/assets/js/6bd54dd6.f3a8e1e4.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4168],{5630:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var t=n(1986),s=n(9937);const o={},r="useVisibilityChange",a={id:"react/hooks/useVisibilityChange",title:"useVisibilityChange",description:"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useVisibilityChange.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty"},next:{title:"useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize"}},c={},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function d(e){const i={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.header,{children:(0,t.jsx)(i.h1,{id:"usevisibilitychange",children:"useVisibilityChange"})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.code,{children:"visibilitychange"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 ",(0,t.jsx)(i.code,{children:"onShow"})," \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 ",(0,t.jsx)(i.code,{children:"onHide"})," \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(i.h2,{id:"code",children:"Code"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVisibilityChange/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,t.jsx)(i.h2,{id:"interface",children:"Interface"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-ts",metastring:'title="typescript"',children:"type VisibilityChangeCallbackAction = (\n event: Event,\n visibilityState: DocumentVisibilityState\n) => void;\n\ninterface useVisibilityChangeProps {\n onShow?: VisibilityChangeCallbackAction;\n onHide?: VisibilityChangeCallbackAction;\n}\n\nconst useVisibilityChange: ({ onShow, onHide, }: useVisibilityChangeProps) => void\n"})}),"\n",(0,t.jsx)(i.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVisibilityChange } from '@modern-kit/react';\n\nconst Example = () => {\n useVisibilityEvent({\n onShow: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */},\n onHide: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */}\n });\n\n return (\n
{/* ... */}
\n )\n};\n"})})]})}function h(e={}){const{wrapper:i}={...(0,s.a)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},9937:(e,i,n)=>{n.d(i,{Z:()=>a,a:()=>r});var t=n(7800);const s={},o=t.createContext(s);function r(e){const i=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function a(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),t.createElement(o.Provider,{value:i},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4168],{5630:(e,i,n)=>{n.r(i),n.d(i,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var t=n(1986),s=n(9937);const o={},r="useVisibilityChange",a={id:"react/hooks/useVisibilityChange",title:"useVisibilityChange",description:"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useVisibilityChange.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty"},next:{title:"useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize"}},c={},l=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function d(e){const i={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.header,{children:(0,t.jsx)(i.h1,{id:"usevisibilitychange",children:"useVisibilityChange"})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.code,{children:"visibilitychange"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 ",(0,t.jsx)(i.code,{children:"onShow"})," \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 ",(0,t.jsx)(i.code,{children:"onHide"})," \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,t.jsx)("br",{}),"\n",(0,t.jsx)(i.h2,{id:"code",children:"Code"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVisibilityChange/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,t.jsx)(i.h2,{id:"interface",children:"Interface"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-ts",metastring:'title="typescript"',children:"type VisibilityChangeCallbackAction = (\n event: Event,\n visibilityState: DocumentVisibilityState\n) => void;\n\ninterface useVisibilityChangeProps {\n onShow?: VisibilityChangeCallbackAction;\n onHide?: VisibilityChangeCallbackAction;\n}\n"})}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-ts",metastring:'title="typescript"',children:"function useVisibilityChange({\n onShow,\n onHide,\n}: UseVisibilityChangeProps = {}): void;\n"})}),"\n",(0,t.jsx)(i.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVisibilityChange } from '@modern-kit/react';\n\nconst Example = () => {\n useVisibilityEvent({\n onShow: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */},\n onHide: (event: Event, visibilityState: DocumentVisibilityState) => { /* ... */}\n });\n\n return (\n
{/* ... */}
\n )\n};\n"})})]})}function h(e={}){const{wrapper:i}={...(0,s.a)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},9937:(e,i,n)=>{n.d(i,{Z:()=>a,a:()=>r});var t=n(7800);const s={},o=t.createContext(s);function r(e){const i=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function a(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),t.createElement(o.Provider,{value:i},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/6dde689d.001932ef.js b/assets/js/6dde689d.001932ef.js new file mode 100644 index 000000000..e869169e4 --- /dev/null +++ b/assets/js/6dde689d.001932ef.js @@ -0,0 +1,2 @@ +/*! For license information please see 6dde689d.001932ef.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3030],{9865:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useTimeout",l={id:"react/hooks/useTimeout",title:"useTimeout",description:"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useTimeout.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle"},next:{title:"useToggle",permalink:"/modern-kit/docs/react/hooks/useToggle"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(0),{set:s,reset:c,clear:l}=(0,o.KS)((()=>{n(t+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:t}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>s(),children:"set"}),(0,i.jsx)(e.button,{onClick:()=>c(),children:"reset"}),(0,i.jsx)(e.button,{onClick:()=>l(),children:"clear"})]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usetimeout",children:"useTimeout"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"window.setTimeout"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["option \uac12\uc73c\ub85c \uc22b\uc790\ub97c \ubc1b\uc744 \uc218 \uc788\uace0, \uac1d\uccb4\ub85c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac1d\uccb4\ub85c \ubc1b\uc744 \uacbd\uc6b0 ",(0,i.jsx)(t.code,{children:"delay"}),"\uc640 ",(0,i.jsx)(t.code,{children:"enabled"})," \uc18d\uc131\uc744 \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Timeout\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"set"}),", ",(0,i.jsx)(t.code,{children:"reset"}),", ",(0,i.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface TimeoutOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useTimeout(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useTimeout(\n callback: () => void,\n options: TimeoutOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, reset, clear } = useTimeout(() => {\n setNumber(number + 1);\n }, 1000);\n\n /*\n * useTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>_e,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Te,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!K(e[o],t[o],n))return!1;return!0},K=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!K(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function J(e,t){return K(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function _e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ke=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ke(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ke(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ke(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ke(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};K.VERSION="1.0.38",K.BROWSER=B([u,f,c]),K.CPU=B([w]),K.DEVICE=B([l,b,d,p,m,v,h,g,y]),K.ENGINE=K.OS=B([u,f]),e.exports&&(t=e.exports=K),t.UAParser=K;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new K;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/78bcb238.8c9f85da.js.LICENSE.txt b/assets/js/6dde689d.001932ef.js.LICENSE.txt similarity index 100% rename from assets/js/78bcb238.8c9f85da.js.LICENSE.txt rename to assets/js/6dde689d.001932ef.js.LICENSE.txt diff --git a/assets/js/6dde689d.80fea765.js b/assets/js/6dde689d.80fea765.js deleted file mode 100644 index 023b243c5..000000000 --- a/assets/js/6dde689d.80fea765.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 6dde689d.80fea765.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3030],{9865:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useTimeout",l={id:"react/hooks/useTimeout",title:"useTimeout",description:"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useTimeout.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle"},next:{title:"useToggle",permalink:"/modern-kit/docs/react/hooks/useToggle"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(0),{set:s,reset:c,clear:l}=(0,o.KS)((()=>{n(t+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:t}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>s(),children:"set"}),(0,i.jsx)(e.button,{onClick:()=>c(),children:"reset"}),(0,i.jsx)(e.button,{onClick:()=>l(),children:"clear"})]})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usetimeout",children:"useTimeout"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"window.setTimeout"}),"\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["option \uac12\uc73c\ub85c \uc22b\uc790\ub97c \ubc1b\uc744 \uc218 \uc788\uace0, \uac1d\uccb4\ub85c \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uac1d\uccb4\ub85c \ubc1b\uc744 \uacbd\uc6b0 ",(0,i.jsx)(t.code,{children:"delay"}),"\uc640 ",(0,i.jsx)(t.code,{children:"enabled"})," \uc18d\uc131\uc744 \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Timeout\uc744 \uc9c1\uc811 \ud578\ub4e4\ub9c1 \ud560 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"set"}),", ",(0,i.jsx)(t.code,{children:"reset"}),", ",(0,i.jsx)(t.code,{children:"clear"})," \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useTimeout/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface TimeoutOptions {\n delay: number;\n enabled?: boolean;\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useTimeout(\n callback: () => void,\n options: number\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n\nfunction useTimeout(\n callback: () => void,\n options: TimeoutOptions\n): {\n set: () => void;\n clear: () => void;\n reset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useTimeout } from '@modern-kit/react';\n\nconst Example = () => {\n const [number, setNumber] = useState(0);\n\n const { set, reset, clear } = useTimeout(() => {\n setNumber(number + 1);\n }, 1000);\n\n /*\n * useTimeout(() => {\n * setNumber(number + 1);\n * }, { delay: 1000, enabled: true });\n */\n\n return (\n
\n

{number}

\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!K(e[o],t[o],n))return!1;return!0},K=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!K(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function J(e,t){return K(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Ke=Ie("sessionStorage"),Je=e=>window.sessionStorage.getItem(e),Ze=e=>(Ke.subscribe(e),()=>{Ke.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Je(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Je(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Ke.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};K.VERSION="1.0.38",K.BROWSER=B([u,f,c]),K.CPU=B([w]),K.DEVICE=B([l,b,d,p,m,v,h,g,y]),K.ENGINE=K.OS=B([u,f]),e.exports&&(t=e.exports=K),t.UAParser=K;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new K;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/771be322.018dec28.js b/assets/js/771be322.018dec28.js deleted file mode 100644 index 8eb3dcbd4..000000000 --- a/assets/js/771be322.018dec28.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 771be322.018dec28.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[984],{2931:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useDebouncedInputValue",c={id:"react/hooks/useDebouncedInputValue",title:"useDebouncedInputValue",description:"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4",source:"@site/docs/react/hooks/useDebouncedInputValue.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"},next:{title:"useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState"}},l={},u=()=>{const e={button:"button",div:"div",input:"input",p:"p",...(0,r.a)()},{value:t,debouncedValue:n,onChange:a,onReset:s}=(0,o.yn)(500);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["\ud604\uc7ac \uc785\ub825 \uac12: ",t]}),(0,i.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: ",n]}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.input,{type:"text",onChange:a,value:t})}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.button,{onClick:s,children:"Reset \ubc84\ud2bc"})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebouncedinputvalue",children:"useDebouncedInputValue"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"input value"}),"\ub97c \uad00\ub9ac\ud558\uace0, ",(0,i.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1(debouncing)"}),"\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"\ud604\uc7ac \uc785\ub825 \uac12"}),"\uacfc ",(0,i.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1\ub41c \uac12"}),"\uc744 \uc81c\uacf5\ud558\uba70, \uac12\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \ub9ac\uc14b\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub3c4 \ud568\uaed8 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedInputValue/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedInputValue(\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): {\n value: string;\n debouncedValue: string;\n onChange: (e: ChangeEvent) => void;\n onReset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedInputValue } from '@modern-kit/react';\n\nconst Example = () => {\n const { value, debouncedValue, onChange, onReset } = useDebouncedInputValue(500);\n\n return (\n
\n

\ud604\uc7ac \uc785\ub825 \uac12: {value}

\n

\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: {debouncedValue}

\n
\n \n
\n
\n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ve,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ue,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function I(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(I(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=I(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,V=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,I(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var F="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function Y(){return!U()}function H(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ie="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Me=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ve(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const De=()=>navigator.onLine,Fe=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,De,Fe)}}function Xe(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ue(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+He(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+He(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+He(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+He(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(F);return I(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",I="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",V="Facebook",D="Chromium OS",F="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,F)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,f,c]),J.CPU=q([w]),J.DEVICE=q([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=q([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/771be322.e3a81e9a.js b/assets/js/771be322.e3a81e9a.js new file mode 100644 index 000000000..4fd8218d6 --- /dev/null +++ b/assets/js/771be322.e3a81e9a.js @@ -0,0 +1,2 @@ +/*! For license information please see 771be322.e3a81e9a.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[984],{2931:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useDebouncedInputValue",c={id:"react/hooks/useDebouncedInputValue",title:"useDebouncedInputValue",description:"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4",source:"@site/docs/react/hooks/useDebouncedInputValue.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDebouncedInputValue",permalink:"/modern-kit/docs/react/hooks/useDebouncedInputValue",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"},next:{title:"useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState"}},l={},u=()=>{const e={button:"button",div:"div",input:"input",p:"p",...(0,r.a)()},{value:t,debouncedValue:n,onChange:a,onReset:s}=(0,o.yn)(500);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["\ud604\uc7ac \uc785\ub825 \uac12: ",t]}),(0,i.jsxs)(e.p,{children:["\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: ",n]}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.input,{type:"text",onChange:a,value:t})}),(0,i.jsx)(e.div,{children:(0,i.jsx)(e.button,{onClick:s,children:"Reset \ubc84\ud2bc"})})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedebouncedinputvalue",children:"useDebouncedInputValue"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"input value"}),"\ub97c \uad00\ub9ac\ud558\uace0, ",(0,i.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1(debouncing)"}),"\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4"]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"\ud604\uc7ac \uc785\ub825 \uac12"}),"\uacfc ",(0,i.jsx)(t.code,{children:"\ub514\ubc14\uc6b4\uc2f1\ub41c \uac12"}),"\uc744 \uc81c\uacf5\ud558\uba70, \uac12\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uace0 \ub9ac\uc14b\ud560 \uc218 \uc788\ub294 \ud568\uc218\ub3c4 \ud568\uaed8 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDebouncedInputValue/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type DebounceParameters = Parameters;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useDebouncedInputValue(\n wait: DebounceParameters[1],\n options?: DebounceParameters[2]\n): {\n value: string;\n debouncedValue: string;\n onChange: (e: ChangeEvent) => void;\n onReset: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDebouncedInputValue } from '@modern-kit/react';\n\nconst Example = () => {\n const { value, debouncedValue, onChange, onReset } = useDebouncedInputValue(500);\n\n return (\n
\n

\ud604\uc7ac \uc785\ub825 \uac12: {value}

\n

\ub514\ubc14\uc6b4\uc2f1 \uc785\ub825 \uac12: {debouncedValue}

\n
\n \n
\n
\n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ue,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ie,Xs:()=>nt,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>De,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>qe,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function I(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(I(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=I(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,V=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,I(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var F="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function Y(){return!U()}function W(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ve=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function De(e,t){const[n,i]=(0,r.useState)(Ve(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Fe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Fe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Be=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Be)}}function Ye(){return De("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(F);return I(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",I="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",V="Facebook",D="Chromium OS",F="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,F)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,f,c]),J.CPU=q([w]),J.DEVICE=q([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=q([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>U()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/8053496e.fc9770c3.js.LICENSE.txt b/assets/js/771be322.e3a81e9a.js.LICENSE.txt similarity index 100% rename from assets/js/8053496e.fc9770c3.js.LICENSE.txt rename to assets/js/771be322.e3a81e9a.js.LICENSE.txt diff --git a/assets/js/78bcb238.3e0f6c9e.js b/assets/js/78bcb238.3e0f6c9e.js new file mode 100644 index 000000000..2762313bd --- /dev/null +++ b/assets/js/78bcb238.3e0f6c9e.js @@ -0,0 +1,2 @@ +/*! For license information please see 78bcb238.3e0f6c9e.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[856],{3570:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="IfElse",l={id:"react/components/IfElse",title:"IfElse",description:"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/IfElse.mdx",sourceDirName:"react/components",slug:"/react/components/IfElse",permalink:"/modern-kit/docs/react/components/IfElse",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage"},next:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"}},u={},d=()=>{const e={button:"button",h1:"h1",...(0,o.a)()},[t,n]=(0,r.useState)(!1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,i.jsx)(a.xX,{condition:t,trueComponent:(0,i.jsx)(e.h1,{children:"true component"}),falseComponent:(0,i.jsx)(e.h1,{children:"false component"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"ifelse",children:"IfElse"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"IfElse"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.\n\uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,i.jsx)(t.strong,{children:"condition"}),"\uc774\ub77c\ub294 property\ub97c \ud1b5\ud574 \uc870\uac74\uc744 \uc9c0\uc815\ud558\uace0, \uc870\uac74\uc774 \ucc38(",(0,i.jsx)(t.code,{children:"true"}),")\uc774\uba74 ",(0,i.jsx)(t.code,{children:"trueComponent"}),"\ub97c,\n\uac70\uc9d3(",(0,i.jsx)(t.code,{children:"false"}),")\uc774\uba74 ",(0,i.jsx)(t.code,{children:"falseComponent"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"condition"})," property\ub294 \ub2e8\uc21c\ud55c ",(0,i.jsx)(t.code,{children:"boolean"}),"\uac12 \ubfd0\ub9cc \uc544\ub2c8\ub77c, ",(0,i.jsx)(t.code,{children:"boolean"}),"\uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.\n\uc774 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud574\ub2f9 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc870\uac74\uc744 \ud3c9\uac00\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/IfElse/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface IfElseProps {\n condition: Condition;\n trueComponent: React.ReactNode;\n falseComponent: React.ReactNode;\n}\n\nconst IfElse = ({ condition, trueComponent, falseComponent }: IfElseProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { IfElse } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n return (\n <>\n \n true component}\n falseComponent={

false component

}\n />\n \n );\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>rt,LN:()=>Ye,Mm:()=>xe,Nr:()=>re,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>ot,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Ie,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function f(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var $=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=o=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(z(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,o.useState)(!1),p=!b,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},fe=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})},we=D()?o.useLayoutEffect:o.useEffect;function pe(e,t,n,i={}){const o=oe(i),r=ne(n);we((()=>{if(e)return e.addEventListener(t,r,o),()=>{e.removeEventListener(t,r,o)}}),[t,e,o,r])}function me(e){const t=(0,o.useRef)(null),n=(0,o.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,o.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,o.forwardRef)(((e,t)=>{var{as:n,children:o,callback:a}=e,s=r(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:o}))}));(0,o.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function xe(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield V(e,U[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),f=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function je(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Oe(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=je("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Ne(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=$e(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,o.useState)(Fe(e,t)),r=(0,o.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",r),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Xe),i=(0,o.useCallback)((t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=r-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+Je(c.width,i.width,s)}};function Ze(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=et(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},Ee(e))}function ot(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function rt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",I="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,g,h,v,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,o.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=re(n,e),r=(0,o.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/8079f804.ac0292ee.js.LICENSE.txt b/assets/js/78bcb238.3e0f6c9e.js.LICENSE.txt similarity index 100% rename from assets/js/8079f804.ac0292ee.js.LICENSE.txt rename to assets/js/78bcb238.3e0f6c9e.js.LICENSE.txt diff --git a/assets/js/78bcb238.8c9f85da.js b/assets/js/78bcb238.8c9f85da.js deleted file mode 100644 index 2055f5b9a..000000000 --- a/assets/js/78bcb238.8c9f85da.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 78bcb238.8c9f85da.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[856],{3570:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="IfElse",l={id:"react/components/IfElse",title:"IfElse",description:"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/IfElse.mdx",sourceDirName:"react/components",slug:"/react/components/IfElse",permalink:"/modern-kit/docs/react/components/IfElse",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"FallbackLazyImage",permalink:"/modern-kit/docs/react/components/FallbackLazyImage"},next:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"}},u={},d=()=>{const e={button:"button",h1:"h1",...(0,o.a)()},[t,n]=(0,r.useState)(!1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,i.jsx)(a.xX,{condition:t,trueComponent:(0,i.jsx)(e.h1,{children:"true component"}),falseComponent:(0,i.jsx)(e.h1,{children:"false component"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"ifelse",children:"IfElse"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"IfElse"})," \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.\n\uc774 \ucef4\ud3ec\ub10c\ud2b8\ub294 ",(0,i.jsx)(t.strong,{children:"condition"}),"\uc774\ub77c\ub294 property\ub97c \ud1b5\ud574 \uc870\uac74\uc744 \uc9c0\uc815\ud558\uace0, \uc870\uac74\uc774 \ucc38(",(0,i.jsx)(t.code,{children:"true"}),")\uc774\uba74 ",(0,i.jsx)(t.code,{children:"trueComponent"}),"\ub97c,\n\uac70\uc9d3(",(0,i.jsx)(t.code,{children:"false"}),")\uc774\uba74 ",(0,i.jsx)(t.code,{children:"falseComponent"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"condition"})," property\ub294 \ub2e8\uc21c\ud55c ",(0,i.jsx)(t.code,{children:"boolean"}),"\uac12 \ubfd0\ub9cc \uc544\ub2c8\ub77c, ",(0,i.jsx)(t.code,{children:"boolean"}),"\uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4.\n\uc774 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\ub294 \ud574\ub2f9 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc870\uac74\uc744 \ud3c9\uac00\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/IfElse/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface IfElseProps {\n condition: Condition;\n trueComponent: React.ReactNode;\n falseComponent: React.ReactNode;\n}\n\nconst IfElse = ({ condition, trueComponent, falseComponent }: IfElseProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { IfElse } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n return (\n <>\n \n true component}\n falseComponent={

false component

}\n />\n \n );\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>rt,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>re,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function f(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,I=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=_.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?N:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=o=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(z(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,o.useState)(!1),p=!b,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},fe=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})};const we=(0,o.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=r(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,o.useRef)(null),n=ne(e);return(0,o.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield V(e,U[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),f=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Ce(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Ie(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Me=_e("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Pe(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,o.useState)($e(e,t));return(0,o.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,i=a-t.top,o=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=o,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+We(c.width,i.width,s)}};function Ge(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=He(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ke(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",I="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var ot=it.exports;function rt(){const[e,t]=(0,o.useState)(null);return pe((()=>{const e=new ot.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,r]=(0,o.useState)({width:null,height:null}),a=(0,o.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),c=(0,o.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/8053496e.3ea234bb.js b/assets/js/8053496e.3ea234bb.js new file mode 100644 index 000000000..cc40ae103 --- /dev/null +++ b/assets/js/8053496e.3ea234bb.js @@ -0,0 +1,2 @@ +/*! For license information please see 8053496e.3ea234bb.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7363],{5778:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="AspectRatio",c={id:"react/components/AspectRatio",title:"AspectRatio",description:"\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 aspect-ratio \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/AspectRatio.mdx",sourceDirName:"react/components",slug:"/react/components/AspectRatio",permalink:"/modern-kit/docs/react/components/AspectRatio",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Introduce",permalink:"/modern-kit/docs/introduce/"},next:{title:"ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly"}},l={},u=()=>{const e={div:"div",img:"img",...(0,r.a)()};return(0,i.jsx)(e.div,{style:{width:"500px"},children:(0,i.jsx)(o.oM,{ratio:427/640,children:(0,i.jsx)(e.img,{src:"https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9"})})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"aspectratio",children:"AspectRatio"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",children:"aspect-ratio"})})," \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/AspectRatio/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface AspectRatioProps extends ComponentProps<'div'> {\n ratio: number;\n}\n\nconst AspectRatio: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Re,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,R=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,A=/^0b[01]+$/i,I=/^0o[0-7]+$/i,M=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}(e);var n=A.test(e);return n||I.test(e)?M(e.slice(2),n?2:8):_.test(e)?N:+e}var z=function(){return m.Date.now()},$="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(P(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Re(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ae="modern-kit-session-storage",Ie={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ae,subscribe:e=>{window.addEventListener(Ae,e)},unsubscribe:e=>{window.removeEventListener(Ae,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ae))}}},Me=e=>Ie[e],Pe=Me("localStorage"),ze=e=>window.localStorage.getItem(e),$e=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",R="Google",T="Huawei",N="LG",_="Microsoft",A="Motorola",I="Opera",M="Samsung",P="Sharp",z="Sony",$="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/8a16b8e9.57fc4ba8.js.LICENSE.txt b/assets/js/8053496e.3ea234bb.js.LICENSE.txt similarity index 100% rename from assets/js/8a16b8e9.57fc4ba8.js.LICENSE.txt rename to assets/js/8053496e.3ea234bb.js.LICENSE.txt diff --git a/assets/js/8053496e.fc9770c3.js b/assets/js/8053496e.fc9770c3.js deleted file mode 100644 index 5aca0ff21..000000000 --- a/assets/js/8053496e.fc9770c3.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 8053496e.fc9770c3.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7363],{5778:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="AspectRatio",c={id:"react/components/AspectRatio",title:"AspectRatio",description:"\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 aspect-ratio \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/AspectRatio.mdx",sourceDirName:"react/components",slug:"/react/components/AspectRatio",permalink:"/modern-kit/docs/react/components/AspectRatio",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Introduce",permalink:"/modern-kit/docs/introduce/"},next:{title:"ClientOnly",permalink:"/modern-kit/docs/react/components/ClientOnly"}},l={},u=()=>{const e={div:"div",img:"img",...(0,r.a)()};return(0,i.jsx)(e.div,{style:{width:"500px"},children:(0,i.jsx)(o.oM,{ratio:427/640,children:(0,i.jsx)(e.img,{src:"https://github.com/user-attachments/assets/dd60ec12-afd7-44c9-bd6b-0069e16bf2c9"})})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"aspectratio",children:"AspectRatio"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio",children:"aspect-ratio"})})," \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/AspectRatio/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface AspectRatioProps extends ComponentProps<'div'> {\n ratio: number;\n}\n\nconst AspectRatio: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { AspectRatio } from '@modern-kit/react'\n\nconst Example = () => {\n return (\n
\n \n \n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Ue,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Re,_:()=>ze,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,R=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,A=/^0b[01]+$/i,I=/^0o[0-7]+$/i,M=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(R,""):e}(e);var n=A.test(e);return n||I.test(e)?M(e.slice(2),n?2:8):_.test(e)?N:+e}var z=function(){return m.Date.now()},L="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(P(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Ae=e=>_e[e],Ie=Ae("localStorage"),Me=e=>window.localStorage.getItem(e),Pe=e=>(Ie.subscribe(e),()=>{Ie.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Pe,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Le(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Be(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ae("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",R="Google",T="Huawei",N="LG",_="Microsoft",A="Motorola",I="Opera",M="Samsung",P="Sharp",z="Sony",L="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,b,c]),J.CPU=U([w]),J.DEVICE=U([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=U([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/8079f804.90ba8da3.js b/assets/js/8079f804.90ba8da3.js new file mode 100644 index 000000000..afc6781d5 --- /dev/null +++ b/assets/js/8079f804.90ba8da3.js @@ -0,0 +1,2 @@ +/*! For license information please see 8079f804.90ba8da3.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9643],{4033:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useCounter",c={id:"react/hooks/useCounter",title:"useCounter",description:"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useCounter.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard"},next:{title:"useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{counter:t,setCounter:n,increment:a,decrement:s,reset:c}=(0,o.Cf)(10);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:a,children:"\uc99d\uac00"}),(0,i.jsx)(e.button,{onClick:s,children:"\uac10\uc18c"}),(0,i.jsx)(e.button,{onClick:()=>n(20),children:"20\uc73c\ub85c \uc14b\ud305"}),(0,i.jsx)(e.button,{onClick:c,children:"\ucd08\uae30\ud654"})]}),(0,i.jsxs)(e.p,{children:["counter: ",t]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usecounter",children:"useCounter"})}),"\n",(0,i.jsxs)(t.p,{children:["\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, ",(0,i.jsx)(t.code,{children:"\uc99d\uac00"}),", ",(0,i.jsx)(t.code,{children:"\uac10\uc18c"})," \ubc0f ",(0,i.jsx)(t.code,{children:"\ub9ac\uc14b"})," \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCounter/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useCounter(initialValue: number = 0): {\n counter: number;\n setCounter: React.Dispatch>;\n increment: () => void;\n decrement: () => void;\n reset: () => void;\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCounter } from '@modern-kit/react';\n\nconst Example = () => {\n const { counter, setCounter, increment, decrement, reset } = useCounter(10);\n\n return (\n
\n
\n \n \n \n \n
\n

counter: {counter}

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/8b9d18ba.2381fce5.js.LICENSE.txt b/assets/js/8079f804.90ba8da3.js.LICENSE.txt similarity index 100% rename from assets/js/8b9d18ba.2381fce5.js.LICENSE.txt rename to assets/js/8079f804.90ba8da3.js.LICENSE.txt diff --git a/assets/js/8079f804.ac0292ee.js b/assets/js/8079f804.ac0292ee.js deleted file mode 100644 index 939e420e8..000000000 --- a/assets/js/8079f804.ac0292ee.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 8079f804.ac0292ee.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9643],{4033:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="useCounter",c={id:"react/hooks/useCounter",title:"useCounter",description:"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useCounter.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard"},next:{title:"useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList"}},l={},u=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},{counter:t,setCounter:n,increment:a,decrement:s,reset:c}=(0,o.Cf)(10);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:a,children:"\uc99d\uac00"}),(0,i.jsx)(e.button,{onClick:s,children:"\uac10\uc18c"}),(0,i.jsx)(e.button,{onClick:()=>n(20),children:"20\uc73c\ub85c \uc14b\ud305"}),(0,i.jsx)(e.button,{onClick:c,children:"\ucd08\uae30\ud654"})]}),(0,i.jsxs)(e.p,{children:["counter: ",t]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usecounter",children:"useCounter"})}),"\n",(0,i.jsxs)(t.p,{children:["\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, ",(0,i.jsx)(t.code,{children:"\uc99d\uac00"}),", ",(0,i.jsx)(t.code,{children:"\uac10\uc18c"})," \ubc0f ",(0,i.jsx)(t.code,{children:"\ub9ac\uc14b"})," \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCounter/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useCounter(initialValue: number = 0): {\n counter: number;\n setCounter: React.Dispatch>;\n increment: () => void;\n decrement: () => void;\n reset: () => void;\n}\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCounter } from '@modern-kit/react';\n\nconst Example = () => {\n const { counter, setCounter, increment, decrement, reset } = useCounter(10);\n\n return (\n
\n
\n \n \n \n \n
\n

counter: {counter}

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/8a16b8e9.57fc4ba8.js b/assets/js/8a16b8e9.57fc4ba8.js deleted file mode 100644 index 3bf131b30..000000000 --- a/assets/js/8a16b8e9.57fc4ba8.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 8a16b8e9.57fc4ba8.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8866],{142:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useDocumentTitle",l={id:"react/hooks/useDocumentTitle",title:"useDocumentTitle",description:"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDocumentTitle.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState"},next:{title:"useFileReader",permalink:"/modern-kit/docs/react/hooks/useFileReader"}},u={},d=()=>{const e={button:"button",div:"div",input:"input",...(0,r.a)()},[t,n]=(0,a.useState)("useDocumentTitle"),[s,c]=(0,a.useState)("");return(0,o.jr)(t,{preserveTitleOnUnmount:!1}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.input,{type:"text",value:s,onChange:e=>c(e.target.value)}),(0,i.jsx)(e.button,{onClick:()=>{n(s),alert("\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.")},children:"\ud0c0\uc774\ud2c0 \ubcc0\uacbd"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedocumenttitle",children:"useDocumentTitle"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"SEO"}),"\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 ",(0,i.jsx)(t.code,{children:"document.title"}),"\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"preserveTitleOnUnmount"})," \uc635\uc158\uc744 ",(0,i.jsx)(t.code,{children:"true"}),"\ub85c \uc900\ub2e4\uba74 ",(0,i.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0 \ubcc0\uacbd \ub41c \ud0c0\uc774\ud2c0\ub85c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDocumentTitle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseDocumentTitleOption {\n preserveTitleOnUnmount?: boolean; // default: false\n}\n\nconst useDocumentTitle: (\n title: string,\n { preserveTitleOnUnmount }?: UseDocumentTitleOption\n) => void;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDocumentTitle } from '@modern-kit/react';\n\nconst Example = () => {\n const [title, setTitle] = useState('useDocumentTitle');\n const [inputValue, setInputValue] = useState('');\n\n const handleChangeTitle = () => {\n setTitle(inputValue);\n alert('\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.');\n };\n\n useDocumentTitle(title, {\n preserveTitleOnUnmount: false, // default: false\n });\n\n return (\n
\n setInputValue(e.target.value)}\n />\n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Xe,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>qe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ve,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Be,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const V={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function B(){return"undefined"==typeof window}function Y(){return!B()}function W(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(B())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,V[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const De=()=>navigator.onLine,Ue=()=>!0;function qe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,De,Ue)}}function Ve(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Xe(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Be(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",D="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?B(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,b,c]),J.CPU=q([w]),J.DEVICE=q([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=q([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/8a16b8e9.c0d26d66.js b/assets/js/8a16b8e9.c0d26d66.js new file mode 100644 index 000000000..6e3cbb816 --- /dev/null +++ b/assets/js/8a16b8e9.c0d26d66.js @@ -0,0 +1,2 @@ +/*! For license information please see 8a16b8e9.c0d26d66.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8866],{142:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useDocumentTitle",l={id:"react/hooks/useDocumentTitle",title:"useDocumentTitle",description:"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useDocumentTitle.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useDocumentTitle",permalink:"/modern-kit/docs/react/hooks/useDocumentTitle",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useDebouncedState",permalink:"/modern-kit/docs/react/hooks/useDebouncedState"},next:{title:"useEventListener",permalink:"/modern-kit/docs/react/hooks/useEventListener"}},u={},d=()=>{const e={button:"button",div:"div",input:"input",...(0,r.a)()},[t,n]=(0,a.useState)("useDocumentTitle"),[s,c]=(0,a.useState)("");return(0,o.jr)(t,{preserveTitleOnUnmount:!1}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.input,{type:"text",value:s,onChange:e=>c(e.target.value)}),(0,i.jsx)(e.button,{onClick:()=>{n(s),alert("\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.")},children:"\ud0c0\uc774\ud2c0 \ubcc0\uacbd"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usedocumenttitle",children:"useDocumentTitle"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"SEO"}),"\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 ",(0,i.jsx)(t.code,{children:"document.title"}),"\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"preserveTitleOnUnmount"})," \uc635\uc158\uc744 ",(0,i.jsx)(t.code,{children:"true"}),"\ub85c \uc900\ub2e4\uba74 ",(0,i.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0 \ubcc0\uacbd \ub41c \ud0c0\uc774\ud2c0\ub85c \uc720\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useDocumentTitle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseDocumentTitleOption {\n preserveTitleOnUnmount?: boolean; // default: false\n}\n\nconst useDocumentTitle: (\n title: string,\n { preserveTitleOnUnmount }?: UseDocumentTitleOption\n) => void;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useDocumentTitle } from '@modern-kit/react';\n\nconst Example = () => {\n const [title, setTitle] = useState('useDocumentTitle');\n const [inputValue, setInputValue] = useState('');\n\n const handleChangeTitle = () => {\n setTitle(inputValue);\n alert('\ud0c0\uc774\ud2c0\uc774 \ubcc0\uacbd\ub410\uc2b5\ub2c8\ub2e4.');\n };\n\n useDocumentTitle(title, {\n preserveTitleOnUnmount: false, // default: false\n });\n\n return (\n
\n setInputValue(e.target.value)}\n />\n \n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Be,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>_e,_:()=>Ae,a9:()=>ue,ac:()=>De,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>qe,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Te,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var $=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var U="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const V={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function B(){return"undefined"==typeof window}function Y(){return!B()}function W(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(B())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,V[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function _e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function De(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ve=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ve,Xe)}}function Ye(){return De("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",D="Chromium OS",U="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?B(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=q([u,b,c]),J.CPU=q([w]),J.DEVICE=q([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=q([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>B()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/932ca9ec.dc3de11e.js.LICENSE.txt b/assets/js/8a16b8e9.c0d26d66.js.LICENSE.txt similarity index 100% rename from assets/js/932ca9ec.dc3de11e.js.LICENSE.txt rename to assets/js/8a16b8e9.c0d26d66.js.LICENSE.txt diff --git a/assets/js/8b9d18ba.2381fce5.js b/assets/js/8b9d18ba.2381fce5.js deleted file mode 100644 index c60df685f..000000000 --- a/assets/js/8b9d18ba.2381fce5.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 8b9d18ba.2381fce5.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6646],{1765:(e,t,n)=>{n.r(t),n.d(t,{AsExample:()=>d,DefaultExample:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>p,frontMatter:()=>a,metadata:()=>c,toc:()=>f});var i=n(1986),r=n(9937),o=(n(7800),n(384));const a={},s="OutsideClick",c={id:"react/components/OutsideClick",title:"OutsideClick",description:"useOutsideClickEffect\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/OutsideClick.mdx",sourceDirName:"react/components",slug:"/react/components/OutsideClick",permalink:"/modern-kit/docs/react/components/OutsideClick",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"},next:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"}},l={},u=()=>(0,i.jsx)(o.my,{style:{width:"500px",height:"100px",backgroundColor:"skyBlue"},callback:()=>console.log("DefaultExample Outside Clicked!"),children:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),d=()=>(0,i.jsx)(o.my,{as:"input",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.",callback:()=>console.log("As-Example Outslide Clicked!"),style:{width:"300px",height:"50px"}}),f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"As-Example",id:"as-example",level:3}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"outsideclick",children:"OutsideClick"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useOutsideClickEffect"}),"\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"OutsideClick"}),"\ub85c \uac10\uc2f8\uc9c4 \ucef4\ud3ec\ub10c\ud2b8 \uc678\ubd80\ub97c \ud074\ub9ad\ud558\ub294 \uacbd\uc6b0 ",(0,i.jsx)(t.code,{children:"callback"}),"\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 OutsideClick \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc6d0\ud558\ub294 \ud0dc\uadf8\ub85c \ubcc0\uacbd \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc544\ub798 \uc608\uc81c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694)"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/OutsideClick/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type NonHaveChildElements =\n | 'input'\n | 'textarea'\n | 'img'\n | 'br'\n | 'hr'\n | 'meta'\n | 'link'\n | 'base'\n | 'col'\n | 'embed'\n | 'source'\n | 'track'\n | 'wbr';\n\ntype NoChildren = Tag extends NonHaveChildElements\n ? { children?: never }\n : { children: ReactNode };\n\ntype AsRequired = Tag extends 'div'\n ? { as?: Tag }\n : { as: Tag };\n\ntype AllowedTagName =\n Tag extends keyof HTMLElementTagNameMap\n ? HTMLElementTagNameMap[Tag]\n : HTMLElement;\n\ntype OutsideClickProp = \n ComponentProps &\n AsRequired &\n NoChildren & {\n callback: () => void;\n };\n\nconst OutsideClick: (\n { as, children, callback, ...props }: OutsideClickProps,\n ref: React.ForwardedRef\n) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsideClick } from '@modern-kit/react';\n\nconst DefaultExample = () => {\n const style = {\n width: '500px',\n height: '100px',\n backgroundColor: 'skyBlue',\n };\n return (\n console.log('DefaultExample Outside Clicked!')}>\n \uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n \n );\n};\n"})}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"as-example",children:"As-Example"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { OutsideClick } from \'@modern-kit/react\';\n\nconst AsExample = () => {\n const style = {\n width: "300px",\n height: "50px",\n };\n return (\n // OutsideClick \ucef4\ud3ec\ub10c\ud2b8\uc758 "\uc81c\ub124\ub9ad \ud0c0\uc785" \uc9c0\uc815 \ud6c4 "as" props\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694. \n // \uc6d0\ud65c\ud55c \ud0c0\uc785 \ucd94\ub860\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.\n \n as="input"\n placeholder="\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."\n callback={() => console.log(\'As-Example Outslide Clicked!\')}\n style={style}\n />\n );\n};\n'})}),"\n","\n",(0,i.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ue,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>ze,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>De,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=M.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=L(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(L(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const D={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function H(e){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const pe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,D[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Me=e=>_e[e],Ie=Me("localStorage"),Pe=e=>window.localStorage.getItem(e),Le=e=>(Ie.subscribe(e),()=>{Ie.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Ie.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function De(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+He(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+He(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+He(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+He(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Me("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",M="Motorola",I="Opera",P="Samsung",L="Sharp",z="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([p]),J.DEVICE=B([l,f,d,w,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/8b9d18ba.5f93a071.js b/assets/js/8b9d18ba.5f93a071.js new file mode 100644 index 000000000..0963faad2 --- /dev/null +++ b/assets/js/8b9d18ba.5f93a071.js @@ -0,0 +1,2 @@ +/*! For license information please see 8b9d18ba.5f93a071.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6646],{1765:(e,t,n)=>{n.r(t),n.d(t,{AsExample:()=>f,DefaultExample:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),r=n(9937),o=(n(7800),n(384)),a=n(5549);const s={},c="OutsideClick",l={id:"react/components/OutsideClick",title:"OutsideClick",description:"useOutsideClickEffect\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/OutsideClick.mdx",sourceDirName:"react/components",slug:"/react/components/OutsideClick",permalink:"/modern-kit/docs/react/components/OutsideClick",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"},next:{title:"Portal",permalink:"/modern-kit/docs/react/components/Portal"}},u={},d=()=>(0,i.jsx)(o.my,{style:{width:"500px",height:"100px",backgroundColor:"skyBlue"},callback:()=>console.log("DefaultExample Outside Clicked!"),children:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),f=()=>(0,i.jsx)(o.my,{as:"input",placeholder:"\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.",callback:()=>console.log("As-Example Outslide Clicked!"),style:{width:"300px",height:"50px"}}),b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"As-Example",id:"as-example",level:3}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"outsideclick",children:"OutsideClick"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useOutsideClickEffect"}),"\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"OutsideClick"}),"\ub85c \uac10\uc2f8\uc9c4 \ucef4\ud3ec\ub10c\ud2b8 \uc678\ubd80\ub97c \ud074\ub9ad\ud558\ub294 \uacbd\uc6b0 ",(0,i.jsx)(t.code,{children:"callback"}),"\uc774 \uc2e4\ud589\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"as"})," \uc18d\uc131\uc744 \ud1b5\ud574 OutsideClick \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc6d0\ud558\ub294 \ud0dc\uadf8\ub85c \ubcc0\uacbd \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uc544\ub798 \uc608\uc81c\ub97c \ucc38\uace0\ud574\uc8fc\uc138\uc694)"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/OutsideClick/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type NonHaveChildElements =\n | 'input'\n | 'textarea'\n | 'img'\n | 'br'\n | 'hr'\n | 'meta'\n | 'link'\n | 'base'\n | 'col'\n | 'embed'\n | 'source'\n | 'track'\n | 'wbr';\n\ntype NoChildren = Tag extends NonHaveChildElements\n ? { children?: never }\n : { children: ReactNode };\n\ntype AsRequired = Tag extends 'div'\n ? { as?: Tag }\n : { as: Tag };\n\ntype AllowedTagName =\n Tag extends keyof HTMLElementTagNameMap\n ? HTMLElementTagNameMap[Tag]\n : HTMLElement;\n\ntype OutsideClickProp = \n ComponentProps &\n AsRequired &\n NoChildren & {\n callback: () => void;\n };\n\nconst OutsideClick: (\n { as, children, callback, ...props }: OutsideClickProps,\n ref: React.ForwardedRef\n) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { OutsideClick } from '@modern-kit/react';\n\nconst DefaultExample = () => {\n const style = {\n width: '500px',\n height: '100px',\n backgroundColor: 'skyBlue',\n };\n return (\n console.log('DefaultExample Outside Clicked!')}>\n \uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.\n \n );\n};\n"})}),"\n","\n",(0,i.jsx)(a.Z,{children:()=>(0,i.jsx)(d,{})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"as-example",children:"As-Example"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { OutsideClick } from \'@modern-kit/react\';\n\nconst AsExample = () => {\n const style = {\n width: "300px",\n height: "50px",\n };\n return (\n // OutsideClick \ucef4\ud3ec\ub10c\ud2b8\uc758 "\uc81c\ub124\ub9ad \ud0c0\uc785" \uc9c0\uc815 \ud6c4 "as" props\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694. \n // \uc6d0\ud65c\ud55c \ud0c0\uc785 \ucd94\ub860\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.\n \n as="input"\n placeholder="\uc678\ubd80 \uc601\uc5ed \ud074\ub9ad \ud6c4 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."\n callback={() => console.log(\'As-Example Outslide Clicked!\')}\n style={style}\n />\n );\n};\n'})}),"\n","\n",(0,i.jsx)(a.Z,{children:()=>(0,i.jsx)(f,{})})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>He,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>we,Pr:()=>Ze,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>$e,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Xe,jr:()=>Te,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>Ye,qQ:()=>Ke,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>We,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,I=/^0o[0-7]+$/i,P=parseInt;function A(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=M.test(e);return n||I.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var z=function(){return m.Date.now()},L="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=A(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(A(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var B="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function H(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const Z=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return Z(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return Z(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,p]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},pe=Y()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);pe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield D(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=K(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:p}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Me="modern-kit-session-storage",Ie={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Me,subscribe:e=>{window.addEventListener(Me,e)},unsubscribe:e=>{window.removeEventListener(Me,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Me))}}},Pe=e=>Ie[e],Ae=Pe("localStorage"),ze=e=>window.localStorage.getItem(e),Le=e=>(Ae.subscribe(e),()=>{Ae.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=K(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Ae.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Ae.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const Be={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Be),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,De=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,De)}}function Ye(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function He(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ze({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Ke(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=K(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=K(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",p="architecture",w="console",m="mobile",h="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",M="Motorola",I="Opera",P="Samsung",A="Sharp",z="Sony",L="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",B="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};G.VERSION="1.0.38",G.BROWSER=X([u,b,c]),G.CPU=X([p]),G.DEVICE=X([l,f,d,w,m,g,h,v,y]),G.ENGINE=G.OS=X([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.b0601cf2.js.LICENSE.txt b/assets/js/8b9d18ba.5f93a071.js.LICENSE.txt similarity index 100% rename from assets/js/9be130a4.b0601cf2.js.LICENSE.txt rename to assets/js/8b9d18ba.5f93a071.js.LICENSE.txt diff --git a/assets/js/932ca9ec.a73ee012.js b/assets/js/932ca9ec.a73ee012.js new file mode 100644 index 000000000..56f1d5e8e --- /dev/null +++ b/assets/js/932ca9ec.a73ee012.js @@ -0,0 +1,2 @@ +/*! For license information please see 932ca9ec.a73ee012.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6300],{2076:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),o=n(9937),r=n(384);const a={},s="useScrollLock",c={id:"react/hooks/useScrollLock",title:"useScrollLock",description:"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useScrollLock.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"},next:{title:"useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo"}},l={},u=()=>{const e={button:"button",div:"div",...(0,o.a)()},{ref:t,lock:n,unlock:a}=(0,r.Pr)({autoLock:!0}),s={width:"100%",height:"500px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:n,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08"}),(0,i.jsx)(e.button,{onClick:a,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08 \ud574\uc81c"}),(0,i.jsxs)(e.div,{ref:t,style:{width:"400px",maxHeight:"600px",overflowY:"scroll"},children:[(0,i.jsx)(e.div,{style:{...s,backgroundColor:"red"}}),(0,i.jsx)(e.div,{style:{...s,backgroundColor:"green"}}),(0,i.jsx)(e.div,{style:{...s,backgroundColor:"blue"}})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"document.body",id:"documentbody",level:3},{value:"Specific element",id:"specific-element",level:3},{value:"Example",id:"example",level:3}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usescrolllock",children:"useScrollLock"})}),"\n",(0,i.jsxs)(t.p,{children:["\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 ",(0,i.jsx)(t.code,{children:"lock"}),", ",(0,i.jsx)(t.code,{children:"unlock"})," \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Modal"}),"\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1 \ub410\uc744 \ub54c, \ubc30\uacbd \uc694\uc18c(",(0,i.jsx)(t.code,{children:"ex. document.body"}),")\uc758 \uc2a4\ud06c\ub864\uc744 \uc7a0\uae00 \ub54c \ud65c\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"document.body"}),"\uc744 \ub300\uc0c1\uc73c\ub85c mount \uc2dc\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc7a0\uae09\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0\ub294 \ud0c0\uac9f \uc694\uc18c\uc758 \uc6d0\ub798 ",(0,i.jsx)(t.code,{children:"overflow"})," \uac12\uc73c\ub85c \ub2e4\uc2dc \ub3cc\ub824\ub193\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollLock/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseScrollLockProps {\n autoLock?: boolean;\n}\n\nconst useScrollLock: ({\n autoLock,\n}?: UseScrollLockProps) => {\n ref: React.MutableRefObject>;\n lock: () => void;\n unlock: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"documentbody",children:"document.body"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n useScrollLock(); // \uc790\ub3d9\uc73c\ub85c \uc7a0\uadf8\uc9c0 \uc54a\uc73c\ub824\uba74 { authLock: false }\ub85c \uc14b\ud305\ud558\uc138\uc694.\n\n return
{/* ... */}
;\n};\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"specific-element",children:"Specific element"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, lock, unlock } = useScrollLock({ autoLock: false });\n\n const wrapperStyle = {\n width: '400px',\n maxHeight: '600px',\n overflowY: 'scroll',\n };\n const boxStyle = {\n width: '100%',\n maxHeight: '500px',\n };\n return (\n
\n \n \n
\n
\n
\n
\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>He,FS:()=>ct,GN:()=>Ee,Hk:()=>ye,KS:()=>rt,LN:()=>Ve,Mm:()=>xe,Nr:()=>re,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Le,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>ot,g4:()=>je,iP:()=>dt,ii:()=>Xe,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Oe,z$:()=>Ce});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",C=h?h.toStringTag:void 0;var E="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var L=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return L;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||M.test(e)?I(e.slice(2),n?2:8):R.test(e)?L:+e}var z=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,N(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(P(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},Y=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function H(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,o.useState)(!1),p=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})},we=D()?o.useLayoutEffect:o.useEffect;function pe(e,t,n,i={}){const o=oe(i),r=ne(n);we((()=>{if(e)return e.addEventListener(t,r,o),()=>{e.removeEventListener(t,r,o)}}),[t,e,o,r])}function me(e){const t=(0,o.useRef)(null),n=(0,o.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,o.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,o.forwardRef)(((e,t)=>{var{as:n,children:o,callback:a}=e,s=r(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:o}))}));(0,o.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function xe(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield Y(e,B[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Oe(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Le(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Me[e],Pe=Ie("localStorage"),ze=e=>window.localStorage.getItem(e),$e=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)($e,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=ze(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,o.useState)(Fe(e,t)),r=(0,o.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",r),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Ue),i=(0,o.useCallback)((t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=r-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,Ye=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Be,Ye)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function He(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+Je(c.width,i.width,s)}};function Ze(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=et(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},je(e))}function ot(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function rt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",C="Browser",E="Chrome",O="Firefox",T="Google",N="Huawei",L="LG",R="Microsoft",_="Motorola",M="Opera",I="Samsung",P="Sharp",z="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,o.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=re(n,e),r=(0,o.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/a45fe377.f832429c.js.LICENSE.txt b/assets/js/932ca9ec.a73ee012.js.LICENSE.txt similarity index 100% rename from assets/js/a45fe377.f832429c.js.LICENSE.txt rename to assets/js/932ca9ec.a73ee012.js.LICENSE.txt diff --git a/assets/js/932ca9ec.dc3de11e.js b/assets/js/932ca9ec.dc3de11e.js deleted file mode 100644 index 77259bbfd..000000000 --- a/assets/js/932ca9ec.dc3de11e.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 932ca9ec.dc3de11e.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6300],{2076:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),o=n(9937),r=n(384);const a={},s="useScrollLock",c={id:"react/hooks/useScrollLock",title:"useScrollLock",description:"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useScrollLock.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useScrollLock",permalink:"/modern-kit/docs/react/hooks/useScrollLock",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"},next:{title:"useScrollTo",permalink:"/modern-kit/docs/react/hooks/useScrollTo"}},l={},u=()=>{const e={button:"button",div:"div",...(0,o.a)()},{ref:t,lock:n,unlock:a}=(0,r.Pr)({autoLock:!0}),s={width:"100%",height:"500px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:n,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08"}),(0,i.jsx)(e.button,{onClick:a,children:"\uc2a4\ud06c\ub864 \uc7a0\uae08 \ud574\uc81c"}),(0,i.jsxs)(e.div,{ref:t,style:{width:"400px",maxHeight:"600px",overflowY:"scroll"},children:[(0,i.jsx)(e.div,{style:{...s,backgroundColor:"red"}}),(0,i.jsx)(e.div,{style:{...s,backgroundColor:"green"}}),(0,i.jsx)(e.div,{style:{...s,backgroundColor:"blue"}})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"document.body",id:"documentbody",level:3},{value:"Specific element",id:"specific-element",level:3},{value:"Example",id:"example",level:3}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usescrolllock",children:"useScrollLock"})}),"\n",(0,i.jsxs)(t.p,{children:["\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 ",(0,i.jsx)(t.code,{children:"lock"}),", ",(0,i.jsx)(t.code,{children:"unlock"})," \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Modal"}),"\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub80c\ub354\ub9c1 \ub410\uc744 \ub54c, \ubc30\uacbd \uc694\uc18c(",(0,i.jsx)(t.code,{children:"ex. document.body"}),")\uc758 \uc2a4\ud06c\ub864\uc744 \uc7a0\uae00 \ub54c \ud65c\uc6a9\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uae30\ubcf8\uc801\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"document.body"}),"\uc744 \ub300\uc0c1\uc73c\ub85c mount \uc2dc\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc2a4\ud06c\ub864\uc744 \uc7a0\uae09\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"unmount"})," \uc2dc\uc5d0\ub294 \ud0c0\uac9f \uc694\uc18c\uc758 \uc6d0\ub798 ",(0,i.jsx)(t.code,{children:"overflow"})," \uac12\uc73c\ub85c \ub2e4\uc2dc \ub3cc\ub824\ub193\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useScrollLock/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseScrollLockProps {\n autoLock?: boolean;\n}\n\nconst useScrollLock: ({\n autoLock,\n}?: UseScrollLockProps) => {\n ref: React.MutableRefObject>;\n lock: () => void;\n unlock: () => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"documentbody",children:"document.body"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n useScrollLock(); // \uc790\ub3d9\uc73c\ub85c \uc7a0\uadf8\uc9c0 \uc54a\uc73c\ub824\uba74 { authLock: false }\ub85c \uc14b\ud305\ud558\uc138\uc694.\n\n return
{/* ... */}
;\n};\n"})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"specific-element",children:"Specific element"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useScrollLock } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref, lock, unlock } = useScrollLock({ autoLock: false });\n\n const wrapperStyle = {\n width: '400px',\n maxHeight: '600px',\n overflowY: 'scroll',\n };\n const boxStyle = {\n width: '100%',\n maxHeight: '500px',\n };\n return (\n
\n \n \n
\n
\n
\n
\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h3,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Ye,FS:()=>rt,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>re,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>ze,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>je,z$:()=>Se});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function L(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,M=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(L(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=L(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||M.test(e)?I(e.slice(2),n?2:8):R.test(e)?N:+e}var z=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError($);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,L(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(P(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},Y=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function D(){return!V()}function H(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return H(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,o.useState)(!1),p=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})};const we=(0,o.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=r(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,o.useRef)(null),n=ne(e);return(0,o.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield H(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield Y(e,B[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function je(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Te(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Le="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Le,subscribe:e=>{window.addEventListener(Le,e)},unsubscribe:e=>{window.removeEventListener(Le,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Le))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Me=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Pe=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Pe,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ie(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,o.useState)($e(e,t));return(0,o.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,i=a-t.top,o=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=o,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,qe,Ue)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const He=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+He(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+He(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+He(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+He(c.width,i.width,s)}};function Ge(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=We(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ke(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(U);return L(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",T="Google",L="Huawei",N="LG",R="Microsoft",_="Motorola",M="Opera",I="Samsung",P="Sharp",z="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},H=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,f,c]),J.CPU=X([w]),J.DEVICE=X([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var ot=it.exports;function rt(){const[e,t]=(0,o.useState)(null);return pe((()=>{const e=new ot.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,r]=(0,o.useState)({width:null,height:null}),a=(0,o.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),c=(0,o.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/9be130a4.77151573.js b/assets/js/9be130a4.77151573.js new file mode 100644 index 000000000..c7c9568b3 --- /dev/null +++ b/assets/js/9be130a4.77151573.js @@ -0,0 +1,2 @@ +/*! For license information please see 9be130a4.77151573.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5337],{6297:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="usePrevious",l={id:"react/hooks/usePrevious",title:"usePrevious",description:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePrevious.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"},next:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"}},u={},d=()=>{const e={button:"button",div:"div",...(0,r.a)()},[t,n]=(0,a.useState)(0),s=(0,o.D9)(t);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:["Current Count is - ",t]}),(0,i.jsxs)(e.div,{children:["Previous Count is - ",s]}),(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"Increment"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useprevious",children:"usePrevious"})}),"\n",(0,i.jsx)(t.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePrevious/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Pe,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,I=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||I.test(e)?M(e.slice(2),n?2:8):R.test(e)?P:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Pe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Ie={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Me=e=>Ie[e],ze=Me("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",R="Microsoft",_="Motorola",I="Opera",M="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/aa089504.a1511435.js.LICENSE.txt b/assets/js/9be130a4.77151573.js.LICENSE.txt similarity index 100% rename from assets/js/aa089504.a1511435.js.LICENSE.txt rename to assets/js/9be130a4.77151573.js.LICENSE.txt diff --git a/assets/js/9be130a4.b0601cf2.js b/assets/js/9be130a4.b0601cf2.js deleted file mode 100644 index 37d1a1497..000000000 --- a/assets/js/9be130a4.b0601cf2.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 9be130a4.b0601cf2.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[5337],{6297:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="usePrevious",l={id:"react/hooks/usePrevious",title:"usePrevious",description:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePrevious.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePrevious",permalink:"/modern-kit/docs/react/hooks/usePrevious",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"usePreservedState",permalink:"/modern-kit/docs/react/hooks/usePreservedState"},next:{title:"useResizeObserver",permalink:"/modern-kit/docs/react/hooks/useResizeObserver"}},u={},d=()=>{const e={button:"button",div:"div",...(0,r.a)()},[t,n]=(0,a.useState)(0),s=(0,o.D9)(t);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:["Current Count is - ",t]}),(0,i.jsxs)(e.div,{children:["Previous Count is - ",s]}),(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"Increment"})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useprevious",children:"usePrevious"})}),"\n",(0,i.jsx)(t.p,{children:"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePrevious/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const usePrevious: (value: T) => T;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { usePrevious } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(0);\n const previousCount = usePrevious(count);\n\n const onIncrementCount = () => {\n setCount(count + 1);\n };\n\n return (\n
\n
Current Count is - {count}
\n
Previous Count is - {previousCount}
\n \n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ce,Hk:()=>he,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>ve,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),v=m.Symbol,h=Object.prototype,g=h.hasOwnProperty,y=h.toString,x=v?v.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=v?v.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,R=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||R.test(e)?M(e.slice(2),n?2:8):_.test(e)?P:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function v(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),v.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},v.flush=function(){return void 0===s?a:m(L())},v}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),v=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),h=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:v,onLoad:h},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},he=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Pe="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}}},Ie=e=>_e[e],Re=Ie("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",v="tablet",h="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",_="Microsoft",I="Motorola",R="Opera",M="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=v),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,h,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,h,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return h},this.setUA=function(e){return h=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(h),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,h,v,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/a45fe377.9eec2679.js b/assets/js/a45fe377.9eec2679.js new file mode 100644 index 000000000..db336064b --- /dev/null +++ b/assets/js/a45fe377.9eec2679.js @@ -0,0 +1,2 @@ +/*! For license information please see a45fe377.9eec2679.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[59],{7474:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useCycleList",c={id:"react/hooks/useCycleList",title:"useCycleList",description:"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useCycleList.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter"},next:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"}},l={},u=()=>{const e={button:"button",div:"div",...(0,r.a)()},{currentItem:t,nextIndex:n,prevIndex:a,setIndex:s}=(0,o.z$)([(0,i.jsx)(e.div,{children:"\uccab \ubc88\uc9f8 \uc694\uc18c"}),(0,i.jsx)(e.div,{children:"\ub450 \ubc88\uc9f8 \uc694\uc18c"}),(0,i.jsx)(e.div,{children:"\uc138 \ubc88\uc9f8 \uc694\uc18c"})]);return(0,i.jsxs)(e.div,{children:[t,(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>n(),children:"nextIndex"}),(0,i.jsx)(e.button,{onClick:()=>a(),children:"prveIndex"}),(0,i.jsx)(e.button,{onClick:()=>s(2),children:"setIndex(2)"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usecyclelist",children:"useCycleList"})}),"\n",(0,i.jsxs)(t.p,{children:["\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c ",(0,i.jsx)(t.code,{children:"\uc21c\ud658"}),"\ud558\uba70 \ub2e4\uc74c(",(0,i.jsx)(t.code,{children:"nextIndex"}),"), \uc774\uc804(",(0,i.jsx)(t.code,{children:"prevIndex"}),") \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(",(0,i.jsx)(t.code,{children:"setIndex"}),") \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["nextIndex, prevIndex, setIndex \ud638\ucd9c \uc2dc ",(0,i.jsx)(t.code,{children:"action"})," \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4 \uc6d0\ud558\ub294 action\uc744 \uc2e4\ud589 \uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCycleList/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useCycleList: (\n arr: T[] | readonly T[],\n initialIndex?: number\n) => {\n currentItem: T;\n nextIndex: (action?: StepAction) => void;\n prevIndex: (action?: StepAction) => void;\n setIndex: (\n index: SetStateAction,\n action?: StepAction\n ) => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCycleList } from '@modern-kit/react';\n\nconst Example = () => {\n const { currentItem, nextIndex, prevIndex, setIndex } = useCycleList([\n
\uccab \ubc88\uc9f8 \uc694\uc18c
,\n
\ub450 \ubc88\uc9f8 \uc694\uc18c
,\n
\uc138 \ubc88\uc9f8 \uc694\uc18c
,\n ]);\n\n return (\n
\n {currentItem}\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>xe,KS:()=>ot,LN:()=>Ye,Mm:()=>ye,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>$e,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Ie,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,L=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=R.test(e);return n||M.test(e)?L(e.slice(2),n?2:8):_.test(e)?N:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(P(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ye(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ie(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Le=e=>Me[e],Pe=Le("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Le("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",L="Samsung",P="Sharp",z="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,x]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/ad8813a3.1783b7c3.js.LICENSE.txt b/assets/js/a45fe377.9eec2679.js.LICENSE.txt similarity index 100% rename from assets/js/ad8813a3.1783b7c3.js.LICENSE.txt rename to assets/js/a45fe377.9eec2679.js.LICENSE.txt diff --git a/assets/js/a45fe377.f832429c.js b/assets/js/a45fe377.f832429c.js deleted file mode 100644 index 10547593d..000000000 --- a/assets/js/a45fe377.f832429c.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see a45fe377.f832429c.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[59],{7474:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>f,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useCycleList",c={id:"react/hooks/useCycleList",title:"useCycleList",description:"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useCycleList.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useCycleList",permalink:"/modern-kit/docs/react/hooks/useCycleList",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter"},next:{title:"useDebounce",permalink:"/modern-kit/docs/react/hooks/useDebounce"}},l={},u=()=>{const e={button:"button",div:"div",...(0,r.a)()},{currentItem:t,nextIndex:n,prevIndex:a,setIndex:s}=(0,o.z$)([(0,i.jsx)(e.div,{children:"\uccab \ubc88\uc9f8 \uc694\uc18c"}),(0,i.jsx)(e.div,{children:"\ub450 \ubc88\uc9f8 \uc694\uc18c"}),(0,i.jsx)(e.div,{children:"\uc138 \ubc88\uc9f8 \uc694\uc18c"})]);return(0,i.jsxs)(e.div,{children:[t,(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>n(),children:"nextIndex"}),(0,i.jsx)(e.button,{onClick:()=>a(),children:"prveIndex"}),(0,i.jsx)(e.button,{onClick:()=>s(2),children:"setIndex(2)"})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usecyclelist",children:"useCycleList"})}),"\n",(0,i.jsxs)(t.p,{children:["\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c ",(0,i.jsx)(t.code,{children:"\uc21c\ud658"}),"\ud558\uba70 \ub2e4\uc74c(",(0,i.jsx)(t.code,{children:"nextIndex"}),"), \uc774\uc804(",(0,i.jsx)(t.code,{children:"prevIndex"}),") \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(",(0,i.jsx)(t.code,{children:"setIndex"}),") \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["nextIndex, prevIndex, setIndex \ud638\ucd9c \uc2dc ",(0,i.jsx)(t.code,{children:"action"})," \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4 \uc6d0\ud558\ub294 action\uc744 \uc2e4\ud589 \uc2dc\ud0ac \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useCycleList/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useCycleList: (\n arr: T[] | readonly T[],\n initialIndex?: number\n) => {\n currentItem: T;\n nextIndex: (action?: StepAction) => void;\n prevIndex: (action?: StepAction) => void;\n setIndex: (\n index: SetStateAction,\n action?: StepAction\n ) => void;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useCycleList } from '@modern-kit/react';\n\nconst Example = () => {\n const { currentItem, nextIndex, prevIndex, setIndex } = useCycleList([\n
\uccab \ubc88\uc9f8 \uc694\uc18c
,\n
\ub450 \ubc88\uc9f8 \uc694\uc18c
,\n
\uc138 \ubc88\uc9f8 \uc694\uc18c
,\n ]);\n\n return (\n
\n {currentItem}\n
\n \n \n \n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>ye,D9:()=>Ve,FS:()=>ot,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>xe,XI:()=>Ie,Xs:()=>Qe,Yz:()=>Oe,_:()=>Pe,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",I=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,L=/^0b[01]+$/i,R=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&I.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=L.test(e);return n||R.test(e)?M(e.slice(2),n?2:8):_.test(e)?N:+e}var P=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=P();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=P(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(P())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ye(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ie({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Le=e=>_e[e],Re=Le("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Pe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Le("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",I="Firefox",O="Google",T="Huawei",N="LG",_="Microsoft",L="Motorola",R="Opera",M="Samsung",z="Sharp",P="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([w]),J.DEVICE=B([l,b,d,p,m,v,h,g,x]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/aa089504.516103d6.js b/assets/js/aa089504.516103d6.js new file mode 100644 index 000000000..27230dd2d --- /dev/null +++ b/assets/js/aa089504.516103d6.js @@ -0,0 +1,2 @@ +/*! For license information please see aa089504.516103d6.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3238],{5488:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var r=n(1986),i=n(9937),o=n(384),a=n(5549);const s={},c="usePreferredColorScheme",l={id:"react/hooks/usePreferredColorScheme",title:"usePreferredColorScheme",description:"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light, \ub610\ub294 no-preference\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePreferredColorScheme.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useOutsidePointerDown",permalink:"/modern-kit/docs/react/hooks/useOutsidePointerDown"},next:{title:"usePreservedCallback",permalink:"/modern-kit/docs/react/hooks/usePreservedCallback"}},u={},d=()=>{const e={b:"b",div:"div",p:"p",...(0,i.a)()},t=(0,o.oz)();return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.p,{children:"OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694."}),(0,r.jsxs)(e.p,{children:["ColorScheme: ",(0,r.jsx)(e.b,{children:t})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Image",id:"image",level:2},{value:"1. Light Theme",id:"1-light-theme",level:3},{value:"2. Dark Theme",id:"2-dark-theme",level:3},{value:"Note",id:"note",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"usepreferredcolorscheme",children:"usePreferredColorScheme"})}),"\n",(0,r.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(",(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"prefers-coloc-scheme"})}),") \uc5d0 \ub530\ub77c ",(0,r.jsx)(t.code,{children:"dark"}),", ",(0,r.jsx)(t.code,{children:"light"}),", \ub610\ub294 ",(0,r.jsx)(t.code,{children:"no-preference"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["ligth: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,r.jsx)(t.code,{children:"ligth"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud558\uac70\ub098 \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc54c\ub9ac\uc9c0 \uc54a\uc558\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.li,{children:["dark: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,r.jsx)(t.code,{children:"dark"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud55c\ub2e4\uace0 \uc54c\ub838\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\ub294 ",(0,r.jsx)(t.code,{children:"\uc6b4\uc601\uccb4\uc81c \uc124\uc815"}),"\uc774\ub098 ",(0,r.jsx)(t.code,{children:"\uc0ac\uc6a9\uc790 \uc5d0\uc774\uc804\ud2b8 \uc124\uc815"}),"\uc5d0\uc11c \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc9c0\uc815 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreferredColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:'const usePreferredColorScheme: () => "dark" | "light"\n'})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { usePreferredColorScheme } from '@modern-kit/react';\n\nconst Example = () => {\n const colorScheme = usePreferredColorScheme();\n\n return (\n
\n

OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694.

\n

ColorScheme: {colorScheme}

\n
\n );\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(a.Z,{children:()=>(0,r.jsx)(d,{})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"image",children:"Image"}),"\n",(0,r.jsx)(t.h3,{id:"1-light-theme",children:"1. Light Theme"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/79c6298b-72f1-4f50-b644-93762d4d59e1",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 33"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"2-dark-theme",children:"2. Dark Theme"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/ab735906-9f8c-4e8e-9688-f6cde1786ec9",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 39"})}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"Prefers Color Scheme - MDN"})}),"\n"]})]})}function w(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(b,{...e})}):b(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var r=n(4798),i=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,r.Z)()?(0,i.jsx)(i.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>rt,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>xe,KS:()=>ot,LN:()=>Ve,Mm:()=>ye,Nr:()=>oe,OR:()=>pe,Pr:()=>Ze,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Pe,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>it,g4:()=>je,iP:()=>dt,ii:()=>Xe,jr:()=>Te,my:()=>me,nA:()=>ve,oM:()=>d,oz:()=>Ye,qQ:()=>Ke,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>f()?(0,r.jsx)(r.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,g=Object.prototype,v=g.hasOwnProperty,x=g.toString,y=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",C=m?m.toStringTag:void 0;var E="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,I=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:C&&C in Object(e)?function(e){var t=v.call(e,y),n=e[y];try{e[y]=void 0;var r=!0}catch(e){}var i=x.call(e);return r&&(t?e[y]=n:delete e[y]),i}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=R.test(e);return n||I.test(e)?M(e.slice(2),n?2:8):_.test(e)?P:+e}var $=function(){return h.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function h(e){return s=void 0,f&&r?b(e):(r=i=void 0,a)}function m(){var e=$(),n=w(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},m.flush=function(){return void 0===s?a:h($())},m}var U="Expected a function";function X(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const Z=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return Z(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!G(i,t.get(r),n))return!1;return!0}return Z(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=J){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,i.useState)(!1),p=!b,h=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:g},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?i.useLayoutEffect:i.useEffect;function pe(e,t,n,r={}){const i=ie(r),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,i),()=>{e.removeEventListener(t,o,i)}}),[t,e,i,o])}function he(e){const t=(0,i.useRef)(null),n=(0,i.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),r=(0,i.useCallback)((({target:n})=>{const r=t.current;r&&!r.contains(n)&&e(r)}),[e]);return pe(window.document,n,r),t}const me=(0,i.forwardRef)(((e,t)=>{var{as:n,children:i,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,r.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:i}))}));(0,i.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ye(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield D(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=K(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function Oe(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Pe(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Ie={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Me=e=>Ie[e],ze=Me("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(K(n)?n():n),o=(0,i.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=$e(t),i=n?te(n):r,o=K(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,r]=(0,i.useState)(Fe(e,t)),o=(0,i.useCallback)((e=>r(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)(Ue),r=(0,i.useCallback)((t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",r),{ref:e,position:t}}const Be=()=>navigator.onLine,De=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,Be,De)}}function Ye(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function Ze({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+Ge(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+Ge(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+Ge(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+Ge(c.width,r.width,s)}};function Ke(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=Je(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(K(n)?n():n),o=(0,i.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=et(t),i=n?te(n):r,o=K(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function rt(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=K(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function it(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function ot(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",g="smarttv",v="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",j="BlackBerry",C="Browser",E="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",_="Microsoft",R="Motorola",I="Opera",M="Samsung",z="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=r,e[b]=r,Y.call(e,g,x.engine),e},this.getOS=function(){var e={};return e[u]=r,e[b]=r,Y.call(e,g,x.os),y&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};G.VERSION="1.0.38",G.BROWSER=X([u,b,c]),G.CPU=X([w]),G.DEVICE=X([l,f,d,p,h,g,m,v,x]),G.ENGINE=G.OS=X([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,i.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,i.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),r=oe(n,e),o=(0,i.useCallback)((()=>{(e?r:n)({width:window.innerWidth,height:window.innerHeight})}),[e,r]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/b35b1276.d747ea76.js.LICENSE.txt b/assets/js/aa089504.516103d6.js.LICENSE.txt similarity index 100% rename from assets/js/b35b1276.d747ea76.js.LICENSE.txt rename to assets/js/aa089504.516103d6.js.LICENSE.txt diff --git a/assets/js/aa089504.a1511435.js b/assets/js/aa089504.a1511435.js deleted file mode 100644 index e8f220a49..000000000 --- a/assets/js/aa089504.a1511435.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see aa089504.a1511435.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[3238],{5488:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var r=n(1986),i=n(9937),o=n(384);const a={},s="usePreferredColorScheme",c={id:"react/hooks/usePreferredColorScheme",title:"usePreferredColorScheme",description:"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light, \ub610\ub294 no-preference\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/usePreferredColorScheme.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/usePreferredColorScheme",permalink:"/modern-kit/docs/react/hooks/usePreferredColorScheme",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useOnClickOutside",permalink:"/modern-kit/docs/react/hooks/useOnClickOutside"},next:{title:"usePreservedCallback",permalink:"/modern-kit/docs/react/hooks/usePreservedCallback"}},l={},u=()=>{const e={b:"b",div:"div",p:"p",...(0,i.a)()},t=(0,o.oz)();return(0,r.jsxs)(e.div,{children:[(0,r.jsx)(e.p,{children:"OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694."}),(0,r.jsxs)(e.p,{children:["ColorScheme: ",(0,r.jsx)(e.b,{children:t})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Image",id:"image",level:2},{value:"1. Light Theme",id:"1-light-theme",level:3},{value:"2. Dark Theme",id:"2-dark-theme",level:3},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"usepreferredcolorscheme",children:"usePreferredColorScheme"})}),"\n",(0,r.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(",(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"prefers-coloc-scheme"})}),") \uc5d0 \ub530\ub77c ",(0,r.jsx)(t.code,{children:"dark"}),", ",(0,r.jsx)(t.code,{children:"light"}),", \ub610\ub294 ",(0,r.jsx)(t.code,{children:"no-preference"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["ligth: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,r.jsx)(t.code,{children:"ligth"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud558\uac70\ub098 \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc54c\ub9ac\uc9c0 \uc54a\uc558\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,r.jsxs)(t.li,{children:["dark: \uc0ac\uc6a9\uc790\uac00 \uc2dc\uc2a4\ud15c\uc5d0 ",(0,r.jsx)(t.code,{children:"dark"})," \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc744 \uc120\ud638\ud55c\ub2e4\uace0 \uc54c\ub838\uc744 \ub54c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,r.jsxs)(t.p,{children:["\uc0ac\uc6a9\uc790\ub294 ",(0,r.jsx)(t.code,{children:"\uc6b4\uc601\uccb4\uc81c \uc124\uc815"}),"\uc774\ub098 ",(0,r.jsx)(t.code,{children:"\uc0ac\uc6a9\uc790 \uc5d0\uc774\uc804\ud2b8 \uc124\uc815"}),"\uc5d0\uc11c \uc120\ud638\ud558\ub294 \ud14c\ub9c8\ub97c \uc9c0\uc815 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreferredColorScheme/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,r.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:'const usePreferredColorScheme: () => "dark" | "light"\n'})}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { usePreferredColorScheme } from '@modern-kit/react';\n\nconst Example = () => {\n const colorScheme = usePreferredColorScheme();\n\n return (\n
\n

OS \uc2dc\uc2a4\ud15c \uc124\uc815\uc5d0\uc11c \ud14c\ub9c8\ub97c \ubcc0\uacbd\ud574\ubcf4\uc138\uc694.

\n

ColorScheme: {colorScheme}

\n
\n );\n};\n"})}),"\n",(0,r.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h2,{id:"image",children:"Image"}),"\n",(0,r.jsx)(t.h3,{id:"1-light-theme",children:"1. Light Theme"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/79c6298b-72f1-4f50-b644-93762d4d59e1",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 33"})}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"2-dark-theme",children:"2. Dark Theme"}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{src:"https://github.com/modern-agile-team/modern-kit/assets/64779472/ab735906-9f8c-4e8e-9688-f6cde1786ec9",alt:"\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba 2024-07-10 \u110b\u1169\u1112\u116e 8 09 39"})}),"\n",(0,r.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"Prefers Color Scheme - MDN"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7800);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ee,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var r=n(1986),i=n(7800);n(4041);function o(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(e);i*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,i.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,i.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(i.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,r.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:i.Children.only(a)}))}));function f(){const[e,t]=(0,i.useState)(!1);return(0,i.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,r.jsx)(r.Fragment,{}),children:t})=>f()?(0,r.jsx)(r.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",C=h?h.toStringTag:void 0;var E="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,R=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var r=!0}catch(e){}var i=y.call(e);return r&&(t?e[x]=n:delete e[x]),i}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||R.test(e)?M(e.slice(2),n?2:8):_.test(e)?P:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var r,i,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=r,o=i;return r=i=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&r?b(e):(r=i=void 0,a)}function h(){var e=L(),n=w(e);if(r=arguments,i=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,r=c=i=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function X(e,t,n,r){return new(n||(n=Promise))((function(t,i){function o(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var r;e.done?t(e.value):(r=e.value,r instanceof n?r:new n((function(e){e(r)}))).then(o,a)}s((r=r.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,r)=>{e.toBlob((e=>{e?n(e):r(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;for(const o of r)if(!i.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const r=[...e],i=[...t];return G(r,i,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[r,i]of e)if(!t.has(r)||!J(i,t.get(r),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,i.useRef)(e);return t.current=e,(0,i.useCallback)(((...e)=>t.current(...e)),[])}function re(e){const t=ne(e);(0,i.useEffect)((()=>()=>t()),[t])}function ie(e,t=K){const[n,r]=(0,i.useState)(e),o=ne(t);return(0,i.useEffect)((()=>{o(n,e)||r(e)}),[o,n,e]),n}function oe(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>q(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:r})=>{const o=i.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,r);return(0,i.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:r=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,i.useRef)(0),l=(0,i.useRef)(!1),u=(0,i.useRef)(null),d=ne((([i],o)=>{if(!n||!i)return;const a=i.target;i.isIntersecting?(l.current=!0,c.current+=1,e(i)):l.current&&(l.current=!1,c.current+=1,t(i)),r&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,i.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,i.forwardRef)(((e,t)=>{var{src:n,threshold:i,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:i,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,r.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,i.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,i.useState)(!1),p=!b,m=(0,i.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,i.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,i.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,r.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,r.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,r.jsx)(i.Fragment,{children:o?t:n})},fe=(0,i.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:i,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,r.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,i.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(r=e)&&r.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var r}),[t]);return(0,r.jsx)(r.Fragment,{children:e.map(((e,t)=>(0,r.jsx)(i.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,i.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,i.useRef)(null),n=ne(e);return(0,i.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",r=({target:e})=>{const r=t.current;r&&!r.contains(e)&&n(r)};return document.addEventListener(e,r),()=>{document.removeEventListener(e,r)}}),[n]),{ref:t}}(s);return(0,r.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?i.useLayoutEffect:i.useEffect;(0,i.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,i.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,r.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,r.jsxs)(r.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,r.jsx)(i.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,r.jsx)(i.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,i.useState)(!1),n=(0,i.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,i.useState)(null),[n,r]=(0,i.useState)(null);return{copiedData:e,readData:n,copyText:(0,i.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,i.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var r;const i=null!==(r=null==n?void 0:n.toText)&&void 0!==r&&r;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const r=yield function(e,t="png"){return new Promise(((n,r)=>{const i=new Image;i.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=i.width,e.height=i.height;try{const r=e.getContext("2d");if(!r)throw new Error("Failed to get 2d context");r.drawImage(i,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),r(e)}})),i.onerror=()=>{r(new Error("Failed to load image"))},i.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[r.type]:r})]),r}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:i});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[]),readContents:(0,i.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return r(e),!0}catch(e){return r(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,i.useState)(e),r=(0,i.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,i.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,i.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:r,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[r,o]=(0,i.useState)(t),a=(0,i.useMemo)((()=>rr>0),[r]),c=(0,i.useCallback)(((t,n)=>{const i=Z(t)?t(r):t;if(i>=0&&i<=e)return n&&n({prev:r,next:i}),void o(t);throw new Error("Step not valid")}),[r,e]),l=(0,i.useCallback)(((t,n)=>{const i="nextStep"===t;return n?i?0:e:i?r+1:r-1}),[e,r]),u=(0,i.useCallback)(((e,t)=>{if(!n)return;const i=l(e,!0);t&&t({prev:r,next:i}),o(i)}),[n,r,l]),d=(0,i.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:r,next:n}),o(n)}),[r,l]),f=(0,i.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,i.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,i.useCallback)((e=>{e&&e({prev:r,next:t}),o(t)}),[r,t]);return{currentStep:r,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:r,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,i.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:r,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[r,o]=(0,i.useState)(e);return[r,oe(o,t,n)]}function Ce(e,t={}){const[n,r]=(0,i.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,i.useCallback)((e=>{const{value:t}=e.target;r(t),a(t)}),[a]),onReset:(0,i.useCallback)((()=>{r(""),a("")}),[a])}}function Ee(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,r]=(0,i.useState)(!1),o=(0,i.useRef)(null),a=ne((t=>{r(!0),e(t)})),s=ne((e=>{r(!1),t(e)}));return(0,i.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=window.setInterval(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Pe="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}}},Ie=e=>_e[e],Re=Ie("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Me(t),i=n?te(n):r,o=Z(e)?e(i):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,r]=(0,i.useState)($e(e,t));return(0,i.useEffect)((()=>{const t=window.matchMedia(e),n=e=>r(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,i.useRef)(null),[t,n]=(0,i.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,r=a-t.top,i=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=r,u.elementPositionX=i,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:r,screenY:i,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const r=n=>(t(n),e()),i=t=>(n(t),e());return window.addEventListener("online",r),window.addEventListener("offline",i),()=>{window.removeEventListener("online",r),window.removeEventListener("offline",i)}})(n,e,t)));return{isOnline:(0,i.useSyncExternalStore)(n,qe,Ue)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,i.useRef)(e);return(0,i.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,i.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),r=(0,i.useRef)(null),o=ne(e),a=(0,i.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,i.useEffect)((()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:r,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,i.useRef)(null),n=(0,i.useRef)(null),r=(0,i.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,i.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&r(),()=>o())),[e,r,o]),{ref:t,lock:r,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const r=t.getBoundingClientRect(),{offsetX:i=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:r.top+window.scrollY+o+We(window.innerHeight,r.height,a),left:r.left+window.scrollX+i+We(window.innerWidth,r.width,s)};const c=e.getBoundingClientRect();return{top:r.top-c.top+e.scrollTop+o+We(c.height,r.height,a),left:r.left-c.left+e.scrollLeft+i+We(c.width,r.width,s)}};function Ge(){const e=(0,i.useRef)(null),t=(0,i.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:r=0,behavior:i="auto"}=t;e.current.scrollTo({left:n,top:r,behavior:i})}),[]),n=(0,i.useCallback)(((t,n={})=>{if(!t||!e.current)return;const r=e.current,{behavior:i="auto"}=n,{left:o,top:a}=He(r,t,n);r.scrollTo({top:a,left:o,behavior:i})}),[]);return(0,i.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,r=ie(Z(n)?n():n),o=(0,i.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(r)));return{state:(0,i.useMemo)((()=>o?te(o):r),[o,r]),setState:(0,i.useCallback)((e=>{try{const n=Ke(t),i=n?te(n):r,o=Z(e)?e(i):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,r]),removeState:(0,i.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=ie(e.storageOptions),r=ie(t),[o,a]=(0,i.useState)(r),s=(0,i.useCallback)((e=>{a((t=>{const r=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const r=window[e],i=Z(n)?n():n;r.setItem(t,JSON.stringify(i))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,r)}return r}))}),[n]),c=(0,i.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const r=ne(e),o=ie(n),a=(0,i.useMemo)((()=>function(e,t,n){var r=!0,i=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(r="leading"in n?!!n.leading:r,i="trailing"in n?!!n.trailing:i),q(e,t,{leading:r,maxWait:t,trailing:i})}(r,t,o)),[r,t,o]);return re((()=>a.cancel())),a}function nt(e,t){const n=(0,i.useRef)(),r=ne(e),o=ie(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,i.useCallback)((()=>{n.current=setTimeout(r,a)}),[r,a]),l=(0,i.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,i.useCallback)((()=>{l(),c()}),[l,c]);return(0,i.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var rt={exports:{}};!function(e,t){!function(n,r){var i="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",C="Browser",E="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",_="Microsoft",I="Motorola",R="Opera",M="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==i?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==i||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):r:this[c[0]]=u?c[1].call(this,u,c[2]):r:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):r):this[c]=u||r;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var i=0;i2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=r,e[b]=r,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(rt,rt.exports);var it=rt.exports;function ot(){const[e,t]=(0,i.useState)(null);return pe((()=>{const e=new it.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[r,o]=(0,i.useState)({width:null,height:null}),a=(0,i.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,i.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),r}}}]); \ No newline at end of file diff --git a/assets/js/ad8813a3.1783b7c3.js b/assets/js/ad8813a3.1783b7c3.js deleted file mode 100644 index 19d297747..000000000 --- a/assets/js/ad8813a3.1783b7c3.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see ad8813a3.1783b7c3.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1874],{7168:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useUserAgent",c={id:"react/hooks/useUserAgent",title:"useUserAgent",description:"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useUserAgent.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useUserAgent",permalink:"/modern-kit/docs/react/hooks/useUserAgent",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useUnMount",permalink:"/modern-kit/docs/react/hooks/useUnmount"},next:{title:"useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty"}},l={},u=()=>{const e={div:"div",h3:"h3",p:"p",...(0,r.a)()},t=(0,o.FS)();return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"UserAgent String"}),(0,i.jsx)(e.p,{children:`${t?.ua}`})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Browser"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.browser.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.browser.version}`]}),(0,i.jsxs)(e.p,{children:["major: ",`${t?.browser.major}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Engine"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.engine.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.engine.version}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"OS"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.os.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.os.version}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Device"}),(0,i.jsxs)(e.p,{children:["vendor: ",`${t?.device.vendor}`]}),(0,i.jsxs)(e.p,{children:["model: ",`${t?.device.model}`]}),(0,i.jsxs)(e.p,{children:["type: ",`${t?.device.type}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"CPU"}),(0,i.jsxs)(e.p,{children:["architecture: ",`${t?.cpu.architecture}`]})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useuseragent",children:"useUserAgent"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://github.com/faisalman/ua-parser-js",children:"ua-parser-js"})})," \ub97c \ud65c\uc6a9\ud574\uc11c ",(0,i.jsx)(t.code,{children:"window.navigator.userAgent"})," \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useUserAgent/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useUserAgent: () => UAParser.IResult | null\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useUserAgent } from '@modern-kit/react';\n\nconst Example = () => {\n const userAgent = useUserAgent();\n\n return (\n
\n
\n

UserAgent String

\n

ua: {`${userAgent?.ua}`}

\n
\n
\n

Browser

\n

name: {`${userAgent?.browser.name}`}

\n

version: {`${userAgent?.browser.version}`}

\n

major: {`${userAgent?.browser.major}`}

\n
\n
\n

Engine

\n

name: {`${userAgent?.engine.name}`}

\n

version: {`${userAgent?.engine.version}`}

\n
\n
\n

OS

\n

name: {`${userAgent?.os.name}`}

\n

version: {`${userAgent?.os.version}`}

\n
\n
\n

Device

\n

vendor: {`${userAgent?.device.vendor}`}

\n

model: {`${userAgent?.device.model}`}

\n

type: {`${userAgent?.device.type}`}

\n
\n
\n

CPU

\n

architecture: {`${userAgent?.cpu.architecture}`}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>je,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Pe,a9:()=>ue,ac:()=>Le,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ue,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function A(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var $=NaN,N=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return $;if(A(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=A(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):N.test(e)?$:+e}var P=function(){return m.Date.now()},z="Expected a function",L=Math.max,U=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(z);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=P();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?U(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=P(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,A(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(P())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ae="modern-kit-local-storage",$e="modern-kit-session-storage",Ne={localStorage:{key:Ae,subscribe:e=>{window.addEventListener(Ae,e)},unsubscribe:e=>{window.removeEventListener(Ae,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ae))}},sessionStorage:{key:$e,subscribe:e=>{window.addEventListener($e,e)},unsubscribe:e=>{window.removeEventListener($e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent($e))}}},_e=e=>Ne[e],Re=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Me=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Pe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Me,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ie(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const ze=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Le(e,t){const[n,i]=(0,r.useState)(ze(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ue(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,qe)}}function Xe(){return Le("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return A(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",O="Firefox",T="Google",A="Huawei",$="LG",N="Microsoft",_="Motorola",R="Opera",I="Samsung",M="Sharp",P="Sony",z="Xiaomi",L="Zebra",U="Facebook",F="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/ad8813a3.dd0c866a.js b/assets/js/ad8813a3.dd0c866a.js new file mode 100644 index 000000000..a5ec1e67b --- /dev/null +++ b/assets/js/ad8813a3.dd0c866a.js @@ -0,0 +1,2 @@ +/*! For license information please see ad8813a3.dd0c866a.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1874],{7168:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>w,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useUserAgent",c={id:"react/hooks/useUserAgent",title:"useUserAgent",description:"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useUserAgent.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useUserAgent",permalink:"/modern-kit/docs/react/hooks/useUserAgent",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useUnMount",permalink:"/modern-kit/docs/react/hooks/useUnmount"},next:{title:"useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty"}},l={},u=()=>{const e={div:"div",h3:"h3",p:"p",...(0,r.a)()},t=(0,o.FS)();return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"UserAgent String"}),(0,i.jsx)(e.p,{children:`${t?.ua}`})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Browser"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.browser.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.browser.version}`]}),(0,i.jsxs)(e.p,{children:["major: ",`${t?.browser.major}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Engine"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.engine.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.engine.version}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"OS"}),(0,i.jsxs)(e.p,{children:["name: ",`${t?.os.name}`]}),(0,i.jsxs)(e.p,{children:["version: ",`${t?.os.version}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"Device"}),(0,i.jsxs)(e.p,{children:["vendor: ",`${t?.device.vendor}`]}),(0,i.jsxs)(e.p,{children:["model: ",`${t?.device.model}`]}),(0,i.jsxs)(e.p,{children:["type: ",`${t?.device.type}`]})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.h3,{children:"CPU"}),(0,i.jsxs)(e.p,{children:["architecture: ",`${t?.cpu.architecture}`]})]})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useuseragent",children:"useUserAgent"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://github.com/faisalman/ua-parser-js",children:"ua-parser-js"})})," \ub97c \ud65c\uc6a9\ud574\uc11c ",(0,i.jsx)(t.code,{children:"window.navigator.userAgent"})," \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useUserAgent/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useUserAgent: () => UAParser.IResult | null\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useUserAgent } from '@modern-kit/react';\n\nconst Example = () => {\n const userAgent = useUserAgent();\n\n return (\n
\n
\n

UserAgent String

\n

ua: {`${userAgent?.ua}`}

\n
\n
\n

Browser

\n

name: {`${userAgent?.browser.name}`}

\n

version: {`${userAgent?.browser.version}`}

\n

major: {`${userAgent?.browser.major}`}

\n
\n
\n

Engine

\n

name: {`${userAgent?.engine.name}`}

\n

version: {`${userAgent?.engine.version}`}

\n
\n
\n

OS

\n

name: {`${userAgent?.os.name}`}

\n

version: {`${userAgent?.os.version}`}

\n
\n
\n

Device

\n

vendor: {`${userAgent?.device.vendor}`}

\n

model: {`${userAgent?.device.model}`}

\n

type: {`${userAgent?.device.type}`}

\n
\n
\n

CPU

\n

architecture: {`${userAgent?.cpu.architecture}`}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>we,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ae,Xs:()=>nt,Yz:()=>$e,_:()=>Ue,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>w,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const w=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=b||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=m?m.toStringTag:void 0;var C="[object Symbol]",O=/\s/,T=/^\s+/;function A(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var $=NaN,N=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return $;if(A(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=A(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):N.test(e)?$:+e}var P=function(){return h.Date.now()},z="Expected a function",U=Math.max,L=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(z);function w(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=P();if(b(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function h(e){return s=void 0,f&&i?w(e):(i=r=void 0,a)}function m(){var e=P(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?w(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),w(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,A(n)&&(u=!!n.leading,o=(d="maxWait"in n)?U(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h(P())},m}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[w,b]=(0,r.useState)(!1),p=!w,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const we=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},be=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);be((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(we,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),w=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:w,resetStep:b}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){be((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ae({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function $e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Ue(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ve)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return be((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return A(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",w="version",b="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",O="Firefox",T="Google",A="Huawei",$="LG",N="Microsoft",_="Motorola",R="Opera",I="Samsung",M="Sharp",P="Sony",z="Xiaomi",U="Zebra",L="Facebook",F="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,w,c]),J.CPU=B([b]),J.DEVICE=B([l,f,d,p,h,v,m,g,y]),J.ENGINE=J.OS=B([u,w]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return be((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){be((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.cd09f239.js.LICENSE.txt b/assets/js/ad8813a3.dd0c866a.js.LICENSE.txt similarity index 100% rename from assets/js/b3bf5b56.cd09f239.js.LICENSE.txt rename to assets/js/ad8813a3.dd0c866a.js.LICENSE.txt diff --git a/assets/js/b35b1276.07977922.js b/assets/js/b35b1276.07977922.js new file mode 100644 index 000000000..4a9af7984 --- /dev/null +++ b/assets/js/b35b1276.07977922.js @@ -0,0 +1,2 @@ +/*! For license information please see b35b1276.07977922.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1813],{8288:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="When",l={id:"react/components/When",title:"When",description:"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/When.mdx",sourceDirName:"react/components",slug:"/react/components/When",permalink:"/modern-kit/docs/react/components/When",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SwitchCase",permalink:"/modern-kit/docs/react/components/SwithCase"},next:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"}},u={},d=()=>{const e={button:"button",h1:"h1",p:"p",...(0,r.a)()},[t,n]=(0,o.useState)(!1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,i.jsx)(a.nA,{condition:t,fallback:(0,i.jsx)(e.p,{children:"Fallback"}),children:(0,i.jsx)(e.h1,{children:"Render"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"when",children:"When"})}),"\n",(0,i.jsxs)(t.p,{children:["condition prop\uc774 ",(0,i.jsx)(t.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,i.jsx)(t.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["condition prop\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/When/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface WhenProps {\n condition: Condition;\n fallback?: React.ReactNode;\n}\n\nconst When: ({\n children,\n condition,\n fallback,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { When } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n Fallback

}>\n

Render

\n \n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>De,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ve,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Re,_:()=>Fe,a9:()=>ue,ac:()=>We,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Te,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):_.test(e)?R:+e}var A=function(){return m.Date.now()},$="Expected a function",F=Math.max,L=Math.min;function W(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?F(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function D(e){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>W(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Re(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Pe={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Me=e=>Pe[e],ze=Me("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Fe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function We(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ue)}}function Ye(){return We("(prefers-color-scheme: dark)")?"dark":"light"}function De(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),W(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",A="Sony",$="Xiaomi",F="Zebra",L="Facebook",W="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,W).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/b862475b.7d16a997.js.LICENSE.txt b/assets/js/b35b1276.07977922.js.LICENSE.txt similarity index 100% rename from assets/js/b862475b.7d16a997.js.LICENSE.txt rename to assets/js/b35b1276.07977922.js.LICENSE.txt diff --git a/assets/js/b35b1276.d747ea76.js b/assets/js/b35b1276.d747ea76.js deleted file mode 100644 index df0fc6c11..000000000 --- a/assets/js/b35b1276.d747ea76.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see b35b1276.d747ea76.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1813],{8288:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="When",l={id:"react/components/When",title:"When",description:"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/When.mdx",sourceDirName:"react/components",slug:"/react/components/When",permalink:"/modern-kit/docs/react/components/When",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SwitchCase",permalink:"/modern-kit/docs/react/components/SwithCase"},next:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"}},u={},d=()=>{const e={button:"button",h1:"h1",p:"p",...(0,r.a)()},[t,n]=(0,o.useState)(!1);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"Toggle Button"}),(0,i.jsx)(a.nA,{condition:t,fallback:(0,i.jsx)(e.p,{children:"Fallback"}),children:(0,i.jsx)(e.h1,{children:"Render"})})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"when",children:"When"})}),"\n",(0,i.jsxs)(t.p,{children:["condition prop\uc774 ",(0,i.jsx)(t.code,{children:"true"}),"\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, ",(0,i.jsx)(t.code,{children:"false"}),"\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["condition prop\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218"}),"\ub3c4 \ud5c8\uc6a9\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/When/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Condition = boolean | (() => boolean);\n\ninterface WhenProps {\n condition: Condition;\n fallback?: React.ReactNode;\n}\n\nconst When: ({\n children,\n condition,\n fallback,\n}: PropsWithChildren) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { When } from '@modern-kit/react';\n\nconst Example = () => {\n const [state, setState] = useState(false);\n\n return (\n <>\n \n\n Fallback

}>\n

Render

\n \n \n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ue,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=I.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):_.test(e)?R:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var W="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function D(e){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return D(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield D(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Pe=Ie("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,We=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,We)}}function Be(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const De=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+De(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+De(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+De(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+De(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(W);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",R="LG",_="Microsoft",I="Motorola",P="Opera",M="Samsung",z="Sharp",L="Sony",A="Xiaomi",$="Zebra",F="Facebook",q="Chromium OS",W="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},D=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,Y.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,W)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/b3bf5b56.603d4157.js b/assets/js/b3bf5b56.603d4157.js new file mode 100644 index 000000000..9611615ef --- /dev/null +++ b/assets/js/b3bf5b56.603d4157.js @@ -0,0 +1,2 @@ +/*! For license information please see b3bf5b56.603d4157.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1175],{1285:(e,t,n)=>{n.r(t),n.d(t,{DebounceExample:()=>b,DefaultExample:()=>w,assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>c,metadata:()=>u,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800),s=n(5549);const c={},l="useWindowSize",u={id:"react/hooks/useWindowSize",title:"useWindowSize",description:"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useWindowSize.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange"},next:{title:"chunk",permalink:"/modern-kit/docs/utils/array/chunk"}},d={},w=()=>{const e={br:"br",div:"div",...(0,r.a)()},t=(0,o.iP)(),n=(0,a.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,i.jsx)(e.br,{}),"width: ",t.width,"px ",(0,i.jsx)(e.br,{}),"height: ",t.height,"px"]})},b=()=>{const e={br:"br",div:"div",...(0,r.a)()},t=(0,o.iP)({debounceWait:300}),n=(0,a.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,i.jsx)(e.br,{}),"width: ",t.width,"px ",(0,i.jsx)(e.br,{}),"height: ",t.height,"px"]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usewindowsize",children:"useWindowSize"})}),"\n",(0,i.jsxs)(t.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,i.jsx)(t.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useWindowSize/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface WindowSize {\n width: number | null;\n height: number | null;\n}\n\ninterface useWindowSizeProps {\n debounceWait?: number; // debounce delay time, default: 300\n}\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useWindowSize({ debounceWait }: useWindowSizeProps = {}): WindowSize\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(s.Z,{children:()=>(0,i.jsx)(w,{})}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"debounce",children:"Debounce"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ debounceWait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(s.Z,{children:()=>(0,i.jsx)(b,{})}),"\n",(0,i.jsx)("br",{})]})}function h(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},5549:(e,t,n)=>{n.d(t,{Z:()=>o});n(7800);var i=n(4798),r=n(1986);function o(e){let{children:t,fallback:n}=e;return(0,i.Z)()?(0,r.jsx)(r.Fragment,{children:t?.()}):n??null}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>Ye,FS:()=>ct,GN:()=>Ce,Hk:()=>ye,KS:()=>ot,LN:()=>Ue,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ze,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>We,cM:()=>lt,df:()=>we,fB:()=>rt,g4:()=>je,iP:()=>dt,ii:()=>Xe,jr:()=>ze,my:()=>me,nA:()=>ve,oM:()=>d,oz:()=>Ve,qQ:()=>Ke,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function w(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>w()?(0,i.jsx)(i.Fragment,{children:t}):e;var f="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=f||p||Function("return this")(),m=h.Symbol,g=Object.prototype,v=g.hasOwnProperty,y=g.toString,x=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",j="[object Undefined]",E=m?m.toStringTag:void 0;var C="[object Symbol]",O=/\s/,z=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?j:S:E&&E in Object(e)?function(e){var t=v.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(z,""):e}(e);var n=R.test(e);return n||M.test(e)?I(e.slice(2),n?2:8):_.test(e)?N:+e}var A=function(){return h.Date.now()},$="Expected a function",L=Math.max,F=Math.min;function W(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,w=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(f(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function h(e){return s=void 0,w&&i?b(e):(i=r=void 0,a)}function m(){var e=A(),n=f(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(P(n.maxWait)||0,t):o,w="trailing"in n?!!n.trailing:w),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h(A())},m}var q="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},D=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function V(){return!U()}function Y(e){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const Z=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(K(e)&&K(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return Z(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return Z(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function K(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>W(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{K(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),w=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:w,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,w=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,f]=(0,r.useState)(!1),p=!b,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),f(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:g},w))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},we=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:w}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,w)},d,{children:e.children}))}));we.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},fe=V()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);fe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield D(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function je({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=K(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),w=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:w,goToPrevStep:b,resetStep:f}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=je({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function ze(e,{preserveTitleOnUnmount:t=!1}={}){fe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>Me[e],Pe=Ie("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=K(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function We(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,w=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,w=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:w})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,De=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,De)}}function Ve(){return We("(prefers-color-scheme: dark)")?"dark":"light"}function Ye(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ze({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return fe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Ke(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(K(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=K(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=K(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=K(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},je(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),W(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",w="vendor",b="version",f="architecture",p="console",h="mobile",m="tablet",g="smarttv",v="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",j="BlackBerry",E="Browser",C="Chrome",O="Firefox",z="Google",T="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",I="Samsung",P="Sharp",A="Sony",$="Xiaomi",L="Zebra",F="Facebook",W="Chromium OS",q="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,V.call(e,g,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,V.call(e,g,y.os),x&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,W).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(g),this};G.VERSION="1.0.38",G.BROWSER=X([u,b,c]),G.CPU=X([f]),G.DEVICE=X([l,w,d,p,h,g,m,v,y]),G.ENGINE=G.OS=X([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var K=new G;J.ua=K.getResult(),J.ua.get=function(){return K.getUA()},J.ua.set=function(e){K.setUA(e);var t=K.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return fe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){fe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>U()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.21251afa.js.LICENSE.txt b/assets/js/b3bf5b56.603d4157.js.LICENSE.txt similarity index 100% rename from assets/js/bf0dbc92.21251afa.js.LICENSE.txt rename to assets/js/b3bf5b56.603d4157.js.LICENSE.txt diff --git a/assets/js/b3bf5b56.cd09f239.js b/assets/js/b3bf5b56.cd09f239.js deleted file mode 100644 index cc3168033..000000000 --- a/assets/js/b3bf5b56.cd09f239.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see b3bf5b56.cd09f239.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1175],{1285:(e,t,n)=>{n.r(t),n.d(t,{DebounceExample:()=>b,DefaultExample:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useWindowSize",l={id:"react/hooks/useWindowSize",title:"useWindowSize",description:"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useWindowSize.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useWindowSize",permalink:"/modern-kit/docs/react/hooks/useWindowSize",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange"},next:{title:"chunk",permalink:"/modern-kit/docs/utils/array/chunk"}},u={},d=()=>{const e={br:"br",div:"div",...(0,r.a)()},t=(0,o.iP)(),n=(0,a.useMemo)((()=>({width:"100%",background:"#439966",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,i.jsx)(e.br,{}),"width: ",t.width,"px ",(0,i.jsx)(e.br,{}),"height: ",t.height,"px"]})},b=()=>{const e={br:"br",div:"div",...(0,r.a)()},t=(0,o.iP)({isDebounce:!0,wait:300}),n=(0,a.useMemo)((()=>({width:"100%",background:"#0067A3",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsxs)(e.div,{style:n,children:["\ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694. ",(0,i.jsx)(e.br,{}),"width: ",t.width,"px ",(0,i.jsx)(e.br,{}),"height: ",t.height,"px"]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Default",id:"default",level:3},{value:"Debounce",id:"debounce",level:3}];function w(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usewindowsize",children:"useWindowSize"})}),"\n",(0,i.jsxs)(t.p,{children:["\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c ",(0,i.jsx)(t.code,{children:"debounce"})," \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useWindowSize/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Nullable = T | null;\n\ninterface WindowSize {\n width: Nullable;\n height: Nullable;\n}\n\ninterface useWindowSizeProps {\n isDebounce?: boolean; // debounce options, default: false\n wait?: number; // debounce delay time, default: 300\n}\n\nconst useWindowSize: (options?: useWindowSizeProps) => WindowSize\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.h3,{id:"default",children:"Default"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst Example = () => {\n const windowSize = useWindowSize();\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#439966', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h3,{id:"debounce",children:"Debounce"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useWindowSize } from '@modern-kit/react';\n\nconst DebounceExample = () => {\n const windowSize = useWindowSize({ isDebounce: true, wait: 300 });\n const boxStyle = useMemo(() => {\n return {\n width: '100%', \n background: '#0067A3', \n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n \ube0c\ub77c\uc6b0\uc800 \ud06c\uae30\ub97c \uc904\uc5ec\ubcf4\uc138\uc694.
\n width: {windowSize.width}px
\n height: {windowSize.height}px\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(b,{}),"\n",(0,i.jsx)("br",{})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>De,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ve,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>ze,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ue,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",O=/\s/,z=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,M=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function P(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(z,""):e}(e);var n=M.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):_.test(e)?N:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,F=Math.min;function W(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=P(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(P(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var q="Expected a function";function D(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function U(){return"undefined"==typeof window}function V(){return!U()}function Y(e){return D(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>D(void 0,0,void 0,(function*(){const t=yield fetch(e);return Y(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>W(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(U())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=V()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield Y(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return D(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>D(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return D(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return D(this,0,void 0,(function*(){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function ze(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Me=e=>_e[e],Re=Me("localStorage"),Ie=e=>window.localStorage.getItem(e),Pe=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Pe,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ie(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>V()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const We=()=>navigator.onLine,qe=()=>!0;function De({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,We,qe)}}function Xe(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ue(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ve({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ye=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ye(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ye(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ye(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ye(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Me("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!V())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),W(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",O="Firefox",z="Google",T="Huawei",N="LG",_="Microsoft",M="Motorola",R="Opera",I="Samsung",P="Sharp",L="Sony",A="Xiaomi",$="Zebra",F="Facebook",W="Chromium OS",q="Mac OS",D=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},Y=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,V.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,V.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,W).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?U(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=D([u,f,c]),J.CPU=D([w]),J.DEVICE=D([l,b,d,p,m,v,h,g,y]),J.ENGINE=J.OS=D([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/b862475b.01c17ab8.js b/assets/js/b862475b.01c17ab8.js new file mode 100644 index 000000000..a093031f8 --- /dev/null +++ b/assets/js/b862475b.01c17ab8.js @@ -0,0 +1,2 @@ +/*! For license information please see b862475b.01c17ab8.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[811],{3755:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>b,assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>u,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s=n.p+"assets/images/react-ae427fdb9d33efc24fa0dec698c3dfab.png",c={},l="useClipboard",u={id:"react/hooks/useClipboard",title:"useClipboard",description:"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useClipboard.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick"},next:{title:"useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter"}},d={},b=()=>{const e={br:"br",button:"button",div:"div",img:"img",input:"input",...(0,r.a)()},{copiedData:t,readData:n,copyText:c,copyImage:l,readContents:u,readText:d}=(0,o.VP)(),[b,f]=(0,a.useState)("");return(0,a.useEffect)((()=>{console.log("copiedData: ",t),console.log("readData: ",n)}),[t,n]),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.input,{type:"text",value:b,onChange:e=>f(e.target.value)}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await c(b);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud14d\uc2a4\ud2b8 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,i.jsx)(e.br,{}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.img,{src:s,alt:"\uc774\ubbf8\uc9c0",width:120,height:120}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await l(s);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\uc774\ubbf8\uc9c0 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,i.jsx)(e.br,{}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:async()=>{const e=await d(b);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ud14d\uc2a4\ud2b8 \uc77d\uae30"}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await u(s);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ucee8\ud150\uce20 \uc77d\uae30"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function w(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useclipboard",children:"useClipboard"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"\ud074\ub9bd\ubcf4\ub4dc"}),"\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub41c \ub370\uc774\ud130\ub294 ",(0,i.jsx)(t.code,{children:"copiedData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"copyText"}),"\uc640 ",(0,i.jsx)(t.code,{children:"copyImage"}),"\ub294 ",(0,i.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"copyText"}),"\ub294 \uc8fc\uc5b4\uc9c4 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"copyImage"}),"\ub294 \uc8fc\uc5b4\uc9c4 \uc774\ubbf8\uc9c0 URL\uc744 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0\uc11c \uc77d\uc5b4\uc628 \ub370\uc774\ud130\ub294 ",(0,i.jsx)(t.code,{children:"readData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"readText"}),"\uc640 ",(0,i.jsx)(t.code,{children:"readContents"}),"\ub294 ",(0,i.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"readText"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"readContents"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useClipboard/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useClipboard(): {\n copiedData: string | Blob | null;\n readData: string | ClipboardItems | null;\n readText: () => Promise;\n readContents: () => Promise;\n copyText: (value: string) => Promise;\n copyImage: (src: string, options?: { toText: boolean }) => Promise;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useClipboard } from \'@modern-kit/react\';\nimport img from \'../../assets/img.png\';\n\nconst Example = () => {\n const { copiedData, readData, copyText, copyImage, readContents, readText } = useClipboard();\n const [text, setText] = useState(\'\');\n\n const handleCopyText = async () => {\n const isSuccess = await copyText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleCopyImage = async () => {\n const isSuccess = await copyImage(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadText = async () => {\n const isSuccess = await readText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadContents = async () => {\n const isSuccess = await readContents(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n useEffect(() => {\n console.log("copiedData: ", copiedData);\n console.log("readData: ", readData);\n }, [copiedData, readData])\n\n return (\n
\n
\n setText(e.target.value)}\n />\n \n
\n
\n
\n \uc774\ubbf8\uc9c0\n \n
\n
\n
\n \n \n
\n
\n );\n};\n'})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(b,{})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>xe,KS:()=>ot,LN:()=>Ve,Mm:()=>ye,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>De,cM:()=>lt,df:()=>be,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>qe,jr:()=>Oe,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>Ye,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Te,z$:()=>je});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,x=g.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",j=h?h.toStringTag:void 0;var E="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function $(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:j&&j in Object(e)?function(e){var t=v.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?I:+e}var z=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=z();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=z(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),f(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=$(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L($(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var B="Expected a function";function q(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>q(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,w]=(0,r.useState)(!1),p=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),g=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=Y()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ye(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>q(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return q(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:w}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Pe={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Me=e=>Pe[e],$e=Me("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>($e.subscribe(e),()=>{$e.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),$e.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),$e.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function De(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Be={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function qe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Be),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ue=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ue)}}function Ye(){return De("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(B);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",w="architecture",p="console",m="mobile",h="tablet",g="smarttv",v="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",C="BlackBerry",j="Browser",E="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",$="Sharp",z="Sony",A="Xiaomi",L="Zebra",F="Facebook",D="Chromium OS",B="Mac OS",q=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,g,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,g,x.os),y&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,D).replace(/macos/i,B)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=q([u,f,c]),J.CPU=q([w]),J.DEVICE=q([l,b,d,p,m,g,h,v,x]),J.ENGINE=J.OS=q([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>V()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/c55c9b0f.0c21420b.js.LICENSE.txt b/assets/js/b862475b.01c17ab8.js.LICENSE.txt similarity index 100% rename from assets/js/c55c9b0f.0c21420b.js.LICENSE.txt rename to assets/js/b862475b.01c17ab8.js.LICENSE.txt diff --git a/assets/js/b862475b.7d16a997.js b/assets/js/b862475b.7d16a997.js deleted file mode 100644 index 0c92d5051..000000000 --- a/assets/js/b862475b.7d16a997.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see b862475b.7d16a997.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[811],{3755:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>b,assets:()=>d,contentTitle:()=>l,default:()=>w,frontMatter:()=>c,metadata:()=>u,toc:()=>f});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s=n.p+"assets/images/react-ae427fdb9d33efc24fa0dec698c3dfab.png",c={},l="useClipboard",u={id:"react/hooks/useClipboard",title:"useClipboard",description:"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useClipboard.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick"},next:{title:"useCounter",permalink:"/modern-kit/docs/react/hooks/useCounter"}},d={},b=()=>{const e={br:"br",button:"button",div:"div",img:"img",input:"input",...(0,r.a)()},{copiedData:t,readData:n,copyText:c,copyImage:l,readContents:u,readText:d}=(0,o.VP)(),[b,f]=(0,a.useState)("");return(0,a.useEffect)((()=>{console.log("copiedData: ",t),console.log("readData: ",n)}),[t,n]),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.input,{type:"text",value:b,onChange:e=>f(e.target.value)}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await c(b);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud14d\uc2a4\ud2b8 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,i.jsx)(e.br,{}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.img,{src:s,alt:"\uc774\ubbf8\uc9c0",width:120,height:120}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await l(s);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\uc774\ubbf8\uc9c0 \ud074\ub9bd\ubcf4\ub4dc \ubcf5\uc0ac"})]}),(0,i.jsx)(e.br,{}),(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:async()=>{const e=await d(b);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ud14d\uc2a4\ud2b8 \uc77d\uae30"}),(0,i.jsx)(e.button,{onClick:async()=>{const e=await u(s);alert(`isSuccess: ${e}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`)},children:"\ud074\ub9bd\ubcf4\ub4dc \ucee8\ud150\uce20 \uc77d\uae30"})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function p(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useclipboard",children:"useClipboard"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"\ud074\ub9bd\ubcf4\ub4dc"}),"\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub41c \ub370\uc774\ud130\ub294 ",(0,i.jsx)(t.code,{children:"copiedData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"copyText"}),"\uc640 ",(0,i.jsx)(t.code,{children:"copyImage"}),"\ub294 ",(0,i.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"copyText"}),"\ub294 \uc8fc\uc5b4\uc9c4 \ud14d\uc2a4\ud2b8\ub97c \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"copyImage"}),"\ub294 \uc8fc\uc5b4\uc9c4 \uc774\ubbf8\uc9c0 URL\uc744 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["\ud074\ub9bd\ubcf4\ub4dc\uc5d0\uc11c \uc77d\uc5b4\uc628 \ub370\uc774\ud130\ub294 ",(0,i.jsx)(t.code,{children:"readData"})," \uc0c1\ud0dc\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. ",(0,i.jsx)(t.code,{children:"readText"}),"\uc640 ",(0,i.jsx)(t.code,{children:"readContents"}),"\ub294 ",(0,i.jsx)(t.code,{children:"\uc131\uacf5 \uc5ec\ubd80(Boolean)"}),"\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"readText"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"readContents"}),"\ub294 \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4."]}),"\n"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useClipboard/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useClipboard(): {\n copiedData: string | Blob | null;\n readData: string | ClipboardItems | null;\n readText: () => Promise;\n readContents: () => Promise;\n copyText: (value: string) => Promise;\n copyImage: (src: string, options?: { toText: boolean }) => Promise;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:'import { useClipboard } from \'@modern-kit/react\';\nimport img from \'../../assets/img.png\';\n\nconst Example = () => {\n const { copiedData, readData, copyText, copyImage, readContents, readText } = useClipboard();\n const [text, setText] = useState(\'\');\n\n const handleCopyText = async () => {\n const isSuccess = await copyText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleCopyImage = async () => {\n const isSuccess = await copyImage(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub410\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadText = async () => {\n const isSuccess = await readText(text);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n const handleReadContents = async () => {\n const isSuccess = await readContents(img);\n alert(`isSuccess: ${isSuccess}, \ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc654\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.`);\n };\n\n useEffect(() => {\n console.log("copiedData: ", copiedData);\n console.log("readData: ", readData);\n }, [copiedData, readData])\n\n return (\n
\n
\n setText(e.target.value)}\n />\n \n
\n
\n
\n \uc774\ubbf8\uc9c0\n \n
\n
\n
\n \n \n
\n
\n );\n};\n'})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(b,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>ye,D9:()=>Ue,FS:()=>ot,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>Ye,S1:()=>se,VP:()=>xe,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>ze,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ee,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ve,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function b(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",j=h?h.toStringTag:void 0;var E="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var I=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function $(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:j&&j in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return I;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?I:+e}var z=function(){return m.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function D(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(L);function f(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=r=void 0,a)}function h(){var e=z(),n=p(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=$(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A($(n.maxWait)||0,t):o,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function V(){return"undefined"==typeof window}function Y(){return!V()}function W(e){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>D(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,r.useState)(!1),w=!f,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},be=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const pe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(V())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=Y()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield U(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ye(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),b=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ee(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Ie="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},_e=e=>Re[e],Pe=_e("localStorage"),Me=e=>window.localStorage.getItem(e),$e=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>Y()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)(Le(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const De=()=>navigator.onLine,qe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,De,qe)}}function Xe(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ve(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ye({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!Y())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),D(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",C="BlackBerry",j="Browser",E="Chrome",T="Firefox",O="Google",N="Huawei",I="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",$="Sharp",z="Sony",L="Xiaomi",A="Zebra",F="Facebook",D="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,Y.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,D).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?V(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,f,c]),J.CPU=B([p]),J.DEVICE=B([l,b,d,w,m,v,h,g,x]),J.ENGINE=J.OS=B([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.21251afa.js b/assets/js/bf0dbc92.21251afa.js deleted file mode 100644 index d9dd97a1f..000000000 --- a/assets/js/bf0dbc92.21251afa.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see bf0dbc92.21251afa.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8067],{3284:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="InView",c={id:"react/components/InView",title:"InView",description:"InView\ub294 useIntersectionObserver \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/InView.mdx",sourceDirName:"react/components",slug:"/react/components/InView",permalink:"/modern-kit/docs/react/components/InView",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfElse",permalink:"/modern-kit/docs/react/components/IfElse"},next:{title:"Iterator",permalink:"/modern-kit/docs/react/components/Iterator"}},l={},u=()=>{const e={div:"div",p:"p",...(0,r.a)()},t={width:"100%",color:"white",textAlign:"center",fontSize:"21px",padding:"0 20px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.df,{style:{...t,background:"#c0392B"},onIntersectStart:()=>console.log("action onIntersectStart(1)"),onIntersectEnd:()=>console.log("action onIntersectEnd(1)"),calledOnce:!0,children:(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"Box1"}),(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(e.p,{children:"onIntersectStart\uac00 \ucd5c\ucd08 1\ud68c\ub9cc \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,i.jsx)(e.p,{children:"calledOnce: true"})]})}),(0,i.jsx)(e.div,{style:{height:"300px"}}),(0,i.jsx)(o.df,{style:{...t,background:"#89a5ea"},onIntersectStart:()=>console.log("action onIntersectStart(2)"),onIntersectEnd:()=>console.log("action onIntersectEnd(2)"),children:(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"Box2"}),(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(e.p,{children:"onIntersectStart, onIntersectEnd \ud568\uc218\uac00 \uc5ec\ub7ec \ubc88 \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,i.jsx)(e.p,{children:"calledOnce: false"})]})}),(0,i.jsx)(e.div,{style:{width:"100%",height:"900px",textAlign:"center"}})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"inview",children:"InView"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"InView"}),"\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,i.jsx)(t.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,i.jsx)(t.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"calledOnce"}),"\ub97c \ud65c\uc6a9\ud558\uba74 ",(0,i.jsx)(t.code,{children:"onIntersectStart"}),"\uc640 ",(0,i.jsx)(t.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,i.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InView/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n}\n\ntype InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;\n\nconst InView: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {\n /* action */\n }\n\n const handleIntersectEnd = () => {\n /* action */\n }\n\n return (\n
\n {/* ... */}\n \n Box1\n \n
;\n );\n}; \n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>ye,D9:()=>Xe,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>xe,XI:()=>Ce,Xs:()=>Qe,Yz:()=>Oe,_:()=>Ae,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ve,jr:()=>Ie,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var I="[object Symbol]",C=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==I}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&C.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?N:+e}var A=function(){return m.Date.now()},L="Expected a function",$=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ye(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ce({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],Pe=_e("localStorage"),Me=e=>window.localStorage.getItem(e),ze=e=>(Pe.subscribe(e),()=>{Pe.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Me(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Me(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Pe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Le(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ve(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,qe)}}function Ue(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Xe(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",I="Chrome",C="Firefox",O="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",z="Sharp",A="Sony",L="Xiaomi",$="Zebra",V="Facebook",F="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,x]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/bf0dbc92.dc567cf5.js b/assets/js/bf0dbc92.dc567cf5.js new file mode 100644 index 000000000..15001b817 --- /dev/null +++ b/assets/js/bf0dbc92.dc567cf5.js @@ -0,0 +1,2 @@ +/*! For license information please see bf0dbc92.dc567cf5.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[8067],{3284:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="InView",c={id:"react/components/InView",title:"InView",description:"InView\ub294 useIntersectionObserver \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/InView.mdx",sourceDirName:"react/components",slug:"/react/components/InView",permalink:"/modern-kit/docs/react/components/InView",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"IfElse",permalink:"/modern-kit/docs/react/components/IfElse"},next:{title:"Iterator",permalink:"/modern-kit/docs/react/components/Iterator"}},l={},u=()=>{const e={div:"div",p:"p",...(0,r.a)()},t={width:"100%",color:"white",textAlign:"center",fontSize:"21px",padding:"0 20px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.div,{style:{height:"500px",textAlign:"center",fontSize:"2rem"},children:"\uc2a4\ud06c\ub864 \ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(o.df,{style:{...t,background:"#c0392B"},onIntersectStart:()=>console.log("action onIntersectStart(1)"),onIntersectEnd:()=>console.log("action onIntersectEnd(1)"),calledOnce:!0,children:(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"Box1"}),(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(e.p,{children:"onIntersectStart\uac00 \ucd5c\ucd08 1\ud68c\ub9cc \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,i.jsx)(e.p,{children:"calledOnce: true"})]})}),(0,i.jsx)(e.div,{style:{height:"300px"}}),(0,i.jsx)(o.df,{style:{...t,background:"#89a5ea"},onIntersectStart:()=>console.log("action onIntersectStart(2)"),onIntersectEnd:()=>console.log("action onIntersectEnd(2)"),children:(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"Box2"}),(0,i.jsx)(e.p,{children:"\ube0c\ub77c\uc6b0\uc800 \uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ucf58\uc194\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694."}),(0,i.jsx)(e.p,{children:"onIntersectStart, onIntersectEnd \ud568\uc218\uac00 \uc5ec\ub7ec \ubc88 \ud638\ucd9c\ub429\ub2c8\ub2e4."}),(0,i.jsx)(e.p,{children:"calledOnce: false"})]})}),(0,i.jsx)(e.div,{style:{width:"100%",height:"900px",textAlign:"center"}})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"inview",children:"InView"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"InView"}),"\ub294 ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver",children:"useIntersectionObserver"})})," \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Viewport"}),"\uc5d0 \ub178\ucd9c\ub420 \ub54c(",(0,i.jsx)(t.code,{children:"onIntersectStart"}),") \ud639\uc740 \ub098\uac08 \ub54c(",(0,i.jsx)(t.code,{children:"onIntersectEnd"}),") \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"calledOnce"}),"\ub97c \ud65c\uc6a9\ud558\uba74 ",(0,i.jsx)(t.code,{children:"onIntersectStart"}),"\uc640 ",(0,i.jsx)(t.code,{children:"onIntersectEnd"}),"\ub97c \uac01\uac01 \ud55c\ubc88\uc529 \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["Intersection Observer Option\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.(\ud558\ub2e8 ",(0,i.jsx)(t.code,{children:"Note"})," \ucc38\uace0)"]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/InView/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IntersectionObserverInit {\n root?: Element | Document | null;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\ninterface UseIntersectionObserverProps extends IntersectionObserverInit {\n onIntersectStart?: (entry: IntersectionObserverEntry) => void;\n onIntersectEnd?: (entry: IntersectionObserverEntry) => void;\n calledOnce?: boolean;\n}\n\ntype InViewProps = React.ComponentProps<'div'> & UseIntersectionObserverProps;\n\nconst InView: React.ForwardRefExoticComponent<\n Omit, 'ref'> &\n React.RefAttributes\n>;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { InView } from '@modern-kit/react';\n\nconst Example = () => {\n const handleIntersectStart = () => {\n /* action */\n }\n\n const handleIntersectEnd = () => {\n /* action */\n }\n\n return (\n
\n {/* ... */}\n \n Box1\n \n
;\n );\n}; \n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver",children:"Intersection Observer API"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ie,Hk:()=>xe,KS:()=>ot,LN:()=>Ye,Mm:()=>ye,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Ne,_:()=>Ve,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Ce,z$:()=>je});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var I="[object Symbol]",C=/\s/,O=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,P=/^0o[0-7]+$/i,M=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return k.call(e)}(e)}(e)==I}(e))return N;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&C.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=_.test(e);return n||P.test(e)?M(e.slice(2),n?2:8):R.test(e)?N:+e}var A=function(){return m.Date.now()},$="Expected a function",V=Math.max,L=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?V(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(A())},h}var q="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},X=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ye(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield X(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ie(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ie("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Pe={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Me=e=>Pe[e],ze=Me("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Xe=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Xe)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Me("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",I="Chrome",C="Firefox",O="Google",T="Huawei",N="LG",R="Microsoft",_="Motorola",P="Opera",M="Samsung",z="Sharp",A="Sony",$="Xiaomi",V="Zebra",L="Facebook",F="Chromium OS",q="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,x]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/cb3f6f96.bc263768.js.LICENSE.txt b/assets/js/bf0dbc92.dc567cf5.js.LICENSE.txt similarity index 100% rename from assets/js/cb3f6f96.bc263768.js.LICENSE.txt rename to assets/js/bf0dbc92.dc567cf5.js.LICENSE.txt diff --git a/assets/js/c55bf516.4dacb721.js b/assets/js/c55bf516.90930c0a.js similarity index 60% rename from assets/js/c55bf516.4dacb721.js rename to assets/js/c55bf516.90930c0a.js index be0284de4..b97a185fc 100644 --- a/assets/js/c55bf516.4dacb721.js +++ b/assets/js/c55bf516.90930c0a.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[35],{8697:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>h,frontMatter:()=>a,metadata:()=>r,toc:()=>d});var l=o(1986),t=o(9937);const a={},s="useKeyDown",r={id:"react/hooks/useKeyDown",title:"useKeyDown",description:"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useKeyDown.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useKeyDown",permalink:"/modern-kit/docs/react/hooks/useKeyDown",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIsomorphicLayoutEffect",permalink:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},next:{title:"useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage"}},c={},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"AllKeyDownCallback",id:"allkeydowncallback",level:3},{value:"KeyDownCallbackMap",id:"keydowncallbackmap",level:3},{value:"Note",id:"note",level:2}];function i(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"usekeydown",children:"useKeyDown"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"ref"}),"\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c ",(0,l.jsx)(n.code,{children:"keydown"})," \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc ",(0,l.jsx)(n.code,{children:"keyDownCallbackMap"}),"\ub85c \uc9c0\uc815\ud55c ",(0,l.jsx)(n.code,{children:"key"}),"\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"keyDownCallbackMap"}),"\uc758 key\ub294 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc774 \ub4e4\uc5b4\uac00\uc57c \ud569\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events - MDN"})})," \uc744 \uae30\ubc18\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub4e4\uc740 ",(0,l.jsx)(n.code,{children:"\ud0c0\uc785 \ucd94\ub860"}),"\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ud0c0\uc785 \ucd94\ub860\ub418\uc9c0 \uc54a\uc740 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub294 \uc9c1\uc811 \uc785\ub825\ud558\uc154\uc57c \ub429\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/keyDownCallbackMap.ts",children:"\ud0c0\uc785 \ucd94\ub860\uc744 \uc704\ud574 \uc81c\uacf5\ud558\ub294 KeyDownCallbackMap \uc778\ud130\ud398\uc774\uc2a4"})})]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["\ub9cc\uc57d ",(0,l.jsx)(n.code,{children:"\ubaa8\ub4e0 KeyboardEvent.key"}),"\uc5d0 \ub300\ud574 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,l.jsx)(n.code,{children:"allKeyDownCallback"})," props\ub97c \uc774\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:"allKeyDownCallback\uc774 \uc874\uc7ac \ud560 \uacbd\uc6b0 keyDownCallbackMap\uc73c\ub85c \uc9c0\uc815\ud55c \ucf5c\ubc31 \ud568\uc218\ub294 \ubb34\uc2dc\ud569\ub2c8\ub2e4."})]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"autoFocus"})," \uc635\uc158\uc744 ",(0,l.jsx)(n.code,{children:"true"}),"\ub85c \uc81c\uacf5\ud55c\ub2e4\uba74 \ub9c8\uc6b4\ud2b8 \uc2dc ref\ub97c \uc81c\uacf5\ud55c \uc694\uc18c\uc758 ",(0,l.jsx)(n.code,{children:"focus()"})," \ud568\uc218\uac00 \ud638\ucd9c\ub418\uc11c \uc790\ub3d9 \ud3ec\ucee4\uc2f1 \ub429\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"enabled"})," \uc635\uc158\uc744 \ud1b5\ud574 \uc6d0\ud558\ub294 \uc870\uac74\uc5d0 keydown \uc774\ubca4\ud2b8\ub97c \ubc14\uc778\ub529 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,l.jsx)("br",{}),"\n",(0,l.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,l.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseKeyDownProps {\n enabled?: boolean;\n autoFocus?: boolean;\n keyDownCallbackMap?: Partial;\n allKeyDownCallback?: (event: KeyboardEvent) => void;\n}\n\nconst useKeyDown: ({\n enabled, // default: true\n autoFocus, // default: false\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps) => {\n ref: React.RefObject;\n};\n"})}),"\n",(0,l.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsx)(n.h3,{id:"allkeydowncallback",children:"AllKeyDownCallback"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref } = useKeyDown({\n enabled: true, // default\n autoFocus: false, // default\n allKeyDownCallback: (event) => console.log('All Key', event.key)\n });\n\n return ;\n};\n"})}),"\n",(0,l.jsx)(n.h3,{id:"keydowncallbackmap",children:"KeyDownCallbackMap"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const { ref } = useKeyDown({\n enabled: true, // default\n autoFocus: false, // default\n keyDownCallbackMap: {\n Enter: (event) => console.log('Enter', event.key), \n Shift: (event) => console.log('Shift', event.key) \n }\n });\n\n return ;\n};\n"})}),"\n",(0,l.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events(en) - MDN"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(en) - MDN"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(ko) - MDN"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(i,{...e})}):i(e)}},9937:(e,n,o)=>{o.d(n,{Z:()=>r,a:()=>s});var l=o(7800);const t={},a=l.createContext(t);function s(e){const n=l.useContext(a);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:s(e.components),l.createElement(a.Provider,{value:n},e.children)}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[35],{8697:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>c,contentTitle:()=>a,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var l=o(1986),t=o(9937);const s={},a="useKeyDown",r={id:"react/hooks/useKeyDown",title:"useKeyDown",description:"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useKeyDown.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useKeyDown",permalink:"/modern-kit/docs/react/hooks/useKeyDown",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useIsomorphicLayoutEffect",permalink:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect"},next:{title:"useLocalStorage",permalink:"/modern-kit/docs/react/hooks/useLocalStorage"}},c={},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"AllKeyDownCallback",id:"allkeydowncallback",level:3},{value:"KeyDownCallbackMap",id:"keydowncallbackmap",level:3},{value:"Note",id:"note",level:2}];function i(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.a)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"usekeydown",children:"useKeyDown"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"ref"}),"\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c ",(0,l.jsx)(n.code,{children:"keydown"})," \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc ",(0,l.jsx)(n.code,{children:"keyDownCallbackMap"}),"\ub85c \uc9c0\uc815\ud55c ",(0,l.jsx)(n.code,{children:"key"}),"\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"keyDownCallbackMap"}),"\uc758 key\ub294 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc774 \ub4e4\uc5b4\uac00\uc57c \ud569\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events - MDN"})})," \uc744 \uae30\ubc18\uc73c\ub85c \uc790\uc8fc \uc0ac\uc6a9\ub418\ub294 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub4e4\uc740 ",(0,l.jsx)(n.code,{children:"\ud0c0\uc785 \ucd94\ub860"}),"\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4. \ud0c0\uc785 \ucd94\ub860\ub418\uc9c0 \uc54a\uc740 ",(0,l.jsx)(n.code,{children:"KeyboardEvent.key"}),"\ub294 \uc9c1\uc811 \uc785\ub825\ud558\uc154\uc57c \ub429\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:(0,l.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/keyDownCallbackMap.ts",children:"\ud0c0\uc785 \ucd94\ub860\uc744 \uc704\ud574 \uc81c\uacf5\ud558\ub294 KeyDownCallbackMap \uc778\ud130\ud398\uc774\uc2a4"})})]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:["\ub9cc\uc57d ",(0,l.jsx)(n.code,{children:"\ubaa8\ub4e0 KeyboardEvent.key"}),"\uc5d0 \ub300\ud574 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0 \uc2f6\ub2e4\uba74 ",(0,l.jsx)(n.code,{children:"allKeyDownCallback"})," props\ub97c \uc774\uc6a9 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["\ud83d\udca1 ",(0,l.jsx)(n.strong,{children:"allKeyDownCallback\uc774 \uc874\uc7ac \ud560 \uacbd\uc6b0 keyDownCallbackMap\uc73c\ub85c \uc9c0\uc815\ud55c \ucf5c\ubc31 \ud568\uc218\ub294 \ubb34\uc2dc\ud569\ub2c8\ub2e4."})]}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"autoFocus"})," \uc635\uc158\uc744 ",(0,l.jsx)(n.code,{children:"true"}),"\ub85c \uc81c\uacf5\ud55c\ub2e4\uba74 \ub9c8\uc6b4\ud2b8 \uc2dc ref\ub97c \uc81c\uacf5\ud55c \uc694\uc18c\uc758 ",(0,l.jsx)(n.code,{children:"focus()"})," \ud568\uc218\uac00 \ud638\ucd9c\ub418\uc11c \uc790\ub3d9 \ud3ec\ucee4\uc2f1 \ub429\ub2c8\ub2e4."]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"enabled"})," \uc635\uc158\uc744 \ud1b5\ud574 \uc6d0\ud558\ub294 \uc870\uac74\uc5d0 keydown \uc774\ubca4\ud2b8\ub97c \ubc14\uc778\ub529 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,l.jsx)("br",{}),"\n",(0,l.jsx)(n.h2,{id:"code",children:"Code"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useKeyDown/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,l.jsx)(n.h2,{id:"interface",children:"Interface"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseKeyDownProps {\n enabled?: boolean;\n autoFocus?: boolean;\n keyDownCallbackMap?: Partial;\n allKeyDownCallback?: (event: KeyboardEvent) => void;\n}\n"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ts",metastring:'title="typescript"',children:"function useKeyDown({\n enabled,\n autoFocus,\n keyDownCallbackMap,\n allKeyDownCallback,\n}: UseKeyDownProps): React.RefObject;\n"})}),"\n",(0,l.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsx)(n.h3,{id:"allkeydowncallback",children:"AllKeyDownCallback"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"\ubaa8\ub4e0 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \uacf5\ud1b5 \ucf5c\ubc31 \ud568\uc218\uc785\ub2c8\ub2e4."}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n autoFocus: false, // default: false\n allKeyDownCallback: (event) => console.log('All Key', event.key)\n });\n\n return ;\n};\n"})}),"\n",(0,l.jsx)(n.h3,{id:"keydowncallbackmap",children:"KeyDownCallbackMap"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"\ud2b9\uc815 \ud0a4\uc5d0 \ud574\ub2f9\ud558\ub294 \ucf5c\ubc31\uc744 \ub9e4\ud551\ud558\uace0, \ud574\ub2f9 \ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ud638\ucd9c\ub420 \ucf5c\ubc31 \ud568\uc218\ub4e4\uc744 \ud638\ucd9c\ud569\ub2c8\ub2e4."}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useKeyDown } from '@modern-kit/react';\n\nconst Example = () => {\n const targetRef = useKeyDown({\n enabled: true, // default: true\n autoFocus: true, // default: false\n keyDownCallbackMap: {\n Enter: (event) => console.log('Enter', event.key), \n Shift: (event) => console.log('Shift', event.key) \n }\n });\n\n return ;\n};\n"})}),"\n",(0,l.jsx)(n.h2,{id:"note",children:"Note"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values",children:"Key values for keyboard events(en) - MDN"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(en) - MDN"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key",children:"KeyboardEvent.key(ko) - MDN"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,t.a)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(i,{...e})}):i(e)}},9937:(e,n,o)=>{o.d(n,{Z:()=>r,a:()=>a});var l=o(7800);const t={},s=l.createContext(t);function a(e){const n=l.useContext(s);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),l.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/c55c9b0f.0c21420b.js b/assets/js/c55c9b0f.0c21420b.js deleted file mode 100644 index e06df0653..000000000 --- a/assets/js/c55c9b0f.0c21420b.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see c55c9b0f.0c21420b.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6152],{5346:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="SwitchCase",l={id:"react/components/SwithCase",title:"SwitchCase",description:"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/SwithCase.mdx",sourceDirName:"react/components",slug:"/react/components/SwithCase",permalink:"/modern-kit/docs/react/components/SwithCase",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SeparatedIterator",permalink:"/modern-kit/docs/react/components/SeparatedIterator"},next:{title:"When",permalink:"/modern-kit/docs/react/components/When"}},u={},d=()=>{const e={button:"button",div:"div",h3:"h3",...(0,o.a)()},[t,n]=(0,r.useState)(1);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>n(1),children:"Change to case 1"}),(0,i.jsx)(e.button,{onClick:()=>n(2),children:"Change to case 2"}),(0,i.jsx)(e.button,{onClick:()=>n(3),children:"Change to case 3"})]}),(0,i.jsx)(a.Hk,{condition:t,cases:{1:(0,i.jsx)(e.h3,{children:"Case No.1"}),2:(0,i.jsx)(e.h3,{children:"Case No.2"}),3:(0,i.jsx)(e.h3,{children:"Case No.3"})}})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"switchcase",children:"SwitchCase"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Switch"})," \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"cases"}),"\uc5d0\ub294 ",(0,i.jsx)(t.code,{children:"key(condition):value(component)"})," \ud615\ud0dc\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \uac16\ub294 \uac1d\uccb4\ub97c \ub118\uaca8\uc8fc\uace0, ",(0,i.jsx)(t.code,{children:"condition"})," props\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,i.jsx)(t.code,{children:"value(\ucef4\ud3ec\ub10c\ud2b8)"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"cases"}),"\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,i.jsx)(t.code,{children:"condition"}),"\uc774 \uc5c6\uc744 \ub54c \uc784\uc2dc\ub85c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"defaultCaseComponent"}),"\ub97c ",(0,i.jsx)(t.code,{children:"props"}),"\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SwitchCase/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Component = Nullable;\n\ninterface SwitchCaseProps {\n condition: Condition | null | undefined;\n cases: Partial>;\n defaultCaseComponent?: Component;\n}\n\nconst SwitchCase: ({\n condition,\n cases,\n defaultCaseComponent,\n}: SwitchCaseProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SwitchCase } from '@modern-kit/react';\n\n\nconst Example = () => {\n const [condition, setCondition] = useState(1);\n\n return (\n
\n
\n \n \n \n
\n\n Case No.1,\n 2:

Case No.2

,\n 3:

Case No.3

,\n }}\n />\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>rt,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>re,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function f(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,N=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return R;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=o=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(z(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,o.useState)(!1),p=!b,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},fe=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})};const we=(0,o.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=r(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,o.useRef)(null),n=ne(e);return(0,o.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield V(e,U[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),f=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ce(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Ee(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ce("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Ne(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Pe(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,o.useState)($e(e,t));return(0,o.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,i=a-t.top,o=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=o,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+We(c.width,i.width,s)}};function Ge(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=He(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ke(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",N="Google",T="Huawei",R="LG",_="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var ot=it.exports;function rt(){const[e,t]=(0,o.useState)(null);return pe((()=>{const e=new ot.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,r]=(0,o.useState)({width:null,height:null}),a=(0,o.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),c=(0,o.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/c55c9b0f.c15f33a5.js b/assets/js/c55c9b0f.c15f33a5.js new file mode 100644 index 000000000..f48f357a1 --- /dev/null +++ b/assets/js/c55c9b0f.c15f33a5.js @@ -0,0 +1,2 @@ +/*! For license information please see c55c9b0f.c15f33a5.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[6152],{5346:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="SwitchCase",l={id:"react/components/SwithCase",title:"SwitchCase",description:"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/SwithCase.mdx",sourceDirName:"react/components",slug:"/react/components/SwithCase",permalink:"/modern-kit/docs/react/components/SwithCase",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"SeparatedIterator",permalink:"/modern-kit/docs/react/components/SeparatedIterator"},next:{title:"When",permalink:"/modern-kit/docs/react/components/When"}},u={},d=()=>{const e={button:"button",div:"div",h3:"h3",...(0,o.a)()},[t,n]=(0,r.useState)(1);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>n(1),children:"Change to case 1"}),(0,i.jsx)(e.button,{onClick:()=>n(2),children:"Change to case 2"}),(0,i.jsx)(e.button,{onClick:()=>n(3),children:"Change to case 3"})]}),(0,i.jsx)(a.Hk,{condition:t,cases:{1:(0,i.jsx)(e.h3,{children:"Case No.1"}),2:(0,i.jsx)(e.h3,{children:"Case No.2"}),3:(0,i.jsx)(e.h3,{children:"Case No.3"})}})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"switchcase",children:"SwitchCase"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Switch"})," \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"cases"}),"\uc5d0\ub294 ",(0,i.jsx)(t.code,{children:"key(condition):value(component)"})," \ud615\ud0dc\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \uac16\ub294 \uac1d\uccb4\ub97c \ub118\uaca8\uc8fc\uace0, ",(0,i.jsx)(t.code,{children:"condition"})," props\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,i.jsx)(t.code,{children:"value(\ucef4\ud3ec\ub10c\ud2b8)"}),"\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"cases"}),"\uc5d0 \ub9e4\uce6d\ub418\ub294 ",(0,i.jsx)(t.code,{children:"condition"}),"\uc774 \uc5c6\uc744 \ub54c \uc784\uc2dc\ub85c \ubcf4\uc5ec\uc904 \uc218 \uc788\ub294 ",(0,i.jsx)(t.code,{children:"defaultCaseComponent"}),"\ub97c ",(0,i.jsx)(t.code,{children:"props"}),"\ub85c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/SwitchCase/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"type Component = Nullable;\n\ninterface SwitchCaseProps {\n condition: Condition | null | undefined;\n cases: Partial>;\n defaultCaseComponent?: Component;\n}\n\nconst SwitchCase: ({\n condition,\n cases,\n defaultCaseComponent,\n}: SwitchCaseProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { SwitchCase } from '@modern-kit/react';\n\n\nconst Example = () => {\n const [condition, setCondition] = useState(1);\n\n return (\n
\n
\n \n \n \n
\n\n Case No.1,\n 2:

Case No.2

,\n 3:

Case No.3

,\n }}\n />\n
\n );\n};\n"})}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>ye,KS:()=>rt,LN:()=>Ye,Mm:()=>xe,Nr:()=>re,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>Re,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>ot,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Ne,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>je});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function f(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",j=m?m.toStringTag:void 0;var E="[object Symbol]",O=/\s/,N=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var R=NaN,_=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[x]=n:delete e[x]),o}(e):function(e){return k.call(e)}(e)}(e)==E}(e))return R;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?R:+e}var $=function(){return h.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function p(){var e=$();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,r-(e-l)):n}(e))}function h(e){return s=void 0,f&&i?b(e):(i=o=void 0,a)}function m(){var e=$(),n=w(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,r=(d="maxWait"in n)?L(z(n.maxWait)||0,t):r,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},m.flush=function(){return void 0===s?a:h($())},m}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>q(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,o.useState)(!1),p=!b,h=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},fe=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})},we=D()?o.useLayoutEffect:o.useEffect;function pe(e,t,n,i={}){const o=oe(i),r=ne(n);we((()=>{if(e)return e.addEventListener(t,r,o),()=>{e.removeEventListener(t,r,o)}}),[t,e,o,r])}function he(e){const t=(0,o.useRef)(null),n=(0,o.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,o.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const me=(0,o.forwardRef)(((e,t)=>{var{as:n,children:o,callback:a}=e,s=r(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:o}))}));(0,o.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function xe(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield V(e,U[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),f=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Oe(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Re(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=$e(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,o.useState)(Fe(e,t)),r=(0,o.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",r),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(Xe),i=(0,o.useCallback)((t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=r-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+Je(c.width,i.width,s)}};function Ze(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=et(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},Ce(e))}function ot(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(X);return T(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),q(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function rt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",j="Browser",E="Chrome",O="Firefox",N="Google",T="Huawei",R="LG",_="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,h,v,m,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,o.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=re(n,e),r=(0,o.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/cc0ca23c.da0c7761.js.LICENSE.txt b/assets/js/c55c9b0f.c15f33a5.js.LICENSE.txt similarity index 100% rename from assets/js/cc0ca23c.da0c7761.js.LICENSE.txt rename to assets/js/c55c9b0f.c15f33a5.js.LICENSE.txt diff --git a/assets/js/cb3f6f96.85b272bb.js b/assets/js/cb3f6f96.85b272bb.js new file mode 100644 index 000000000..6c1c795bd --- /dev/null +++ b/assets/js/cb3f6f96.85b272bb.js @@ -0,0 +1,2 @@ +/*! For license information please see cb3f6f96.85b272bb.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4217],{4430:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="Iterator",c={id:"react/components/Iterator",title:"Iterator",description:"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/Iterator.mdx",sourceDirName:"react/components",slug:"/react/components/Iterator",permalink:"/modern-kit/docs/react/components/Iterator",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"},next:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"}},l={},u=()=>{const e={h3:"h3",...(0,r.a)()};return(0,i.jsx)(o.Bg,{itemKey:"id",items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,i.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"iterator",children:"Iterator"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,i.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"itemKey"}),"\ub85c \ubb38\uc790\uc5f4\uc744 \ub123\uc73c\uba74, \uac01 \uc694\uc18c\uc5d0\uc11c \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0 key\uc758 \uac12\uc744 \uac01 \uc694\uc18c\uc758 ",(0,i.jsx)(t.code,{children:"unique key"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubb38\uc790\uc5f4/\uc22b\uc790 \ubc30\uc5f4\uc758 \uacbd\uc6b0 itemKey\ub97c \ub118\uae30\uc9c0 \uc54a\uc544\ub3c4. \uc790\ub3d9\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"{index}_{item}"}),"\ud615\ud0dc\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Iterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IteratorProps {\n items: T[] | readonly T[] | undefined;\n itemKey?: T extends Record ? keyof T : string;\n renderItem: (item: T, index: number) => JSX.Element;\n}\n\nconst Iterator: ({\n items,\n itemKey,\n renderItem,\n}: IteratorProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Iterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n />\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>pe,Bg:()=>be,Cf:()=>Se,D9:()=>Ke,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>me,Pr:()=>He,S1:()=>se,VP:()=>ke,XI:()=>Oe,Xs:()=>nt,Yz:()=>Ne,_:()=>Ae,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Be,jr:()=>Ie,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>We,yn:()=>Te,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,m="object"==typeof self&&self&&self.Object===Object&&self,p=w||m||Function("return this")(),h=p.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,I=/^\s+/;function O(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var $=function(){return p.Date.now()},L="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(L);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function m(){var e=$();if(w(e))return p(e);s=setTimeout(m,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function p(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(m,t),b(c)}return void 0===s&&(s=setTimeout(m,t)),a}return t=z(t)||0,O(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:p($())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function K(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return K(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!G(e[o],t[o],n))return!1;return!0},G=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!G(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function J(e,t){return G(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),m=!b,p=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:p,children:[m&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function me(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function pe(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return me(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=pe(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield K(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ie(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const _e="modern-kit-local-storage",Re="modern-kit-session-storage",Me={localStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Le=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Ae(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Le,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return me(window.matchMedia(e),"change",o),n}const Xe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Xe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return me(window.document,"mousemove",i),{ref:e,position:t}}const Ue=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Ue,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function Ke(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function We(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Je=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Je(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return O(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",m="console",p="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",I="Google",O="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",L="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},K=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};G.VERSION="1.0.38",G.BROWSER=B([u,b,c]),G.CPU=B([w]),G.DEVICE=B([l,f,d,m,p,v,h,g,y]),G.ENGINE=G.OS=B([u,b]),e.exports&&(t=e.exports=G),t.UAParser=G;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new G;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return me(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/db388e02.b025377a.js.LICENSE.txt b/assets/js/cb3f6f96.85b272bb.js.LICENSE.txt similarity index 100% rename from assets/js/db388e02.b025377a.js.LICENSE.txt rename to assets/js/cb3f6f96.85b272bb.js.LICENSE.txt diff --git a/assets/js/cb3f6f96.bc263768.js b/assets/js/cb3f6f96.bc263768.js deleted file mode 100644 index edf21e047..000000000 --- a/assets/js/cb3f6f96.bc263768.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see cb3f6f96.bc263768.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4217],{4430:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="Iterator",c={id:"react/components/Iterator",title:"Iterator",description:"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.",source:"@site/docs/react/components/Iterator.mdx",sourceDirName:"react/components",slug:"/react/components/Iterator",permalink:"/modern-kit/docs/react/components/Iterator",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"InView",permalink:"/modern-kit/docs/react/components/InView"},next:{title:"LazyImage",permalink:"/modern-kit/docs/react/components/LazyImage"}},l={},u=()=>{const e={h3:"h3",...(0,r.a)()};return(0,i.jsx)(o.Bg,{itemKey:"id",items:[{id:1,name:"Gromit"},{id:2,name:"Dylan"},{id:3,name:"Minjae"}],renderItem:t=>(0,i.jsxs)(e.h3,{children:["id: ",t.id,", name: ",t.name]})})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"iterator",children:"Iterator"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"items props"}),"\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 ",(0,i.jsx)(t.code,{children:"\ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8"}),"\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"itemKey"}),"\ub85c \ubb38\uc790\uc5f4\uc744 \ub123\uc73c\uba74, \uac01 \uc694\uc18c\uc5d0\uc11c \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0 key\uc758 \uac12\uc744 \uac01 \uc694\uc18c\uc758 ",(0,i.jsx)(t.code,{children:"unique key"}),"\ub85c \uc124\uc815\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubb38\uc790\uc5f4/\uc22b\uc790 \ubc30\uc5f4\uc758 \uacbd\uc6b0 itemKey\ub97c \ub118\uae30\uc9c0 \uc54a\uc544\ub3c4. \uc790\ub3d9\uc73c\ub85c ",(0,i.jsx)(t.code,{children:"{index}_{item}"}),"\ud615\ud0dc\ub85c \uc9c0\uc815\ub429\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/components/Iterator/index.tsx",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface IteratorProps {\n items: T[] | readonly T[] | undefined;\n itemKey?: T extends Record ? keyof T : string;\n renderItem: (item: T, index: number) => JSX.Element;\n}\n\nconst Iterator: ({\n items,\n itemKey,\n renderItem,\n}: IteratorProps) => JSX.Element;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { Iterator } from '@modern-kit/react';\n\ninterface Item {\n id: number;\n name: string;\n}\n\nconst Example = () => {\n const items: Item[] = [\n { id: 1, name: 'Gromit' },\n { id: 2, name: 'Dylan' },\n { id: 3, name: 'Minjae' },\n ];\n\n return (\n (\n

\n id: {item.id}, name: {item.name}\n

\n )}\n />\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Be,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Ie,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>Ce,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Ue,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>pe,yU:()=>Ye,yn:()=>je,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,m="object"==typeof self&&self&&self.Object===Object&&self,p=w||m||Function("return this")(),h=p.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",j=h?h.toStringTag:void 0;var C="[object Symbol]",T=/\s/,I=/^\s+/;function O(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,_=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:j&&j in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==C}(e))return N;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(I,""):e}(e);var n=R.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):_.test(e)?N:+e}var L=function(){return p.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function m(){var e=L();if(w(e))return p(e);s=setTimeout(m,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function p(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(m,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(m,t),b(c)}return void 0===s&&(s=setTimeout(m,t)),a}return t=z(t)||0,O(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:p(L())},h}var X="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const U={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function K(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return K(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!H(e[o],t[o],n))return!1;return!0},H=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!H(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function J(e,t){return H(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=J){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),m=!b,p=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:m?0:1,transition:`opacity ${u}`},l)),[m,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:p,children:[m&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),me=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const pe=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield K(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,U[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function je(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ce(e,{preserveTitleOnUnmount:t=!1}={}){me((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ie(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Oe="modern-kit-local-storage",Ne="modern-kit-session-storage",_e={localStorage:{key:Oe,subscribe:e=>{window.addEventListener(Oe,e)},unsubscribe:e=>{window.removeEventListener(Oe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Oe))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},Re=e=>_e[e],Me=Re("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return me((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Xe=()=>!0;function Be({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Xe)}}function Ue(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return me((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ke=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ke(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ke(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ke(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ke(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const He=Re("sessionStorage"),Je=e=>window.sessionStorage.getItem(e),Ze=e=>(He.subscribe(e),()=>{He.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Je(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Je(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),He.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),He.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(X);return O(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",m="console",p="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",j="Browser",C="Chrome",T="Firefox",I="Google",O="Huawei",N="LG",_="Microsoft",R="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",X="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},K=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,X)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};H.VERSION="1.0.38",H.BROWSER=B([u,b,c]),H.CPU=B([w]),H.DEVICE=B([l,f,d,m,p,v,h,g,y]),H.ENGINE=H.OS=B([u,b]),e.exports&&(t=e.exports=H),t.UAParser=H;var J=typeof n!==o&&(n.jQuery||n.Zepto);if(J&&!J.ua){var Z=new H;J.ua=Z.getResult(),J.ua.get=function(){return Z.getUA()},J.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)J.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return me((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){me((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return me((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/cc0ca23c.7a373cfb.js b/assets/js/cc0ca23c.7a373cfb.js new file mode 100644 index 000000000..8e3e9f31b --- /dev/null +++ b/assets/js/cc0ca23c.7a373cfb.js @@ -0,0 +1,2 @@ +/*! For license information please see cc0ca23c.7a373cfb.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4123],{1027:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="useThrottle",l={id:"react/hooks/useThrottle",title:"useThrottle",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useThrottle.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState"},next:{title:"useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,o.useState)(1),[s,c]=(0,o.useState)(1),l=(0,a.fB)((()=>{c(s+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{style:{display:"flex"},children:[(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsx)(e.div,{style:{width:"50px"}}),(0,i.jsx)(e.button,{onClick:l,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["count: ",t]}),(0,i.jsxs)(e.p,{children:["throttledCount: ",s]})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usethrottle",children:"useThrottle"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useThrottle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface ThrottleSettings {\n leading?: boolean | undefined;\n trailing?: boolean | undefined;\n}\n\ntype ThrottleParameters = Parameters;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useThrottle any>(\n callback: T,\n wait: ThrottleParameters[1],\n options?: ThrottleParameters[2]\n): ThrottleReturnType;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useThrottle } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [throttledCount, setThrottledCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const throttledCountUp = useThrottle(() => {\n setThrottledCount(throttledCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

throttledCount: {throttledCount}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Ne,Xs:()=>nt,Yz:()=>_e,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Be,jr:()=>Oe,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Te,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=m?m.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var $=function(){return h.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function h(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function m(){var e=$(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h($())},m}var U="Expected a function";function B(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>B(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>B(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return B(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Oe(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function _e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Be(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",B=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=B([u,b,c]),J.CPU=B([w]),J.DEVICE=B([l,f,d,p,h,v,m,g,y]),J.ENGINE=J.OS=B([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/e3446db6.bcdbdb6a.js.LICENSE.txt b/assets/js/cc0ca23c.7a373cfb.js.LICENSE.txt similarity index 100% rename from assets/js/e3446db6.bcdbdb6a.js.LICENSE.txt rename to assets/js/cc0ca23c.7a373cfb.js.LICENSE.txt diff --git a/assets/js/cc0ca23c.da0c7761.js b/assets/js/cc0ca23c.da0c7761.js deleted file mode 100644 index 354b7a9ef..000000000 --- a/assets/js/cc0ca23c.da0c7761.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see cc0ca23c.da0c7761.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4123],{1027:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="useThrottle",l={id:"react/hooks/useThrottle",title:"useThrottle",description:"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useThrottle.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useThrottle",permalink:"/modern-kit/docs/react/hooks/useThrottle",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState"},next:{title:"useTimeout",permalink:"/modern-kit/docs/react/hooks/useTimeout"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,o.useState)(1),[s,c]=(0,o.useState)(1),l=(0,a.fB)((()=>{c(s+1)}),1e3);return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{style:{display:"flex"},children:[(0,i.jsx)(e.button,{onClick:()=>{n(t+1)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsx)(e.div,{style:{width:"50px"}}),(0,i.jsx)(e.button,{onClick:l,children:"debounce \ubc84\ud2bc \ud074\ub9ad"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["count: ",t]}),(0,i.jsxs)(e.p,{children:["throttledCount: ",s]})]})]})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usethrottle",children:"useThrottle"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"debounce"}),"\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useThrottle/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface ThrottleSettings {\n leading?: boolean | undefined;\n trailing?: boolean | undefined;\n}\n\ntype ThrottleParameters = Parameters;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"function useThrottle any>(\n callback: T,\n wait: ThrottleParameters[1],\n options?: ThrottleParameters[2]\n): ThrottleReturnType;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useState } from 'react';\nimport { useThrottle } from '@modern-kit/react';\n\nconst Example = () => {\n const [count, setCount] = useState(1);\n const [throttledCount, setThrottledCount] = useState(1);\n\n const countUp = () => {\n setCount(count + 1);\n };\n\n const throttledCountUp = useThrottle(() => {\n setThrottledCount(throttledCount + 1);\n }, 1000);\n\n return (\n
\n
\n \n
\n \n
\n
\n

count: {count}

\n

throttledCount: {throttledCount}

\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Te,Xs:()=>Qe,Yz:()=>Oe,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,O=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(O,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,N(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Oe(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Ue)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return N(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",T="Firefox",O="Google",N="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/db388e02.1bf118bb.js b/assets/js/db388e02.1bf118bb.js new file mode 100644 index 000000000..638bec505 --- /dev/null +++ b/assets/js/db388e02.1bf118bb.js @@ -0,0 +1,2 @@ +/*! For license information please see db388e02.1bf118bb.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9576],{5028:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="useBlockPromiseMultipleClick",l={id:"react/hooks/useBlockPromiseMultipleClick",title:"useBlockPromiseMultipleClick",description:"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useBlockPromiseMultipleClick.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"},next:{title:"useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,o.a)()},[t,n]=(0,r.useState)(1),[s,c]=(0,r.useState)(1),[l,u]=(0,r.useState)(null),{isLoading:d,blockMultipleClick:b}=(0,a.Mm)(),f=async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/todos/${t}`).then((e=>e.json()));u(e),n(t+1)};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{c(s+1),b(f)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["BlockingCount: ",t]}),(0,i.jsxs)(e.p,{children:["NonBlockingCount: ",s]})]}),d?(0,i.jsx)(e.p,{children:"\ub85c\ub529\uc911"}):(0,i.jsx)(e.p,{children:l?.title})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useblockpromisemultipleclick",children:"useBlockPromiseMultipleClick"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 ",(0,i.jsx)(t.code,{children:"Promise"})," \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 ",(0,i.jsx)(t.code,{children:"\uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8"}),"\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useDebounce",children:"useDebounce"}),"\ub97c \uc0ac\uc6a9\ud574 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud560 \uc218\ub294 \uc788\uc9c0\ub9cc, \uc2dc\uac04 \uac12\uc5d0 \uc758\uc874\ud558\uae30 \ub54c\ubb38\uc5d0 \ub9cc\uc57d ",(0,i.jsx)(t.code,{children:"Promise"}),"\uac00 \uc774\ud589\ub420 \ub54c\uae4c\uc9c0 \ud638\ucd9c\uc744 \uc644\ubcbd\ud558\uac8c \ucc28\ub2e8\ud574\uc57c \ud55c\ub2e4\uba74 \ubd80\uc871\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ud574\ub2f9 \ud6c5\uc740 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \ub54c\ubb38\uc5d0, ",(0,i.jsx)(t.code,{children:"Promise"})," \uc774\ud589\uc744 \ubcf4\uc7a5\ud558\uba74\uc11c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uace0 \uc2f6\uc744 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBlockPromiseMultipleClick/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useBlockPromiseMultipleClick: () => {\n isLoading: boolean;\n blockMultipleClick: (callback: () => Promise) => Promise;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useBlockPromiseMultipleClick } from '@modern-kit/react';\n\ninterface Value {\n userId: number;\n id: number;\n title: string;\n completed: boolean;\n}\n\nconst Example = () => {\n const [blockingCount, setBlockingCount] = useState(1);\n const [nonBlockingCount, setNonBlockingCount] = useState(1);\n const [value, setValue] = useState(null);\n\n const { isLoading, blockMultipleClick } = useBlockPromiseMultipleClick();\n\n const fetchApi = async () => {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/todos/${blockingCount}`\n ).then((response) => response.json());\n\n setValue(res);\n setBlockingCount(blockingCount + 1);\n };\n\n const handleClick = () => {\n setNonBlockingCount(nonBlockingCount + 1);\n blockMultipleClick(fetchApi); // (*) Promise \ubc18\ud658\ud558\ub294 \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4\uc8fc\uc138\uc694.\n };\n\n return (\n
\n \n
\n

BlockingCount: {blockingCount}

\n

NonBlockingCount: {nonBlockingCount}

\n
\n {isLoading ?

\ub85c\ub529\uc911

:

{value?.title}

}\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>fe,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>ke,KS:()=>rt,LN:()=>Ye,Mm:()=>ye,Nr:()=>re,OR:()=>we,Pr:()=>Ge,S1:()=>se,VP:()=>xe,XI:()=>Ne,Xs:()=>nt,Yz:()=>Pe,_:()=>$e,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>be,fB:()=>ot,g4:()=>Ce,iP:()=>dt,ii:()=>Ve,jr:()=>Te,my:()=>he,nA:()=>ve,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ge,yU:()=>He,yn:()=>Oe,z$:()=>je});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,g=Object.prototype,v=g.hasOwnProperty,k=g.toString,y=h?h.toStringTag:void 0,x=Object.prototype.toString,S="[object Null]",C="[object Undefined]",j=h?h.toStringTag:void 0;var E="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,M=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function B(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:j&&j in Object(e)?function(e){var t=v.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var o=k.call(e);return i&&(t?e[y]=n:delete e[y]),o}(e):function(e){return x.call(e)}(e)}(e)==E}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):M.test(e)?P:+e}var z=function(){return m.Date.now()},A="Expected a function",$=Math.max,L=Math.min;function F(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(A);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function w(){var e=z();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?L(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=z(),n=p(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=B(t)||0,N(n)&&(u=!!n.leading,r=(d="maxWait"in n)?$(B(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var q="Expected a function";function V(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>V(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>F(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),w=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),g=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:g},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})},pe=D()?o.useLayoutEffect:o.useEffect;function we(e,t,n,i={}){const o=oe(i),r=ne(n);pe((()=>{if(e)return e.addEventListener(t,r,o),()=>{e.removeEventListener(t,r,o)}}),[t,e,o,r])}function me(e){const t=(0,o.useRef)(null),n=(0,o.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,o.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const he=(0,o.forwardRef)(((e,t)=>{var{as:n,children:o,callback:a}=e,s=r(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:o}))}));(0,o.createContext)({parentPortalElement:null});const ge=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},ve=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ke=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ye(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>V(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield U(e,X[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:p}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ee(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Oe(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ee("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Ne({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Pe(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Me="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Me,subscribe:e=>{window.addEventListener(Me,e)},unsubscribe:e=>{window.removeEventListener(Me,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Me))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Be=Ie("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>(Be.subscribe(e),()=>{Be.unsubscribe(e)});function $e(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=ze(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Be.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Be.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,o.useState)(Le(e,t)),r=(0,o.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",r),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ve(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)(qe),i=(0,o.useCallback)((t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,b=null;if(e.current){const t=e.current.getBoundingClientRect();l=r-t.left,u=a-t.top,d=t.left+window.scrollX,b=t.top+window.scrollY}n({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:b})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ue=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Xe,Ue)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+Je(c.width,i.width,s)}};function Ze(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=et(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},Ce(e))}function ot(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),F(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function rt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",p="architecture",w="console",m="mobile",h="tablet",g="smarttv",v="wearable",k="embedded",y="Amazon",x="Apple",S="ASUS",C="BlackBerry",j="Browser",E="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",M="Microsoft",_="Motorola",R="Opera",I="Samsung",B="Sharp",z="Sony",A="Xiaomi",$="Zebra",L="Facebook",F="Chromium OS",q="Mac OS",V=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,k.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,g,k.os),y&&!e[u]&&v&&v.platform&&"Unknown"!=v.platform&&(e[u]=v.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return g},this.setUA=function(e){return g=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(g),this};J.VERSION="1.0.38",J.BROWSER=V([u,f,c]),J.CPU=V([p]),J.DEVICE=V([l,b,d,w,m,g,h,v,k]),J.ENGINE=J.OS=V([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,o.useState)(null);return pe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,o.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=re(n,e),r=(0,o.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",r),t}}}]); \ No newline at end of file diff --git a/assets/js/eb0f0f4b.6a7d1b48.js.LICENSE.txt b/assets/js/db388e02.1bf118bb.js.LICENSE.txt similarity index 100% rename from assets/js/eb0f0f4b.6a7d1b48.js.LICENSE.txt rename to assets/js/db388e02.1bf118bb.js.LICENSE.txt diff --git a/assets/js/db388e02.b025377a.js b/assets/js/db388e02.b025377a.js deleted file mode 100644 index f61fe1d14..000000000 --- a/assets/js/db388e02.b025377a.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see db388e02.b025377a.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[9576],{5028:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>s,metadata:()=>l,toc:()=>b});var i=n(1986),o=n(9937),r=n(7800),a=n(384);const s={},c="useBlockPromiseMultipleClick",l={id:"react/hooks/useBlockPromiseMultipleClick",title:"useBlockPromiseMultipleClick",description:"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useBlockPromiseMultipleClick.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useBlockPromiseMultipleClick",permalink:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useAsyncPreservedCallback",permalink:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback"},next:{title:"useClipboard",permalink:"/modern-kit/docs/react/hooks/useClipboard"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,o.a)()},[t,n]=(0,r.useState)(1),[s,c]=(0,r.useState)(1),[l,u]=(0,r.useState)(null),{isLoading:d,blockMultipleClick:b}=(0,a.Mm)(),f=async()=>{const e=await fetch(`https://jsonplaceholder.typicode.com/todos/${t}`).then((e=>e.json()));u(e),n(t+1)};return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{c(s+1),b(f)},children:"\ubc84\ud2bc \ud074\ub9ad"}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["BlockingCount: ",t]}),(0,i.jsxs)(e.p,{children:["NonBlockingCount: ",s]})]}),d?(0,i.jsx)(e.p,{children:"\ub85c\ub529\uc911"}):(0,i.jsx)(e.p,{children:l?.title})]})},b=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"useblockpromisemultipleclick",children:"useBlockPromiseMultipleClick"})}),"\n",(0,i.jsxs)(t.p,{children:["\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 ",(0,i.jsx)(t.code,{children:"Promise"})," \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 ",(0,i.jsx)(t.code,{children:"\uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8"}),"\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useDebounce",children:"useDebounce"}),"\ub97c \uc0ac\uc6a9\ud574 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud560 \uc218\ub294 \uc788\uc9c0\ub9cc, \uc2dc\uac04 \uac12\uc5d0 \uc758\uc874\ud558\uae30 \ub54c\ubb38\uc5d0 \ub9cc\uc57d ",(0,i.jsx)(t.code,{children:"Promise"}),"\uac00 \uc774\ud589\ub420 \ub54c\uae4c\uc9c0 \ud638\ucd9c\uc744 \uc644\ubcbd\ud558\uac8c \ucc28\ub2e8\ud574\uc57c \ud55c\ub2e4\uba74 \ubd80\uc871\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ud574\ub2f9 \ud6c5\uc740 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30 \ub54c\ubb38\uc5d0, ",(0,i.jsx)(t.code,{children:"Promise"})," \uc774\ud589\uc744 \ubcf4\uc7a5\ud558\uba74\uc11c \uc911\ubcf5 \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uace0 \uc2f6\uc744 \ub54c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useBlockPromiseMultipleClick/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useBlockPromiseMultipleClick: () => {\n isLoading: boolean;\n blockMultipleClick: (callback: () => Promise) => Promise;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import React, { useState } from 'react';\nimport { useBlockPromiseMultipleClick } from '@modern-kit/react';\n\ninterface Value {\n userId: number;\n id: number;\n title: string;\n completed: boolean;\n}\n\nconst Example = () => {\n const [blockingCount, setBlockingCount] = useState(1);\n const [nonBlockingCount, setNonBlockingCount] = useState(1);\n const [value, setValue] = useState(null);\n\n const { isLoading, blockMultipleClick } = useBlockPromiseMultipleClick();\n\n const fetchApi = async () => {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/todos/${blockingCount}`\n ).then((response) => response.json());\n\n setValue(res);\n setBlockingCount(blockingCount + 1);\n };\n\n const handleClick = () => {\n setNonBlockingCount(nonBlockingCount + 1);\n blockMultipleClick(fetchApi); // (*) Promise \ubc18\ud658\ud558\ub294 \ud568\uc218\ub97c \uc778\uc790\ub85c \ub123\uc5b4\uc8fc\uc138\uc694.\n };\n\n return (\n
\n \n
\n

BlockingCount: {blockingCount}

\n

NonBlockingCount: {nonBlockingCount}

\n
\n {isLoading ?

\ub85c\ub529\uc911

:

{value?.title}

}\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const o={},r=i.createContext(o);function a(e){const t=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),i.createElement(r.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>fe,Cf:()=>ke,D9:()=>Ue,FS:()=>rt,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Ve,Mm:()=>ge,Nr:()=>re,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Be,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>be,fB:()=>tt,g4:()=>xe,iP:()=>st,ii:()=>$e,jr:()=>je,my:()=>pe,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>f,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>Se});var i=n(1986),o=n(7800);n(4041);function r(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,o.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=r(e,["ratio","children","className","style"]);const d=(0,o.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(o.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:o.Children.only(a)}))}));function b(){const[e,t]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const f=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>b()?(0,i.jsx)(i.Fragment,{children:t}):e;var p="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=p||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,k=h?h.toStringTag:void 0,x=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var P=NaN,M=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function L(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,k),n=e[k];try{e[k]=void 0;var i=!0}catch(e){}var o=y.call(e);return i&&(t?e[k]=n:delete e[k]),o}(e):function(e){return x.call(e)}(e)}(e)==j}(e))return P;if(N(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=N(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):M.test(e)?P:+e}var B=function(){return m.Date.now()},z="Expected a function",A=Math.max,$=Math.min;function F(e,t,n){var i,o,r,a,s,c,l=0,u=!1,d=!1,b=!0;if("function"!=typeof e)throw new TypeError(z);function f(t){var n=i,r=o;return i=o=void 0,l=t,a=e.apply(r,n)}function p(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=r}function w(){var e=B();if(p(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?$(n,r-(e-l)):n}(e))}function m(e){return s=void 0,b&&i?f(e):(i=o=void 0,a)}function h(){var e=B(),n=p(e);if(i=arguments,o=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?f(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),f(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=L(t)||0,N(n)&&(u=!!n.leading,r=(d="maxWait"in n)?A(L(n.maxWait)||0,t):r,b="trailing"in n?!!n.trailing:b),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=o=s=void 0},h.flush=function(){return void 0===s?a:m(B())},h}var q="Expected a function";function V(e,t,n,i){return new(n||(n=Promise))((function(t,o){function r(e){try{s(i.next(e))}catch(e){o(e)}}function a(e){try{s(i.throw(e))}catch(e){o(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(r,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},U=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>V(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),o=Object.keys(t);if(i.length!==o.length)return!1;for(const r of i)if(!o.includes(r)||!J(e[r],t[r],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],o=[...t];return G(i,o,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,o]of e)if(!t.has(i)||!J(o,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,o.useRef)(e);return t.current=e,(0,o.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,o.useEffect)((()=>()=>t()),[t])}function oe(e,t=K){const[n,i]=(0,o.useState)(e),r=ne(t);return(0,o.useEffect)((()=>{r(n,e)||i(e)}),[r,n,e]),n}function re(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>F(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const r=o.Children.only(e),a=re(((...e)=>{const n=null==r?void 0:r.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,o.cloneElement)(r,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:r=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,o.useRef)(0),l=(0,o.useRef)(!1),u=(0,o.useRef)(null),d=ne((([o],r)=>{if(!n||!o)return;const a=o.target;o.isIntersecting?(l.current=!0,c.current+=1,e(o)):l.current&&(l.current=!1,c.current+=1,t(o)),i&&c.current>1&&r.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:r,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,o.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,o.forwardRef)(((e,t)=>{var{src:n,threshold:o,root:a,rootMargin:s,alt:c,className:l}=e,u=r(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:o,root:a,rootMargin:s}),b=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:b,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,o.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,b=r(e,["width","height","fallback","className","style","duration","onLoad"]);const[f,p]=(0,o.useState)(!1),w=!f,m=(0,o.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,o.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,o.useCallback)((e=>{d&&d(e),p(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},b))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const r=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(o.Fragment,{children:r?t:n})},be=(0,o.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=r(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:b}=se({onIntersectStart:n,onIntersectEnd:o,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,b)},d,{children:e.children}))}));be.displayName="InView";const fe=({items:e=[],itemKey:t,renderItem:n})=>{const r=(0,o.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(o.Fragment,{children:n(e,t)},r(e,t))))})};const pe=(0,o.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=r(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,o.useRef)(null),n=ne(e);return(0,o.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=D()?o.useLayoutEffect:o.useEffect;(0,o.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:r,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,o.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(fe,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[r(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const r=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(o.Fragment,r?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var r;return(0,i.jsx)(o.Fragment,null==e?{children:n}:{children:null!==(r=t[e])&&void 0!==r?r:n})};function ge(){const[e,t]=(0,o.useState)(!1),n=(0,o.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,o.useState)(null),[n,i]=(0,o.useState)(null);return{copiedData:e,readData:n,copyText:(0,o.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,o.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const o=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const o=new Image;o.onload=()=>V(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=o.width,e.height=o.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(o,0,0);const r=yield U(e,X[t]);n(r)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),o.onerror=()=>{i(new Error("Failed to load image"))},o.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:o});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,o.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return V(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ke(e=0){const[t,n]=(0,o.useState)(e),i=(0,o.useCallback)((()=>{n((e=>e+1))}),[]),r=(0,o.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,o.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:r,reset:a}}function xe({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,r]=(0,o.useState)(t),a=(0,o.useMemo)((()=>ii>0),[i]),c=(0,o.useCallback)(((t,n)=>{const o=Z(t)?t(i):t;if(o>=0&&o<=e)return n&&n({prev:i,next:o}),void r(t);throw new Error("Step not valid")}),[i,e]),l=(0,o.useCallback)(((t,n)=>{const o="nextStep"===t;return n?o?0:e:o?i+1:i-1}),[e,i]),u=(0,o.useCallback)(((e,t)=>{if(!n)return;const o=l(e,!0);t&&t({prev:i,next:o}),r(o)}),[n,i,l]),d=(0,o.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),r(n)}),[i,l]),b=(0,o.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),f=(0,o.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),p=(0,o.useCallback)((e=>{e&&e({prev:i,next:t}),r(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:b,goToPrevStep:f,resetStep:p}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:r,setStep:a}=xe({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,o.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:r,setIndex:s}}function Ce(e,t,n={}){const[i,r]=(0,o.useState)(e);return[i,re(r,t,n)]}function Ee(e,t={}){const[n,i]=(0,o.useState)(""),[r,a]=Ce("",e,t);return{value:n,debouncedValue:r,onChange:(0,o.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,o.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,o.useState)(!1),r=(0,o.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,o.useEffect)((()=>{const e=r.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:r,isHovered:n}}function Te(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Ne="modern-kit-local-storage",Pe="modern-kit-session-storage",Me={localStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}},sessionStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}}},_e=e=>Me[e],Re=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Le=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function Be(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Le,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ie(t),o=n?te(n):i,r=Z(e)?e(o):e;window.localStorage.setItem(t,JSON.stringify(r)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const ze=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,o.useState)(ze(e,t));return(0,o.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function $e(){const e=(0,o.useRef)(null),[t,n]=(0,o.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=r-t.left,i=a-t.top,o=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=o,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:o,clientX:r,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Ve({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),o=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",o),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",o)}})(n,e,t)));return{isOnline:(0,o.useSyncExternalStore)(n,Fe,qe)}}function Xe(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ue(e){const t=(0,o.useRef)(e);return(0,o.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,o.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,o.useRef)(null),r=ne(e),a=(0,o.useCallback)((([e])=>{e&&(r(e),n(e.contentRect))}),[r]);return(0,o.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,o.useRef)(null),n=(0,o.useRef)(null),i=(0,o.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),r=(0,o.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>r())),[e,i,r]),{ref:t,lock:i,unlock:r}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:o=0,offsetY:r=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+r+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+o+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+r+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+o+We(c.width,i.width,s)}};function Ge(){const e=(0,o.useRef)(null),t=(0,o.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:o="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:o})}),[]),n=(0,o.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:o="auto"}=n,{left:r,top:a}=He(i,t,n);i.scrollTo({top:a,left:r,behavior:o})}),[]);return(0,o.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=oe(Z(n)?n():n),r=(0,o.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,o.useMemo)((()=>r?te(r):i),[r,i]),setState:(0,o.useCallback)((e=>{try{const n=Ke(t),o=n?te(n):i,r=Z(e)?e(o):e;window.sessionStorage.setItem(t,JSON.stringify(r)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,o.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=oe(e.storageOptions),i=oe(t),[r,a]=(0,o.useState)(i),s=(0,o.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],o=Z(n)?n():n;i.setItem(t,JSON.stringify(o))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,o.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:r,setState:s,clearState:c},xe(e))}function tt(e,t,n={}){const i=ne(e),r=oe(n),a=(0,o.useMemo)((()=>function(e,t,n){var i=!0,o=!0;if("function"!=typeof e)throw new TypeError(q);return N(n)&&(i="leading"in n?!!n.leading:i,o="trailing"in n?!!n.trailing:o),F(e,t,{leading:i,maxWait:t,trailing:o})}(i,t,r)),[i,t,r]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,o.useRef)(),i=ne(e),r=oe(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(r),c=(0,o.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,o.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,o.useCallback)((()=>{l(),c()}),[l,c]);return(0,o.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var o="function",r="undefined",a="object",s="string",c="major",l="model",u="name",d="type",b="vendor",f="version",p="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",k="Amazon",x="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",N="Huawei",P="LG",M="Microsoft",_="Motorola",R="Opera",I="Samsung",L="Sharp",B="Sony",z="Xiaomi",A="Zebra",$="Facebook",F="Chromium OS",q="Mac OS",V=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==o?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==o||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var o=0;o2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[f]=i,D.call(e,v,y.os),k&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=V([u,f,c]),J.CPU=V([p]),J.DEVICE=V([l,b,d,w,m,v,h,g,y]),J.ENGINE=J.OS=V([u,f]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==r&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var ot=it.exports;function rt(){const[e,t]=(0,o.useState)(null);return we((()=>{const e=new ot.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,r]=(0,o.useState)({width:null,height:null}),a=(0,o.useCallback)((()=>{r({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(re(a,n)),c=(0,o.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/e3446db6.02920187.js b/assets/js/e3446db6.02920187.js new file mode 100644 index 000000000..b1046d242 --- /dev/null +++ b/assets/js/e3446db6.02920187.js @@ -0,0 +1,2 @@ +/*! For license information please see e3446db6.02920187.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4660],{1386:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="useVhProperty",l={id:"react/hooks/useVhProperty",title:"useVhProperty",description:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useVhProperty.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useUserAgent",permalink:"/modern-kit/docs/react/hooks/useUserAgent"},next:{title:"useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange"}},u={},d=()=>{const e={div:"div",p:"p",...(0,r.a)()};(0,a.cM)();const t=(0,o.useMemo)((()=>({height:"calc(var(--vh, 1vh) * 100)",display:"flex",alignItems:"center",justifyContent:"center",background:"purple",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsx)(e.div,{style:t,children:(0,i.jsx)(e.p,{children:"100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4."})})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usevhproperty",children:"useVhProperty"})}),"\n",(0,i.jsx)(t.p,{children:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4."}),"\n",(0,i.jsxs)(t.p,{children:["\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(t.code,{children:"useVhProperty"})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uba74 ",(0,i.jsx)(t.code,{children:"100vh"}),"\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d css\ubcc0\uc218\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c iOS \ud658\uacbd\uc5d0\uc11c resize\ub294 \uac00\ub85c/\uc138\ub85c \uc804\ud658\uc2dc\uc5d0\ub9cc \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \uc778\uc790\uc758 ",(0,i.jsx)(t.code,{children:"enableResize"}),"\ub97c \uc635\uc158\uc744 \uc0ac\uc6a9\ud558\uba74 iOS \ud658\uacbd\uc5d0\uc11c\ub3c4 ",(0,i.jsx)(t.code,{children:"resize"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 css\ubcc0\uc218\ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVhProperty/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseVhPropertyProps {\n name?: string;\n enableResize?: boolean;\n}\n\nconst useVhProperty: ({ name, enableResize }?: UseVhPropertyProps) => void;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVhProperty } from '@modern-kit/react';\n\nconst Example = () => {\n useVhProperty(); \n // Resize: useVhProperty({ enableResize: true });\n\n const style: CSSProperties = useMemo(() => {\n return {\n height: 'calc(var(--vh, 1vh) * 100)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'purple',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n

100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4.

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>be,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Pe,Xs:()=>nt,Yz:()=>Ne,_:()=>Ve,a9:()=>ue,ac:()=>Fe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Ue,jr:()=>Te,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ee});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,h=w||p||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=m?m.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",C="[object Undefined]",E=m?m.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function P(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,I=/^0o[0-7]+$/i,z=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:S:E&&E in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(P(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=P(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||I.test(e)?z(e.slice(2),n?2:8):R.test(e)?N:+e}var A=function(){return h.Date.now()},$="Expected a function",V=Math.max,L=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=A();if(w(e))return h(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?L(n,o-(e-l)):n}(e))}function h(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function m(){var e=A(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,P(n)&&(u=!!n.leading,o=(d="maxWait"in n)?V(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h(A())},m}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},we=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);we((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Ee(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Te(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Pe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",_e="modern-kit-session-storage",Ie={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},ze=e=>Ie[e],Me=ze("localStorage"),Ae=e=>window.localStorage.getItem(e),$e=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Ve(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)($e,(()=>Ae(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ae(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Le=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Fe(e,t){const[n,i]=(0,r.useState)(Le(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ue(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Be=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Be)}}function De(){return Fe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=ze("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return P(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",h="mobile",m="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",C="BlackBerry",E="Browser",j="Chrome",O="Firefox",T="Google",P="Huawei",N="LG",R="Microsoft",_="Motorola",I="Opera",z="Samsung",M="Sharp",A="Sony",$="Xiaomi",V="Zebra",L="Facebook",F="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,b,c]),J.CPU=U([w]),J.DEVICE=U([l,f,d,p,h,v,m,g,y]),J.ENGINE=J.OS=U([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.20562a39.js.LICENSE.txt b/assets/js/e3446db6.02920187.js.LICENSE.txt similarity index 100% rename from assets/js/fbe6690a.20562a39.js.LICENSE.txt rename to assets/js/e3446db6.02920187.js.LICENSE.txt diff --git a/assets/js/e3446db6.bcdbdb6a.js b/assets/js/e3446db6.bcdbdb6a.js deleted file mode 100644 index abb4bd0bb..000000000 --- a/assets/js/e3446db6.bcdbdb6a.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see e3446db6.bcdbdb6a.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[4660],{1386:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>f});var i=n(1986),r=n(9937),o=n(7800),a=n(384);const s={},c="useVhProperty",l={id:"react/hooks/useVhProperty",title:"useVhProperty",description:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useVhProperty.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useVhProperty",permalink:"/modern-kit/docs/react/hooks/useVhProperty",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useUserAgent",permalink:"/modern-kit/docs/react/hooks/useUserAgent"},next:{title:"useVisibilityChange",permalink:"/modern-kit/docs/react/hooks/useVisibilityChange"}},u={},d=()=>{const e={div:"div",p:"p",...(0,r.a)()};(0,a.cM)();const t=(0,o.useMemo)((()=>({height:"calc(var(--vh, 1vh) * 100)",display:"flex",alignItems:"center",justifyContent:"center",background:"purple",fontSize:"2rem",color:"#fff"})),[]);return(0,i.jsx)(e.div,{style:t,children:(0,i.jsx)(e.p,{children:"100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4."})})},f=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usevhproperty",children:"useVhProperty"})}),"\n",(0,i.jsx)(t.p,{children:"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4."}),"\n",(0,i.jsxs)(t.p,{children:["\uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 ",(0,i.jsx)(t.code,{children:"useVhProperty"})," \ud6c5\uc744 \uc0ac\uc6a9\ud558\uba74 ",(0,i.jsx)(t.code,{children:"100vh"}),"\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d css\ubcc0\uc218\ub97c \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\uc77c\ubc18\uc801\uc73c\ub85c iOS \ud658\uacbd\uc5d0\uc11c resize\ub294 \uac00\ub85c/\uc138\ub85c \uc804\ud658\uc2dc\uc5d0\ub9cc \ubc1c\uc0dd\ud558\uc9c0\ub9cc, \ub450\ubc88\uc9f8 \uc778\uc790\uc758 ",(0,i.jsx)(t.code,{children:"enableResize"}),"\ub97c \uc635\uc158\uc744 \uc0ac\uc6a9\ud558\uba74 iOS \ud658\uacbd\uc5d0\uc11c\ub3c4 ",(0,i.jsx)(t.code,{children:"resize"})," \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c\ub9c8\ub2e4 css\ubcc0\uc218\ub97c \ub2e4\uc2dc \uacc4\uc0b0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useVhProperty/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"\ninterface UseVhPropertyProps {\n name?: string;\n enableResize?: boolean;\n}\n\nconst useVhProperty: ({ name, enableResize }?: UseVhPropertyProps) => void;\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useVhProperty } from '@modern-kit/react';\n\nconst Example = () => {\n useVhProperty(); \n // Resize: useVhProperty({ enableResize: true });\n\n const style: CSSProperties = useMemo(() => {\n return {\n height: 'calc(var(--vh, 1vh) * 100)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'purple',\n fontSize: '2rem',\n color: '#fff',\n }\n }, []);\n\n return (\n
\n

100vh\ub97c \uc2e4\uc81c \ud654\uba74\uc758 \ub192\uc774\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc90d\ub2c8\ub2e4.

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Be,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Ue,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Te,_:()=>Le,a9:()=>ue,ac:()=>$e,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Ve,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,T=/^\s+/;function P(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var N=NaN,R=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,z=/^0o[0-7]+$/i,I=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return N;if(P(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=P(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(T,""):e}(e);var n=_.test(e);return n||z.test(e)?I(e.slice(2),n?2:8):R.test(e)?N:+e}var L=function(){return m.Date.now()},A="Expected a function",$=Math.max,V=Math.min;function F(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?V(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=M(t)||0,P(n)&&(u=!!n.leading,o=(d="maxWait"in n)?$(M(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},B=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>F(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield B(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Te(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Pe="modern-kit-local-storage",Ne="modern-kit-session-storage",Re={localStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}},sessionStorage:{key:Ne,subscribe:e=>{window.addEventListener(Ne,e)},unsubscribe:e=>{window.removeEventListener(Ne,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ne))}}},_e=e=>Re[e],ze=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Me=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Me,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ie(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function $e(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Ve(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Fe=()=>navigator.onLine,qe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Fe,qe)}}function Xe(){return $e("(prefers-color-scheme: dark)")?"dark":"light"}function Be(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return P(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),F(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",T="Google",P="Huawei",N="LG",R="Microsoft",_="Motorola",z="Opera",I="Samsung",M="Sharp",L="Sony",A="Xiaomi",$="Zebra",V="Facebook",F="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,F).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,b,c]),J.CPU=U([w]),J.DEVICE=U([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=U([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/eb0f0f4b.52e82c64.js b/assets/js/eb0f0f4b.52e82c64.js new file mode 100644 index 000000000..5372ace28 --- /dev/null +++ b/assets/js/eb0f0f4b.52e82c64.js @@ -0,0 +1,2 @@ +/*! For license information please see eb0f0f4b.52e82c64.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1165],{919:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>w,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useNetwork",c={id:"react/hooks/useNetwork",title:"useNetwork",description:"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useNetwork.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useMouse",permalink:"/modern-kit/docs/react/hooks/useMouse"},next:{title:"useOutsidePointerDown",permalink:"/modern-kit/docs/react/hooks/useOutsidePointerDown"}},l={},u=()=>{const e={div:"div",p:"p",...(0,r.a)()},{isOnline:t}=(0,o.LN)({onlineCallback:()=>{alert("online")},offlineCallback:()=>{alert("offline")}});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694."}),(0,i.jsx)(e.p,{children:t?"\ud83d\udfe2 Online":"\u274c Offline"})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usenetwork",children:"useNetwork"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useSyncExternalStore"}),"\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"onlineCallback"}),", ",(0,i.jsx)(t.code,{children:"offlineCallback"}),"\uc744 \ud1b5\ud574 \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud0dc\uac00 \ubcc0\uacbd \ub420 \ub54c \uc6d0\ud558\ub294 \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useNetwork/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseNetworkProps {\n onlineCallback?: (event: Event) => void;\n offlineCallback?: (event: Event) => void;\n}\n\nconst useNetwork: ({ onlineCallback, offlineCallback }?: UseNetworkProps) => {\n isOnline: boolean;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useNetwork } from '@modern-kit/react';\n\nconst Example = () => {\n const { isOnline } = useNetwork({\n onlineCallback: () => {\n alert('online');\n },\n offlineCallback: () => {\n alert('offline');\n },\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694.

\n

{isOnline ? '\ud83d\udfe2 online' : '\u274c offline'}

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(en) - react.dev"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://ko.react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(ko) - react.dev"})}),"\n"]})]})}function w(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>me,Bg:()=>we,Cf:()=>Se,D9:()=>We,FS:()=>ct,GN:()=>je,Hk:()=>ye,KS:()=>ot,LN:()=>Ye,Mm:()=>xe,Nr:()=>oe,OR:()=>pe,Pr:()=>Ge,S1:()=>se,VP:()=>ke,XI:()=>Te,Xs:()=>nt,Yz:()=>_e,_:()=>Le,a9:()=>ue,ac:()=>qe,cM:()=>lt,df:()=>fe,fB:()=>rt,g4:()=>Ee,iP:()=>dt,ii:()=>Xe,jr:()=>Ne,my:()=>he,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>w,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>He,yn:()=>Oe,z$:()=>Ce});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const w=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var b="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=b||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,N=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var $=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError(A);function w(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function b(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=$();if(b(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?w(e):(i=r=void 0,a)}function h(){var e=$(),n=b(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?w(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),w(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m($())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[w,b]=(0,r.useState)(!1),p=!w,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),b(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const we=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},be=D()?r.useLayoutEffect:r.useEffect;function pe(e,t,n,i={}){const r=re(i),o=ne(n);be((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function me(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return pe(window.document,n,i),t}const he=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=me(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(we,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ye=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function xe(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ke(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function Se(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ee({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),w=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),b=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:w,resetStep:b}}function Ce(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ee({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function je(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Oe(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=je("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){be((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function _e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Re="modern-kit-local-storage",Ie="modern-kit-session-storage",Me={localStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}},sessionStorage:{key:Ie,subscribe:e=>{window.addEventListener(Ie,e)},unsubscribe:e=>{window.removeEventListener(Ie,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Ie))}}},Pe=e=>Me[e],ze=Pe("localStorage"),$e=e=>window.localStorage.getItem(e),Ae=e=>(ze.subscribe(e),()=>{ze.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>$e(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=$e(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),ze.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),ze.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function qe(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return pe(window.matchMedia(e),"change",o),n}const Ue={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Xe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(Ue),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,f=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,f=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:f})}),[]);return pe(window.document,"mousemove",i),{ref:e,position:t}}const Be=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,Ve)}}function De(){return qe("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function He(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function Ge({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return be((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Pe("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ee(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",w="version",b="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",N="Google",T="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",$="Sony",A="Xiaomi",L="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[w]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,w,c]),J.CPU=X([b]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,w]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return be((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){be((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return pe(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/eb0f0f4b.52e82c64.js.LICENSE.txt b/assets/js/eb0f0f4b.52e82c64.js.LICENSE.txt new file mode 100644 index 000000000..827f2732c --- /dev/null +++ b/assets/js/eb0f0f4b.52e82c64.js.LICENSE.txt @@ -0,0 +1,5 @@ +/*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ diff --git a/assets/js/eb0f0f4b.6a7d1b48.js b/assets/js/eb0f0f4b.6a7d1b48.js deleted file mode 100644 index b625dd54b..000000000 --- a/assets/js/eb0f0f4b.6a7d1b48.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see eb0f0f4b.6a7d1b48.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[1165],{919:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>u,assets:()=>l,contentTitle:()=>s,default:()=>b,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var i=n(1986),r=n(9937),o=n(384);const a={},s="useNetwork",c={id:"react/hooks/useNetwork",title:"useNetwork",description:"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useNetwork.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useNetwork",permalink:"/modern-kit/docs/react/hooks/useNetwork",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useMouse",permalink:"/modern-kit/docs/react/hooks/useMouse"},next:{title:"useOnClickOutside",permalink:"/modern-kit/docs/react/hooks/useOnClickOutside"}},l={},u=()=>{const e={div:"div",p:"p",...(0,r.a)()},{isOnline:t}=(0,o.LN)({onlineCallback:()=>{alert("online")},offlineCallback:()=>{alert("offline")}});return(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.p,{children:"\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694."}),(0,i.jsx)(e.p,{children:t?"\ud83d\udfe2 Online":"\u274c Offline"})]})},d=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2},{value:"Note",id:"note",level:2}];function f(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usenetwork",children:"useNetwork"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"useSyncExternalStore"}),"\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"onlineCallback"}),", ",(0,i.jsx)(t.code,{children:"offlineCallback"}),"\uc744 \ud1b5\ud574 \ub124\ud2b8\uc6cc\ud06c \uc0c1\ud0dc\uac00 \ubcc0\uacbd \ub420 \ub54c \uc6d0\ud558\ub294 \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useNetwork/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseNetworkProps {\n onlineCallback?: (event: Event) => void;\n offlineCallback?: (event: Event) => void;\n}\n\nconst useNetwork: ({ onlineCallback, offlineCallback }?: UseNetworkProps) => {\n isOnline: boolean;\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useNetwork } from '@modern-kit/react';\n\nconst Example = () => {\n const { isOnline } = useNetwork({\n onlineCallback: () => {\n alert('online');\n },\n offlineCallback: () => {\n alert('offline');\n },\n });\n\n return (\n
\n

\uac1c\ubc1c\uc790 \ub3c4\uad6c\uc758 \ub124\ud2b8\uc6cc\ud06c \ud0ed\uc5d0\uc11c \ub514\ubc14\uc774\uc2a4 \uc5f0\uacb0\uc744 \ub04a\uc5b4\ubcf4\uc138\uc694.

\n

{isOnline ? '\ud83d\udfe2 online' : '\u274c offline'}

\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(u,{}),"\n",(0,i.jsx)(t.h2,{id:"note",children:"Note"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(en) - react.dev"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://ko.react.dev/reference/react/useSyncExternalStore",children:"useSyncExternalStore(ko) - react.dev"})}),"\n"]})]})}function b(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>xe,D9:()=>Ve,FS:()=>ot,GN:()=>Ee,Hk:()=>ve,KS:()=>nt,LN:()=>Xe,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>ye,XI:()=>Oe,Xs:()=>Qe,Yz:()=>Ne,_:()=>Le,a9:()=>ue,ac:()=>Ae,cM:()=>at,df:()=>fe,fB:()=>tt,g4:()=>ke,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>we,nA:()=>he,oM:()=>d,oz:()=>Be,qQ:()=>Ge,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ce,z$:()=>Se});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function f(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>f()?(0,i.jsx)(i.Fragment,{children:t}):e;var w="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,m=w||p||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,y=v.toString,x=h?h.toStringTag:void 0,k=Object.prototype.toString,S="[object Null]",E="[object Undefined]",C=h?h.toStringTag:void 0;var j="[object Symbol]",O=/\s/,N=/^\s+/;function T(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var _=NaN,R=/^[-+]0x[0-9a-f]+$/i,I=/^0b[01]+$/i,M=/^0o[0-7]+$/i,P=parseInt;function z(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?E:S:C&&C in Object(e)?function(e){var t=g.call(e,x),n=e[x];try{e[x]=void 0;var i=!0}catch(e){}var r=y.call(e);return i&&(t?e[x]=n:delete e[x]),r}(e):function(e){return k.call(e)}(e)}(e)==j}(e))return _;if(T(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=T(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&O.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=I.test(e);return n||M.test(e)?P(e.slice(2),n?2:8):R.test(e)?_:+e}var L=function(){return m.Date.now()},$="Expected a function",A=Math.max,F=Math.min;function q(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,f=!0;if("function"!=typeof e)throw new TypeError($);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function w(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function p(){var e=L();if(w(e))return m(e);s=setTimeout(p,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,f&&i?b(e):(i=r=void 0,a)}function h(){var e=L(),n=w(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(p,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(p,t),b(c)}return void 0===s&&(s=setTimeout(p,t)),a}return t=z(t)||0,T(n)&&(u=!!n.leading,o=(d="maxWait"in n)?A(z(n.maxWait)||0,t):o,f="trailing"in n?!!n.trailing:f),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(L())},h}var U="Expected a function";function X(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const B={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const H=e=>X(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const G=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return G(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return G(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>q(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),f=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:f,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,f=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,w]=(0,r.useState)(!1),p=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:p?0:1,transition:`opacity ${u}`},l)),[p,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),w(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[p&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},f))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},fe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:f}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,f)},d,{children:e.children}))}));fe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const we=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),pe=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function ye(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return H(e);if(!("write"in window.navigator.clipboard))return H(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return H(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>X(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,B[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return X(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function xe(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function ke({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),f=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),w=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:f,goToPrevStep:b,resetStep:w}}function Se(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=ke({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ce(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){pe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Te="modern-kit-local-storage",_e="modern-kit-session-storage",Re={localStorage:{key:Te,subscribe:e=>{window.addEventListener(Te,e)},unsubscribe:e=>{window.removeEventListener(Te,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Te))}},sessionStorage:{key:_e,subscribe:e=>{window.addEventListener(_e,e)},unsubscribe:e=>{window.removeEventListener(_e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(_e))}}},Ie=e=>Re[e],Me=Ie("localStorage"),Pe=e=>window.localStorage.getItem(e),ze=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(ze,(()=>Pe(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Pe(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const $e=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Ae(e,t){const[n,i]=(0,r.useState)($e(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return pe((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const qe=()=>navigator.onLine,Ue=()=>!0;function Xe({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,qe,Ue)}}function Be(){return Ae("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return pe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const We=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,He=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+We(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+We(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+We(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+We(c.width,i.width,s)}};function Ge(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=He(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=Ie("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},ke(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(U);return T(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),q(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",f="vendor",b="version",w="architecture",p="console",m="mobile",h="tablet",v="smarttv",g="wearable",y="embedded",x="Amazon",k="Apple",S="ASUS",E="BlackBerry",C="Browser",j="Chrome",O="Firefox",N="Google",T="Huawei",_="LG",R="Microsoft",I="Motorola",M="Opera",P="Samsung",z="Sharp",L="Sony",$="Xiaomi",A="Zebra",F="Facebook",q="Chromium OS",U="Mac OS",X=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,y.os),x&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,q).replace(/macos/i,U)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=X([u,b,c]),J.CPU=X([w]),J.DEVICE=X([l,f,d,p,m,v,h,g,y]),J.ENGINE=J.OS=X([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return pe((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){pe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return pe((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/ee1f2119.57b9d1fe.js b/assets/js/ee1f2119.57b9d1fe.js deleted file mode 100644 index f94ec8f80..000000000 --- a/assets/js/ee1f2119.57b9d1fe.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7932],{2601:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduce","href":"/modern-kit/docs/introduce/","docId":"introduce/Introduce","unlisted":false},{"type":"category","label":"react","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AspectRatio","href":"/modern-kit/docs/react/components/AspectRatio","docId":"react/components/AspectRatio","unlisted":false},{"type":"link","label":"ClientOnly","href":"/modern-kit/docs/react/components/ClientOnly","docId":"react/components/ClientOnly","unlisted":false},{"type":"link","label":"DebounceWrapper","href":"/modern-kit/docs/react/components/DebounceWrapper","docId":"react/components/DebounceWrapper","unlisted":false},{"type":"link","label":"FallbackLazyImage","href":"/modern-kit/docs/react/components/FallbackLazyImage","docId":"react/components/FallbackLazyImage","unlisted":false},{"type":"link","label":"IfElse","href":"/modern-kit/docs/react/components/IfElse","docId":"react/components/IfElse","unlisted":false},{"type":"link","label":"InView","href":"/modern-kit/docs/react/components/InView","docId":"react/components/InView","unlisted":false},{"type":"link","label":"Iterator","href":"/modern-kit/docs/react/components/Iterator","docId":"react/components/Iterator","unlisted":false},{"type":"link","label":"LazyImage","href":"/modern-kit/docs/react/components/LazyImage","docId":"react/components/LazyImage","unlisted":false},{"type":"link","label":"OutsideClick","href":"/modern-kit/docs/react/components/OutsideClick","docId":"react/components/OutsideClick","unlisted":false},{"type":"link","label":"Portal","href":"/modern-kit/docs/react/components/Portal","docId":"react/components/Portal","unlisted":false},{"type":"link","label":"SeparatedIterator","href":"/modern-kit/docs/react/components/SeparatedIterator","docId":"react/components/SeparatedIterator","unlisted":false},{"type":"link","label":"SwitchCase","href":"/modern-kit/docs/react/components/SwithCase","docId":"react/components/SwithCase","unlisted":false},{"type":"link","label":"When","href":"/modern-kit/docs/react/components/When","docId":"react/components/When","unlisted":false}]},{"type":"category","label":"hooks","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"useAsyncPreservedCallback","href":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","docId":"react/hooks/useAsyncPreservedCallback","unlisted":false},{"type":"link","label":"useBlockPromiseMultipleClick","href":"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","docId":"react/hooks/useBlockPromiseMultipleClick","unlisted":false},{"type":"link","label":"useClipboard","href":"/modern-kit/docs/react/hooks/useClipboard","docId":"react/hooks/useClipboard","unlisted":false},{"type":"link","label":"useCounter","href":"/modern-kit/docs/react/hooks/useCounter","docId":"react/hooks/useCounter","unlisted":false},{"type":"link","label":"useCycleList","href":"/modern-kit/docs/react/hooks/useCycleList","docId":"react/hooks/useCycleList","unlisted":false},{"type":"link","label":"useDebounce","href":"/modern-kit/docs/react/hooks/useDebounce","docId":"react/hooks/useDebounce","unlisted":false},{"type":"link","label":"useDebouncedInputValue","href":"/modern-kit/docs/react/hooks/useDebouncedInputValue","docId":"react/hooks/useDebouncedInputValue","unlisted":false},{"type":"link","label":"useDebouncedState","href":"/modern-kit/docs/react/hooks/useDebouncedState","docId":"react/hooks/useDebouncedState","unlisted":false},{"type":"link","label":"useDocumentTitle","href":"/modern-kit/docs/react/hooks/useDocumentTitle","docId":"react/hooks/useDocumentTitle","unlisted":false},{"type":"link","label":"useFileReader","href":"/modern-kit/docs/react/hooks/useFileReader","docId":"react/hooks/useFileReader","unlisted":false},{"type":"link","label":"useForceUpdate","href":"/modern-kit/docs/react/hooks/useForceUpdate","docId":"react/hooks/useForceUpdate","unlisted":false},{"type":"link","label":"useHover","href":"/modern-kit/docs/react/hooks/useHover","docId":"react/hooks/useHover","unlisted":false},{"type":"link","label":"useImageStatus","href":"/modern-kit/docs/react/hooks/useImageStatus","docId":"react/hooks/useImageStatus","unlisted":false},{"type":"link","label":"useIntersectionObserver","href":"/modern-kit/docs/react/hooks/useIntersectionObserver","docId":"react/hooks/useIntersectionObserver","unlisted":false},{"type":"link","label":"useInterval","href":"/modern-kit/docs/react/hooks/useInterval","docId":"react/hooks/useInterval","unlisted":false},{"type":"link","label":"useIsMounted","href":"/modern-kit/docs/react/hooks/useIsMounted","docId":"react/hooks/useIsMounted","unlisted":false},{"type":"link","label":"useIsomorphicLayoutEffect","href":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","docId":"react/hooks/useIsomorphicLayoutEffect","unlisted":false},{"type":"link","label":"useKeyDown","href":"/modern-kit/docs/react/hooks/useKeyDown","docId":"react/hooks/useKeyDown","unlisted":false},{"type":"link","label":"useLocalStorage","href":"/modern-kit/docs/react/hooks/useLocalStorage","docId":"react/hooks/useLocalStorage","unlisted":false},{"type":"link","label":"useMediaQuery","href":"/modern-kit/docs/react/hooks/useMediaQuery","docId":"react/hooks/useMediaQuery","unlisted":false},{"type":"link","label":"useMergeRefs","href":"/modern-kit/docs/react/hooks/useMergeRefs","docId":"react/hooks/useMergeRefs","unlisted":false},{"type":"link","label":"useMouse","href":"/modern-kit/docs/react/hooks/useMouse","docId":"react/hooks/useMouse","unlisted":false},{"type":"link","label":"useNetwork","href":"/modern-kit/docs/react/hooks/useNetwork","docId":"react/hooks/useNetwork","unlisted":false},{"type":"link","label":"useOnClickOutside","href":"/modern-kit/docs/react/hooks/useOnClickOutside","docId":"react/hooks/useOnClickOutside","unlisted":false},{"type":"link","label":"usePreferredColorScheme","href":"/modern-kit/docs/react/hooks/usePreferredColorScheme","docId":"react/hooks/usePreferredColorScheme","unlisted":false},{"type":"link","label":"usePreservedCallback","href":"/modern-kit/docs/react/hooks/usePreservedCallback","docId":"react/hooks/usePreservedCallback","unlisted":false},{"type":"link","label":"usePreservedState","href":"/modern-kit/docs/react/hooks/usePreservedState","docId":"react/hooks/usePreservedState","unlisted":false},{"type":"link","label":"usePrevious","href":"/modern-kit/docs/react/hooks/usePrevious","docId":"react/hooks/usePrevious","unlisted":false},{"type":"link","label":"useResizeObserver","href":"/modern-kit/docs/react/hooks/useResizeObserver","docId":"react/hooks/useResizeObserver","unlisted":false},{"type":"link","label":"useScrollLock","href":"/modern-kit/docs/react/hooks/useScrollLock","docId":"react/hooks/useScrollLock","unlisted":false},{"type":"link","label":"useScrollTo","href":"/modern-kit/docs/react/hooks/useScrollTo","docId":"react/hooks/useScrollTo","unlisted":false},{"type":"link","label":"useSessionStorage","href":"/modern-kit/docs/react/hooks/useSessionStorage","docId":"react/hooks/useSessionStorage","unlisted":false},{"type":"link","label":"useStep","href":"/modern-kit/docs/react/hooks/useStep","docId":"react/hooks/useStep","unlisted":false},{"type":"link","label":"useStepState","href":"/modern-kit/docs/react/hooks/useStepState","docId":"react/hooks/useStepState","unlisted":false},{"type":"link","label":"useThrottle","href":"/modern-kit/docs/react/hooks/useThrottle","docId":"react/hooks/useThrottle","unlisted":false},{"type":"link","label":"useTimeout","href":"/modern-kit/docs/react/hooks/useTimeout","docId":"react/hooks/useTimeout","unlisted":false},{"type":"link","label":"useToggle","href":"/modern-kit/docs/react/hooks/useToggle","docId":"react/hooks/useToggle","unlisted":false},{"type":"link","label":"useUnMount","href":"/modern-kit/docs/react/hooks/useUnmount","docId":"react/hooks/useUnmount","unlisted":false},{"type":"link","label":"useUserAgent","href":"/modern-kit/docs/react/hooks/useUserAgent","docId":"react/hooks/useUserAgent","unlisted":false},{"type":"link","label":"useVhProperty","href":"/modern-kit/docs/react/hooks/useVhProperty","docId":"react/hooks/useVhProperty","unlisted":false},{"type":"link","label":"useVisibilityChange","href":"/modern-kit/docs/react/hooks/useVisibilityChange","docId":"react/hooks/useVisibilityChange","unlisted":false},{"type":"link","label":"useWindowSize","href":"/modern-kit/docs/react/hooks/useWindowSize","docId":"react/hooks/useWindowSize","unlisted":false}]}]},{"type":"category","label":"utils","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"array","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"chunk","href":"/modern-kit/docs/utils/array/chunk","docId":"utils/array/chunk","unlisted":false},{"type":"link","label":"compact","href":"/modern-kit/docs/utils/array/compact","docId":"utils/array/compact","unlisted":false},{"type":"link","label":"contains","href":"/modern-kit/docs/utils/array/contains","docId":"utils/array/contains","unlisted":false},{"type":"link","label":"countOccurrencesInArray","href":"/modern-kit/docs/utils/array/countOccurrencesInArray","docId":"utils/array/countOccurrencesInArray","unlisted":false},{"type":"link","label":"difference","href":"/modern-kit/docs/utils/array/difference","docId":"utils/array/difference","unlisted":false},{"type":"link","label":"drop","href":"/modern-kit/docs/utils/array/drop","docId":"utils/array/drop","unlisted":false},{"type":"link","label":"excludeElements","href":"/modern-kit/docs/utils/array/excludeElements","docId":"utils/array/excludeElements","unlisted":false},{"type":"link","label":"fill","href":"/modern-kit/docs/utils/array/fill","docId":"utils/array/fill","unlisted":false},{"type":"link","label":"flatMap","href":"/modern-kit/docs/utils/array/flatMap","docId":"utils/array/flatMap","unlisted":false},{"type":"link","label":"flatMapDeep","href":"/modern-kit/docs/utils/array/flatMapDeep","docId":"utils/array/flatMapDeep","unlisted":false},{"type":"link","label":"flatten","href":"/modern-kit/docs/utils/array/flatten","docId":"utils/array/flatten","unlisted":false},{"type":"link","label":"flattenDeep","href":"/modern-kit/docs/utils/array/flattenDeep","docId":"utils/array/flattenDeep","unlisted":false},{"type":"link","label":"flattenDeepThenMap","href":"/modern-kit/docs/utils/array/flattenDeepThenMap","docId":"utils/array/flattenDeepThenMap","unlisted":false},{"type":"link","label":"forEachRight","href":"/modern-kit/docs/utils/array/forEachRight","docId":"utils/array/forEachRight","unlisted":false},{"type":"link","label":"intersection","href":"/modern-kit/docs/utils/array/intersection","docId":"utils/array/intersection","unlisted":false},{"type":"link","label":"intersectionWithDuplicates","href":"/modern-kit/docs/utils/array/intersectionWithDuplicates","docId":"utils/array/intersectionWithDuplicates","unlisted":false},{"type":"link","label":"mapRight","href":"/modern-kit/docs/utils/array/mapRight","docId":"utils/array/mapRight","unlisted":false},{"type":"link","label":"partition","href":"/modern-kit/docs/utils/array/partition","docId":"utils/array/partition","unlisted":false},{"type":"link","label":"shuffle","href":"/modern-kit/docs/utils/array/shuffle","docId":"utils/array/shuffle","unlisted":false},{"type":"link","label":"swap","href":"/modern-kit/docs/utils/array/swap","docId":"utils/array/swap","unlisted":false},{"type":"link","label":"take","href":"/modern-kit/docs/utils/array/take","docId":"utils/array/take","unlisted":false},{"type":"link","label":"union","href":"/modern-kit/docs/utils/array/union","docId":"utils/array/union","unlisted":false},{"type":"link","label":"uniq","href":"/modern-kit/docs/utils/array/uniq","docId":"utils/array/uniq","unlisted":false}]},{"type":"category","label":"clipboard","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"copyClipboardImage","href":"/modern-kit/docs/utils/clipboard/copyClipboardImage","docId":"utils/clipboard/copyClipboardImage","unlisted":false},{"type":"link","label":"copyClipboardText","href":"/modern-kit/docs/utils/clipboard/copyClipboardText","docId":"utils/clipboard/copyClipboardText","unlisted":false},{"type":"link","label":"copyFallbackClipboardText","href":"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","docId":"utils/clipboard/copyFallbackClipboardText","unlisted":false},{"type":"link","label":"readClipboardContents","href":"/modern-kit/docs/utils/clipboard/readClipboardContents","docId":"utils/clipboard/readClipboardContents","unlisted":false},{"type":"link","label":"readClipboardText","href":"/modern-kit/docs/utils/clipboard/readClipboardText","docId":"utils/clipboard/readClipboardText","unlisted":false}]},{"type":"category","label":"common","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"abRandom","href":"/modern-kit/docs/utils/common/abRandom","docId":"utils/common/abRandom","unlisted":false},{"type":"link","label":"asyncNoop","href":"/modern-kit/docs/utils/common/asyncNoop","docId":"utils/common/asyncNoop","unlisted":false},{"type":"link","label":"deepCopy","href":"/modern-kit/docs/utils/common/deepCopy","docId":"utils/common/deepCopy","unlisted":false},{"type":"link","label":"delay","href":"/modern-kit/docs/utils/common/delay","docId":"utils/common/delay","unlisted":false},{"type":"link","label":"getUniqId","href":"/modern-kit/docs/utils/common/getUniqId","docId":"utils/common/getUniqId","unlisted":false},{"type":"link","label":"getUniqTime","href":"/modern-kit/docs/utils/common/getUniqTime","docId":"utils/common/getUniqTime","unlisted":false},{"type":"link","label":"getViewportSize","href":"/modern-kit/docs/utils/common/getViewportSize","docId":"utils/common/getViewportSize","unlisted":false},{"type":"link","label":"hexToRgba","href":"/modern-kit/docs/utils/common/hexToRgba","docId":"utils/common/hexToRgba","unlisted":false},{"type":"link","label":"identity","href":"/modern-kit/docs/utils/common/identity","docId":"utils/common/identity","unlisted":false},{"type":"link","label":"noop","href":"/modern-kit/docs/utils/common/noop","docId":"utils/common/noop","unlisted":false},{"type":"link","label":"once","href":"/modern-kit/docs/utils/common/once","docId":"utils/common/once","unlisted":false},{"type":"link","label":"parseJSON","href":"/modern-kit/docs/utils/common/parseJSON","docId":"utils/common/parseJSON","unlisted":false},{"type":"link","label":"pickFalsy","href":"/modern-kit/docs/utils/common/pickFalsy","docId":"utils/common/pickFalsy","unlisted":false},{"type":"link","label":"size","href":"/modern-kit/docs/utils/common/size","docId":"utils/common/size","unlisted":false},{"type":"link","label":"wrapInArray","href":"/modern-kit/docs/utils/common/wrapInArray","docId":"utils/common/wrapInArray","unlisted":false}]},{"type":"category","label":"device","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getOS","href":"/modern-kit/docs/utils/device/getOS","docId":"utils/device/getOS","unlisted":false},{"type":"link","label":"isClient","href":"/modern-kit/docs/utils/device/isClient","docId":"utils/device/isClient","unlisted":false},{"type":"link","label":"isMobile","href":"/modern-kit/docs/utils/device/isMobile","docId":"utils/device/isMobile","unlisted":false},{"type":"link","label":"isServer","href":"/modern-kit/docs/utils/device/isSever","docId":"utils/device/isSever","unlisted":false}]},{"type":"category","label":"file","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"convertImageToBase64","href":"/modern-kit/docs/utils/file/convertImageToBase64","docId":"utils/file/convertImageToBase64","unlisted":false},{"type":"link","label":"convertImageToBlob","href":"/modern-kit/docs/utils/file/convertImageToBlob","docId":"utils/file/convertImageToBlob","unlisted":false},{"type":"link","label":"getBlobFromUrl","href":"/modern-kit/docs/utils/file/getBlobFromUrl","docId":"utils/file/getBlobFromUrl","unlisted":false},{"type":"link","label":"getMIMEType","href":"/modern-kit/docs/utils/file/getMIMEType","docId":"utils/file/getMIMEType","unlisted":false},{"type":"link","label":"getMIMETypeFromFile","href":"/modern-kit/docs/utils/file/getMIMETypeFromFile","docId":"utils/file/getMIMETypeFromFile","unlisted":false},{"type":"link","label":"getMIMETypeFromResponse","href":"/modern-kit/docs/utils/file/getMIMETypeFromResponse","docId":"utils/file/getMIMETypeFromResponse","unlisted":false},{"type":"link","label":"getMIMETypeFromUrl","href":"/modern-kit/docs/utils/file/getMIMETypeFromUrl","docId":"utils/file/getMIMETypeFromUrl","unlisted":false}]},{"type":"category","label":"formatter","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"formatNumberByUnits","href":"/modern-kit/docs/utils/formatter/formatNumberByUnits","docId":"utils/formatter/formatNumberByUnits","unlisted":false},{"type":"link","label":"formatNumberCurrency","href":"/modern-kit/docs/utils/formatter/formatNumberCurrency","docId":"utils/formatter/formatNumberCurrency","unlisted":false},{"type":"link","label":"formatNumberWithCommas","href":"/modern-kit/docs/utils/formatter/formatNumberWithCommas","docId":"utils/formatter/formatNumberWithCommas","unlisted":false},{"type":"link","label":"formatPhoneNumber","href":"/modern-kit/docs/utils/formatter/formatPhoneNumber","docId":"utils/formatter/formatPhoneNumber","unlisted":false}]},{"type":"category","label":"math","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"average","href":"/modern-kit/docs/utils/math/average","docId":"utils/math/average","unlisted":false},{"type":"link","label":"max","href":"/modern-kit/docs/utils/math/max","docId":"utils/math/max","unlisted":false},{"type":"link","label":"min","href":"/modern-kit/docs/utils/math/min","docId":"utils/math/min","unlisted":false},{"type":"link","label":"range","href":"/modern-kit/docs/utils/math/range","docId":"utils/math/range","unlisted":false},{"type":"link","label":"sum","href":"/modern-kit/docs/utils/math/sum","docId":"utils/math/sum","unlisted":false}]},{"type":"category","label":"object","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"deleteEmptyProperties","href":"/modern-kit/docs/utils/object/deleteEmptyProperties","docId":"utils/object/deleteEmptyProperties","unlisted":false},{"type":"link","label":"groupBy","href":"/modern-kit/docs/utils/object/groupBy","docId":"utils/object/groupBy","unlisted":false},{"type":"link","label":"invert","href":"/modern-kit/docs/utils/object/invert","docId":"utils/object/invert","unlisted":false},{"type":"link","label":"mapKeys","href":"/modern-kit/docs/utils/object/mapKeys","docId":"utils/object/mapKeys","unlisted":false},{"type":"link","label":"mapValues","href":"/modern-kit/docs/utils/object/mapValues","docId":"utils/object/mapValues","unlisted":false},{"type":"link","label":"mergeProperties","href":"/modern-kit/docs/utils/object/mergeProperties","docId":"utils/object/mergeProperties","unlisted":false},{"type":"link","label":"objectEntries","href":"/modern-kit/docs/utils/object/objectEntries","docId":"utils/object/objectEntries","unlisted":false},{"type":"link","label":"objectKeys","href":"/modern-kit/docs/utils/object/objectKeys","docId":"utils/object/objectKeys","unlisted":false},{"type":"link","label":"objectValues","href":"/modern-kit/docs/utils/object/objectValues","docId":"utils/object/objectValues","unlisted":false},{"type":"link","label":"omit","href":"/modern-kit/docs/utils/object/omit","docId":"utils/object/omit","unlisted":false},{"type":"link","label":"pick","href":"/modern-kit/docs/utils/object/pick","docId":"utils/object/pick","unlisted":false}]},{"type":"category","label":"string","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"countSubstringOccurrences","href":"/modern-kit/docs/utils/string/countSubstringOccurrences","docId":"utils/string/countSubstringOccurrences","unlisted":false},{"type":"link","label":"extractLetters","href":"/modern-kit/docs/utils/string/extractLetters","docId":"utils/string/extractLetters","unlisted":false},{"type":"link","label":"extractNumber","href":"/modern-kit/docs/utils/string/extractNumber","docId":"utils/string/extractNumber","unlisted":false},{"type":"link","label":"removeSpecialCharacters","href":"/modern-kit/docs/utils/string/removeSpecialCharacters","docId":"utils/string/removeSpecialCharacters","unlisted":false},{"type":"link","label":"repeatCharacters","href":"/modern-kit/docs/utils/string/repeatCharacters","docId":"utils/string/repeatCharacters","unlisted":false},{"type":"link","label":"reverseString","href":"/modern-kit/docs/utils/string/reverseString","docId":"utils/string/reverseString","unlisted":false},{"type":"link","label":"serialize","href":"/modern-kit/docs/utils/string/serialize","docId":"utils/string/serialize","unlisted":false}]},{"type":"category","label":"style","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"rem","href":"/modern-kit/docs/utils/style/rem","docId":"utils/style/rem","unlisted":false}]},{"type":"category","label":"validator","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"hasProperty","href":"/modern-kit/docs/utils/validator/hasProperty","docId":"utils/validator/hasProperty","unlisted":false},{"type":"link","label":"isArray","href":"/modern-kit/docs/utils/validator/isArray","docId":"utils/validator/isArray","unlisted":false},{"type":"link","label":"isBoolean","href":"/modern-kit/docs/utils/validator/isBoolean","docId":"utils/validator/isBoolean","unlisted":false},{"type":"link","label":"isEqual","href":"/modern-kit/docs/utils/validator/isEqual","docId":"utils/validator/isEqual","unlisted":false},{"type":"link","label":"isFloat","href":"/modern-kit/docs/utils/validator/isFloat","docId":"utils/validator/isFloat","unlisted":false},{"type":"link","label":"isFunction","href":"/modern-kit/docs/utils/validator/isFuntion","docId":"utils/validator/isFuntion","unlisted":false},{"type":"link","label":"isInRange","href":"/modern-kit/docs/utils/validator/isInRange","docId":"utils/validator/isInRange","unlisted":false},{"type":"link","label":"isMIMEType","href":"/modern-kit/docs/utils/validator/isMIMEType","docId":"utils/validator/isMIMEType","unlisted":false},{"type":"link","label":"isNil","href":"/modern-kit/docs/utils/validator/isNil","docId":"utils/validator/isNil","unlisted":false},{"type":"link","label":"isNotNil","href":"/modern-kit/docs/utils/validator/isNotNil","docId":"utils/validator/isNotNil","unlisted":false},{"type":"link","label":"isNumber","href":"/modern-kit/docs/utils/validator/isNumber","docId":"utils/validator/isNumber","unlisted":false},{"type":"link","label":"isNumericString","href":"/modern-kit/docs/utils/validator/isNumericString","docId":"utils/validator/isNumericString","unlisted":false},{"type":"link","label":"isPlainObject","href":"/modern-kit/docs/utils/validator/isPlainObject","docId":"utils/validator/isPlainObject","unlisted":false},{"type":"link","label":"isPrimitive","href":"/modern-kit/docs/utils/validator/isPrimitive","docId":"utils/validator/isPrimitive","unlisted":false},{"type":"link","label":"isPromise","href":"/modern-kit/docs/utils/validator/isPromise","docId":"utils/validator/isPromise","unlisted":false},{"type":"link","label":"isReference","href":"/modern-kit/docs/utils/validator/isReference","docId":"utils/validator/isReference","unlisted":false},{"type":"link","label":"isString","href":"/modern-kit/docs/utils/validator/isString","docId":"utils/validator/isString","unlisted":false},{"type":"link","label":"isSubset","href":"/modern-kit/docs/utils/validator/isSubset","docId":"utils/validator/isSubset","unlisted":false},{"type":"link","label":"isValidEmail","href":"/modern-kit/docs/utils/validator/isValidEmail","docId":"utils/validator/isValidEmail","unlisted":false},{"type":"link","label":"isValidPassword","href":"/modern-kit/docs/utils/validator/isValidPassword","docId":"utils/validator/isValidPassword","unlisted":false},{"type":"link","label":"isValidPhoneNumberFormat","href":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","docId":"utils/validator/isValidPhoneNumberFormat","unlisted":false},{"type":"link","label":"isWindow","href":"/modern-kit/docs/utils/validator/isWindow","docId":"utils/validator/isWindow","unlisted":false}]}]}]},"docs":{"introduce/Introduce":{"id":"introduce/Introduce","title":"\uc18c\uac1c","description":"@modern-kit\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac1c\ubc1c\uc5d0 \uc720\uc6a9\ud55c \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8, \ucee4\uc2a4\ud140 \ud6c5 \ubc0f \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218, \ud0c0\uc785\uc744 \uc81c\uacf5\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/AspectRatio":{"id":"react/components/AspectRatio","title":"AspectRatio","description":"\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 aspect-ratio \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/ClientOnly":{"id":"react/components/ClientOnly","title":"ClientOnly","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/DebounceWrapper":{"id":"react/components/DebounceWrapper","title":"DebounceWrapper","description":"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/FallbackLazyImage":{"id":"react/components/FallbackLazyImage","title":"FallbackLazyImage","description":"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/IfElse":{"id":"react/components/IfElse","title":"IfElse","description":"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/InView":{"id":"react/components/InView","title":"InView","description":"InView\ub294 useIntersectionObserver \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Iterator":{"id":"react/components/Iterator","title":"Iterator","description":"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/LazyImage":{"id":"react/components/LazyImage","title":"LazyImage","description":"useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/OutsideClick":{"id":"react/components/OutsideClick","title":"OutsideClick","description":"useOutsideClickEffect\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Portal":{"id":"react/components/Portal","title":"Portal","description":"Portal \ucef4\ud3ec\ub10c\ud2b8\ub294 React.createPortal\uc744 \uc0ac\uc6a9\ud574 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 DOM \uacc4\uce35 \uad6c\uc870 \uc678\ubd80\uc758 DOM \ub178\ub4dc\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/SeparatedIterator":{"id":"react/components/SeparatedIterator","title":"SeparatedIterator","description":"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/SwithCase":{"id":"react/components/SwithCase","title":"SwitchCase","description":"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/When":{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useAsyncPreservedCallback":{"id":"react/hooks/useAsyncPreservedCallback","title":"useAsyncPreservedCallback","description":"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useBlockPromiseMultipleClick":{"id":"react/hooks/useBlockPromiseMultipleClick","title":"useBlockPromiseMultipleClick","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useClipboard":{"id":"react/hooks/useClipboard","title":"useClipboard","description":"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useCounter":{"id":"react/hooks/useCounter","title":"useCounter","description":"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useCycleList":{"id":"react/hooks/useCycleList","title":"useCycleList","description":"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebounce":{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebouncedInputValue":{"id":"react/hooks/useDebouncedInputValue","title":"useDebouncedInputValue","description":"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4","sidebar":"tutorialSidebar"},"react/hooks/useDebouncedState":{"id":"react/hooks/useDebouncedState","title":"useDebouncedState","description":"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDocumentTitle":{"id":"react/hooks/useDocumentTitle","title":"useDocumentTitle","description":"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useFileReader":{"id":"react/hooks/useFileReader","title":"useFileReader","description":"File \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(readAsText,readAsDataURL,readAsArrayBuffer)\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useForceUpdate":{"id":"react/hooks/useForceUpdate","title":"useForceUpdate","description":"\ubc18\ud658\ub41c \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba74 \uac15\uc81c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1 \uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useHover":{"id":"react/hooks/useHover","title":"useHover","description":"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useImageStatus":{"id":"react/hooks/useImageStatus","title":"useImageStatus","description":"\ubc18\ud658\ub41c ref\ub97c ` \ud0dc\uadf8\uc5d0 \ud560\ub2f9\ud558\uba74 \uc774\ubbf8\uc9c0 \ub85c\ub4dc\ud558\ub294 \uacfc\uc815\uc5d0\uc11c pending, loading, complete, error` \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIntersectionObserver":{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useInterval":{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsMounted":{"id":"react/hooks/useIsMounted","title":"useIsMounted","description":"\ub9c8\uc6b4\ud2b8\ub41c \uc0c1\ud0dc\uc778\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub294 \uc0c1\ud0dc \uac12\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsomorphicLayoutEffect":{"id":"react/hooks/useIsomorphicLayoutEffect","title":"useIsomorphicLayoutEffect","description":"useIsomorphicLayoutEffect\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1 \ud658\uacbd\uc5d0\uc11c\ub3c4 \ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \ubcf4\uc7a5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useKeyDown":{"id":"react/hooks/useKeyDown","title":"useKeyDown","description":"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useLocalStorage":{"id":"react/hooks/useLocalStorage","title":"useLocalStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMediaQuery":{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMergeRefs":{"id":"react/hooks/useMergeRefs","title":"useMergeRefs","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uc5ec\ub7ec \uac1c\uc758 ref\ub97c \ud558\ub098\ub85c \ubcd1\ud569\ud560 \ub54c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMouse":{"id":"react/hooks/useMouse","title":"useMouse","description":"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useNetwork":{"id":"react/hooks/useNetwork","title":"useNetwork","description":"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useOnClickOutside":{"id":"react/hooks/useOnClickOutside","title":"useOnClickOutside","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8 \uc678\ubd80 \uc694\uc18c\ub97c \ud074\ub9ad \ud560 \uacbd\uc6b0 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreferredColorScheme":{"id":"react/hooks/usePreferredColorScheme","title":"usePreferredColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light, \ub610\ub294 no-preference\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedCallback":{"id":"react/hooks/usePreservedCallback","title":"usePreservedCallback","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 \ucc38\uc870\ub97c \uc720\uc9c0\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedState":{"id":"react/hooks/usePreservedState","title":"usePreservedState","description":"\uc8fc\uc5b4\uc9c4 \uac12\uacfc \ube44\uad50 \ud568\uc218(comparator)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \ubcf4\uc874\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePrevious":{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useResizeObserver":{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useScrollLock":{"id":"react/hooks/useScrollLock","title":"useScrollLock","description":"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useScrollTo":{"id":"react/hooks/useScrollTo","title":"useScrollTo","description":"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useSessionStorage":{"id":"react/hooks/useSessionStorage","title":"useSessionStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useStep":{"id":"react/hooks/useStep","title":"useStep","description":"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useStepState":{"id":"react/hooks/useStepState","title":"useStepState","description":"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useThrottle":{"id":"react/hooks/useThrottle","title":"useThrottle","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useTimeout":{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useToggle":{"id":"react/hooks/useToggle","title":"useToggle","description":"boolean \ud0c0\uc785\uc758 state\ub97c Toggle\ub85c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUnmount":{"id":"react/hooks/useUnmount","title":"useUnMount","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUserAgent":{"id":"react/hooks/useUserAgent","title":"useUserAgent","description":"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVhProperty":{"id":"react/hooks/useVhProperty","title":"useVhProperty","description":"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVisibilityChange":{"id":"react/hooks/useVisibilityChange","title":"useVisibilityChange","description":"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowSize":{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/chunk":{"id":"utils/array/chunk","title":"chunk","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \uc9c0\uc815\ub41c size\ub9cc\ud07c\uc758 \uc791\uc740 \ubc30\uc5f4\ub85c \ub098\ub204\uc5b4 \ubc18\ud658\ud558\ub294 \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/compact":{"id":"utils/array/compact","title":"compact","description":"\ubc30\uc5f4\uc5d0\uc11c false, 0, \'\', null, undefined \uac12\uc744 \uc81c\uac70\ud558\uace0 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/contains":{"id":"utils/array/contains","title":"contains","description":"\uccab \ubc88\uc9f8 \uc778\uc790\ub85c \ub118\uae34 \ubc30\uc5f4\uc5d0 \ud2b9\uc815 \uc694\uc18c\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\ub294\uc9c0 \ud310\ub2e8\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/countOccurrencesInArray":{"id":"utils/array/countOccurrencesInArray","title":"countOccurrencesInArray","description":"\uc785\ub825\ud55c \ubc30\uc5f4\uc5d0\uc11c \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\ub4e4\uc774 \ub4f1\uc7a5\ud55c \ud69f\uc218\ub97c \uce74\uc6b4\ud305 \ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/difference":{"id":"utils/array/difference","title":"difference","description":"\uccab\ubc88\uc9f8 \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c \ub450\ubc88\uc9f8 \ubc30\uc5f4\uacfc \uc911\ubcf5\ub41c \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/drop":{"id":"utils/array/drop","title":"drop","description":"\ubc30\uc5f4\uc758 \uccab \uc694\uc18c\ubd80\ud130 n\uac1c\uc758 \uc694\uc18c\uac00 \uc0ad\uc81c\ub41c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/excludeElements":{"id":"utils/array/excludeElements","title":"excludeElements","description":"1\ubc88\uc9f8 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ub41c \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c 2\ubc88\uc9f8 \ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc744 \uc81c\uc678\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/fill":{"id":"utils/array/fill","title":"fill","description":"\ubc30\uc5f4\uc744 \uc9c0\uc815\ud55c \uac12\uc73c\ub85c \ucc44\uc6c1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatMap":{"id":"utils/array/flatMap","title":"flatMap","description":"\uac01 \ubc30\uc5f4 \uc694\uc18c\ub97c iteratee \ud568\uc218\ub85c \ub9e4\ud551\ud558\uace0 \uc9c0\uc815\ub41c \uae4a\uc774\uae4c\uc9c0 \uacb0\uacfc\ub97c \ud3c9\ud0c4\ud654\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatMapDeep":{"id":"utils/array/flatMapDeep","title":"flatMapDeep","description":"\uc8fc\uc5b4\uc9c4 iteratee \ud568\uc218\ub85c \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\ub97c \uc7ac\uadc0\uc801\uc73c\ub85c \ub9e4\ud551\ud55c \ud6c4, \uacb0\uacfc \ubc30\uc5f4\uc744 \uae4a\uac8c \ud3c9\ud0c4\ud654\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatten":{"id":"utils/array/flatten","title":"flatten","description":"\uc911\ucca9 \ubc30\uc5f4\uc744 \uc9c0\uc815\ub41c \uae4a\uc774\uae4c\uc9c0 \ud3c9\ud0c4\ud654 \ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flattenDeep":{"id":"utils/array/flattenDeep","title":"flattenDeep","description":"flatten \uc744 \uae30\ubc18\uc73c\ub85c \uc8fc\uc5b4\uc9c4 \uc911\ucca9 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uae4a\uc774\ub97c \ud3c9\ud0c4\ud654\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flattenDeepThenMap":{"id":"utils/array/flattenDeepThenMap","title":"flattenDeepThenMap","description":"\uc911\ucca9 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uae4a\uc774\ub97c \ud3c9\ud0c4\ud654 \ud55c \ud6c4 \uc81c\uacf5\ub41c iteratee \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \uc694\uc18c\ub97c \ub9e4\ud551\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/forEachRight":{"id":"utils/array/forEachRight","title":"forEachRight","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc21c\ud68c\ud558\uba70 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/intersection":{"id":"utils/array/intersection","title":"intersection","description":"\ub450 \ubc30\uc5f4 \ub0b4\uc5d0\uc11c \ub3d9\uc77c\ud558\uac8c \uc874\uc7ac\ud558\ub294, \uad50\ucc28\ub41c \uac12\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/intersectionWithDuplicates":{"id":"utils/array/intersectionWithDuplicates","title":"intersectionWithDuplicates","description":"\ub450 \ubc30\uc5f4 \ub0b4\uc5d0\uc11c \ub3d9\uc77c\ud558\uac8c \uc874\uc7ac\ud558\ub294, \uad50\ucc28\ub41c \uac12\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/mapRight":{"id":"utils/array/mapRight","title":"mapRight","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc21c\ud68c\ud558\uba70 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0, \uacb0\uacfc\ub97c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\ub85c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/partition":{"id":"utils/array/partition","title":"partition","description":"\uccab \ubc88\uc9f8 \uc778\uc790\uc758 \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c 2\ubc88\uc9f8 \uc778\uc790\uc778 predicate \ud568\uc218\uac00 true\ub97c \ubc18\ud658\ud558\ub294 \uc694\uc18c\ub4e4\uc758 \ubaa8\uc74c\uacfc false\ub97c \ubc18\ud658\ud558\ub294 \uc694\uc18c\ub4e4\uc758 \ubaa8\uc74c \ub450 \uadf8\ub8f9\uc73c\ub85c \ub098\ub208 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/shuffle":{"id":"utils/array/shuffle","title":"shuffle","description":"\ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc758 \uc21c\uc11c\ub97c \ubb34\uc791\uc704\ub85c \uc11e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/swap":{"id":"utils/array/swap","title":"swap","description":"\ubc30\uc5f4 \ub0b4 \ub450 \uc694\uc18c\uc758 \uc704\uce58\ub97c \uad50\ud658\ud558\uba70, \uc635\uc158\uc5d0 \ub530\ub77c \uc6d0\ubcf8 \ubc30\uc5f4\uc744 \uc218\uc815\ud558\uac70\ub098 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/take":{"id":"utils/array/take","title":"take","description":"\ubc30\uc5f4\uc758 \uccab \uc694\uc18c\ubd80\ud130 n\uac1c\uc758 \uc694\uc18c\ub97c \uac00\uc838\uc628 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/union":{"id":"utils/array/union","title":"union","description":"\ub450 \ubc30\uc5f4\uc744 \uacb0\ud569 \ud6c4, \uc911\ubcf5 \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/uniq":{"id":"utils/array/uniq","title":"uniq","description":"\uc911\ubcf5 \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyClipboardImage":{"id":"utils/clipboard/copyClipboardImage","title":"copyClipboardImage","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \uc774\ubbf8\uc9c0 \uc18c\uc2a4\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0\ub97c \uc77d\uc5b4 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyClipboardText":{"id":"utils/clipboard/copyClipboardText","title":"copyClipboardText","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \ubb38\uc790\uc5f4\uc744 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. Clipboard API\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \ube0c\ub77c\uc6b0\uc800 \ud658\uacbd\uc77c \uacbd\uc6b0 clipboardFallbackTextCopy\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyFallbackClipboardText":{"id":"utils/clipboard/copyFallbackClipboardText","title":"copyFallbackClipboardText","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \ubb38\uc790\uc5f4\uc744 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/readClipboardContents":{"id":"utils/clipboard/readClipboardContents","title":"readClipboardContents","description":"Clipboard\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/readClipboardText":{"id":"utils/clipboard/readClipboardText","title":"readClipboardText","description":"Clipboard\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/abRandom":{"id":"utils/common/abRandom","title":"abRandom","description":"50% \ud655\ub960\ub85c 0\ub610\ub294 1\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/asyncNoop":{"id":"utils/common/asyncNoop","title":"asyncNoop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, Promise\ub97c \ubc18\ud658\ud558\ub294 async \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepCopy":{"id":"utils/common/deepCopy","title":"deepCopy","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uac12\uc744 \uae4a\uc740 \ubcf5\uc0ac\ub97c \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/delay":{"id":"utils/common/delay","title":"delay","description":"\uc8fc\uc5b4\uc9c4 \uc2dc\uac04\ub9cc\ud07c \uae30\ub2e4\ub9b0 \ub4a4 \ub2e4\uc74c \ub3d9\uc791\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqId":{"id":"utils/common/getUniqId","title":"getUniqId","description":"\uc720\ub2c8\ud06c\ud55c \uc544\uc774\ub514\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqTime":{"id":"utils/common/getUniqTime","title":"getUniqTime","description":"\uae30\ubcf8\uc801\uc73c\ub85c new Date().getTime() \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc774\uc9c0\ub9cc, \ub3d9\uc77c \uc2dc\uac04\uc5d0 \uc5ec\ub7ec\ubc88 \ud638\ucd9c \ud560 \uacbd\uc6b0 \uc720\ub2c8\ud06c \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getViewportSize":{"id":"utils/common/getViewportSize","title":"getViewportSize","description":"\ud604\uc7ac Viewport Size\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/hexToRgba":{"id":"utils/common/hexToRgba","title":"hexToRgba","description":"16\uc9c4\uc218 \uc0c9\uc0c1 \ucf54\ub4dc(Hex)\ub97c RGB\ud615\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. (HEX -> RGB)","sidebar":"tutorialSidebar"},"utils/common/identity":{"id":"utils/common/identity","title":"identity","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uac12\uc744 \uadf8\ub300\ub85c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/noop":{"id":"utils/common/noop","title":"noop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, undefined\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/once":{"id":"utils/common/once","title":"once","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud55c \ubc88\ub9cc \uc2e4\ud589\ud558\uac8c \ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uccab \ubc88\uc9f8 \ud638\ucd9c \uc774\ud6c4\uc5d0\ub294 \uc774\uc804\uc5d0 \uc2e4\ud589\ub41c \uacb0\uacfc\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/parseJSON":{"id":"utils/common/parseJSON","title":"parseJSON","description":"\ubb38\uc790\uc5f4 \uc678\uc758 \ud0c0\uc785\uc740 \uadf8\ub300\ub85c \ubc18\ud658\ud558\uba70, \ubb38\uc790\uc5f4\uc778 \uacbd\uc6b0 \uc815\ud655\ud55c JSON Format\uc73c\ub85c \ub118\uae38 \uacbd\uc6b0 \ud574\ub2f9 \ubb38\uc790\uc5f4\uc744 JSON.parse\ub85c \ubcc0\ud658 \ud6c4 \ubc18\ud658\ub41c \uac12\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \ub9cc\uc57d \uc815\ud655\ud55c JSON Format\uc774 \uc544\ub2cc \uacbd\uc6b0 \uc5d0\ub7ec\ub97c \ubc1c\uc0dd\uc2dc\ud0b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/pickFalsy":{"id":"utils/common/pickFalsy","title":"pickFalsy","description":"\uc120\ud0dd\ud55c \ud0c0\uc785\uc5d0 \ub300\ud55c falsy \uccb4\ud06c \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/size":{"id":"utils/common/size","title":"size","description":"\uc8fc\uc5b4\uc9c4 \uac12\uc758 \ud06c\uae30\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \ud06c\uae30\ub294 \uac12\uc758 \uc720\ud615\uc5d0 \ub530\ub77c \uacb0\uc815\ub429\ub2c8\ub2e4:","sidebar":"tutorialSidebar"},"utils/common/wrapInArray":{"id":"utils/common/wrapInArray","title":"wrapInArray","description":"\ubc30\uc5f4\uc774 \uc544\ub2c8\ub77c\uba74 \ub798\ud551\ub41c \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\uace0, \ubc30\uc5f4\uc774\ub77c\uba74 \ub798\ud551\ud558\uc9c0 \uc54a\uace0 \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/getOS":{"id":"utils/device/getOS","title":"getOS","description":"userAgent\ub97c \uae30\ubc18\uc73c\ub85c OS \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isClient":{"id":"utils/device/isClient","title":"isClient","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isMobile":{"id":"utils/device/isMobile","title":"isMobile","description":"\ubaa8\ubc14\uc77c \ud658\uacbd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isSever":{"id":"utils/device/isSever","title":"isServer","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \uc11c\ubc84(Node.js)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/convertImageToBase64":{"id":"utils/file/convertImageToBase64","title":"convertImageToBase64","description":"\uc774\ubbf8\uc9c0\ub97c canvas\ub97c \ud65c\uc6a9\ud574 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0 \ud3ec\ub9f7(png, jpeg, webp)\uc758 Base64 \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/convertImageToBlob":{"id":"utils/file/convertImageToBlob","title":"convertImageToBlob","description":"\uc774\ubbf8\uc9c0\ub97c canvas\ub97c \ud65c\uc6a9\ud574 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0 \ud3ec\ub9f7(png, jpeg, webp)\uc758 Blob \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getBlobFromUrl":{"id":"utils/file/getBlobFromUrl","title":"getBlobFromUrl","description":"URL \ubb38\uc790\uc5f4\uc744 \uc778\uc790\ub85c \ubc1b\uc544, \ud574\ub2f9 URL\ub85c fetch \uc694\uccad \ud6c4 \uc751\ub2f5 \ubc1b\uc740 Response \uac1d\uccb4\ub97c Blob \uac1d\uccb4\ub85c \ubcc0\ud658 \ud6c4 \uc774\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMEType":{"id":"utils/file/getMIMEType","title":"getMIMEType","description":"getMIMETypeFromFile, getMIMETypeFromResponse, getMIMETypeFromUrl \uc744 \ud1b5\ud569\ud55c MIME \ud0c0\uc785\uc744 \uc5bb\uc744 \uc218 \uc788\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromFile":{"id":"utils/file/getMIMETypeFromFile","title":"getMIMETypeFromFile","description":"File \uac1d\uccb4\ub97c \uc778\uc790\ub85c\ubc1b\uc544, \ud574\ub2f9 File \uac1d\uccb4\ub85c\ubd80\ud130 MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromResponse":{"id":"utils/file/getMIMETypeFromResponse","title":"getMIMETypeFromResponse","description":"Response \uac1d\uccb4\ub97c \uc778\uc790\ub85c\ubc1b\uc544, \ud574\ub2f9 Response \uac1d\uccb4\ub85c\ubd80\ud130 MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromUrl":{"id":"utils/file/getMIMETypeFromUrl","title":"getMIMETypeFromUrl","description":"URL \ubb38\uc790\uc5f4\uc744 \uc778\uc790\ub85c \ubc1b\uc544, \ud574\ub2f9 URL\ub85c fetch \uc694\uccad \ud6c4 \uc751\ub2f5 \ubc1b\uc740 Response \uac1d\uccb4\uc5d0\uc11c MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberByUnits":{"id":"utils/formatter/formatNumberByUnits","title":"formatNumberByUnits","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uc22b\uc790\ub97c \ub2e8\uc704 \ubcc4\ub85c \uad6c\ubd84\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberCurrency":{"id":"utils/formatter/formatNumberCurrency","title":"formatNumberCurrency","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uc22b\uc790\ub97c \ub2e8\uc704 \ubcc4\ub85c \uad6c\ubd84\ud558\uace0 \ud1b5\ud654 \ub2e8\uc704\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberWithCommas":{"id":"utils/formatter/formatNumberWithCommas","title":"formatNumberWithCommas","description":"\ubb38\uc790\uc5f4 \ub610\ub294 \uc22b\uc790\ub97c \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \ucc9c \ub2e8\uc704\ub85c (,)comma\ub97c \ucd94\uac00\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatPhoneNumber":{"id":"utils/formatter/formatPhoneNumber","title":"formatPhoneNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc804\ud654 \ubc88\ud638 \ud3ec\ub9f7\uc73c\ub85c -(hyphen)\uc744 \ub123\uc5b4\uc11c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/average":{"id":"utils/math/average","title":"average","description":"\ubc30\uc5f4 \uc694\uc18c\uc758 \ud569\uc758 \ud3c9\uade0\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/max":{"id":"utils/math/max","title":"max","description":"\ubc30\uc5f4\uc5d0\uc11c \ucd5c\ub313\uac12\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/min":{"id":"utils/math/min","title":"min","description":"\ubc30\uc5f4\uc5d0\uc11c \ucd5c\uc19f\uac12\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/range":{"id":"utils/math/range","title":"range","description":"\uc8fc\uc5b4\uc9c4 \ubc94\uc704 \ub0b4\uc758 \uc22b\uc790 \ubc30\uc5f4\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/sum":{"id":"utils/math/sum","title":"sum","description":"\ubc30\uc5f4 \uc694\uc18c\uc758 \ud569\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/deleteEmptyProperties":{"id":"utils/object/deleteEmptyProperties","title":"deleteEmptyProperties","description":"\uac1d\uccb4\uc758 \uc911\ucca9 \uac1d\uccb4/\ubc30\uc5f4\uc744 \ud3ec\ud568\ud55c \ubaa8\ub4e0 \ud504\ub85c\ud37c\ud2f0\ub97c \uc21c\ud68c\ud558\uba74\uc11c \uac12\uc774 \uc544\ub798 \ub098\uc5f4\ud55c \ube48 \uac12\ub4e4 \uc911 \ud558\ub098\ub77c\uba74, \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0\ub4e4\uc744 \uc81c\uac70\ud55c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/groupBy":{"id":"utils/object/groupBy","title":"groupBy","description":"\ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc744 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218 callbackFn\uc5d0 \ub530\ub77c \uadf8\ub8f9\ud654\ud558\uc5ec, \uac01 \ud0a4\uc5d0 \ud574\ub2f9\ud558\ub294 \ud56d\ubaa9\ub4e4\uc758 \ubc30\uc5f4\uc744 \ud3ec\ud568\ud558\ub294 \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/invert":{"id":"utils/object/invert","title":"invert","description":"\uac1d\uccb4\uc758 key\uc640 value\ub97c \ub4a4\uc9d1\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mapKeys":{"id":"utils/object/mapKeys","title":"mapKeys","description":"\uc8fc\uc5b4\uc9c4 \uac1d\uccb4\uc758 \uac01 \ud0a4\uc5d0 \ub300\ud574 \uc81c\uacf5\ub41c \ubcc0\ud658 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c8 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uc6d0\ubcf8 \uac1d\uccb4\uc758 \ud0a4\ub4e4\uc744 \ubcc0\ud658\ud55c \ud6c4 \uc0dd\uc131\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mapValues":{"id":"utils/object/mapValues","title":"mapValues","description":"\uc8fc\uc5b4\uc9c4 \uac1d\uccb4\uc758 \uac01 \uac12\uc5d0 \ub300\ud574 \uc81c\uacf5\ub41c \ubcc0\ud658 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c8 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uc6d0\ubcf8 \uac1d\uccb4\uc758 \uac12\ub4e4\uc744 \ubcf5\uc0ac\ud558\uc5ec \ubcc0\ud658\ud55c \ud6c4 \uc0dd\uc131\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mergeProperties":{"id":"utils/object/mergeProperties","title":"mergeProperties","description":"\uae30\uc900\uc774 \ub418\ub294 target \uac1d\uccb4\uc640 source \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \ubcd1\ud569\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectEntries":{"id":"utils/object/objectEntries","title":"objectEntries","description":"Object.entries()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectKeys":{"id":"utils/object/objectKeys","title":"objectKeys","description":"Object.keys()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectValues":{"id":"utils/object/objectValues","title":"objectValues","description":"Object.values()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/omit":{"id":"utils/object/omit","title":"omit","description":"\uccab \ubc88\uc9f8 \uc778\uc790\ub85c \ub123\uc740 \uac1d\uccb4\ub97c \uae30\uc900\uc73c\ub85c \ub450 \ubc88\uc9f8 \uc778\uc790\ub85c \ub123\uc740 keys \uc694\uc18c\uc5d0 \ub300\uc751\ud558\ub294 \ud504\ub85c\ud37c\ud2f0\ub97c \uc0dd\ub7b5\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/pick":{"id":"utils/object/pick","title":"pick","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub85c \uad6c\uc131\ub41c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/countSubstringOccurrences":{"id":"utils/string/countSubstringOccurrences","title":"countSubstringOccurrences","description":"\ubb38\uc790\uc5f4\uc5d0\uc11c \ud2b9\uc815 \ud558\uc704 \ubb38\uc790\uc5f4\uc774 \uc5bc\ub9c8\ub098 \ubc18\ubcf5 \ub4f1\uc7a5\ud588\ub294\uc9c0 \ud69f\uc218\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractLetters":{"id":"utils/string/extractLetters","title":"extractLetters","description":"\uc784\uc758\uc758 \ubb38\uc790\uc5f4\uc5d0 \ub300\ud574 \uc120\ud0dd\ud55c \ubb38\uc790 \uc18d\uc131\ub9cc \ubc18\uc601\uc2dc\ud0a8 \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \uc0dd\uc131\ud558\uc5ec \ubc18\ud658\ud558\ub294 \uba54\uc11c\ub4dc \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractNumber":{"id":"utils/string/extractNumber","title":"extractNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \uc81c\uc678\ud55c \ubaa8\ub4e0 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/removeSpecialCharacters":{"id":"utils/string/removeSpecialCharacters","title":"removeSpecialCharacters","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \ud2b9\uc218 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/repeatCharacters":{"id":"utils/string/repeatCharacters","title":"repeatCharacters","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc758 \uac01 \ubb38\uc790\ub97c \uc8fc\uc5b4\uc9c4 \ubc18\ubcf5 \ud69f\uc218\ub9cc\ud07c \ubc18\ubcf5\ud574\uc11c \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/reverseString":{"id":"utils/string/reverseString","title":"reverseString","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc744 \ub4a4\uc9d1\uc740 \ud615\ud0dc\ub85c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/serialize":{"id":"utils/string/serialize","title":"serialize","description":"\uac1d\uccb4\ub85c \ub4e4\uc5b4\uc628 \uac12\uc744 query paramater\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc9c1\ub82c\ud654\ud574\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/style/rem":{"id":"utils/style/rem","title":"rem","description":"Root \uc694\uc18c(html)\uc758 fontSize\ub97c \uae30\ubc18\uc73c\ub85c pixel \uac12\uc744 rem \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/hasProperty":{"id":"utils/validator/hasProperty","title":"hasProperty","description":"\uac1d\uccb4\uac00 \uc9c0\uc815\ub41c \ud504\ub85c\ud37c\ud2f0\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ub9cc\uc57d, true\ub77c\uba74 \ud504\ub85c\ud37c\ud2f0\uc758 \ud0c0\uc785\uc774 \uc881\ud600\uc9d1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isArray":{"id":"utils/validator/isArray","title":"isArray","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubc30\uc5f4\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Array\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isBoolean":{"id":"utils/validator/isBoolean","title":"isBoolean","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubd88\ub9ac\uc5b8\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 boolean\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isEqual":{"id":"utils/validator/isEqual","title":"isEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFloat":{"id":"utils/validator/isFloat","title":"isFloat","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc720\ud55c\ud55c \ubd80\ub3d9\uc18c\uc218\uc810 \uc22b\uc790\uc778\uc9c0\ub97c \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFuntion":{"id":"utils/validator/isFuntion","title":"isFunction","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ud568\uc218\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Function\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isInRange":{"id":"utils/validator/isInRange","title":"isInRange","description":"\ub300\uc0c1 \uac12\uc774 \uc8fc\uc5b4\uc9c4 \ubc94\uc704 \ub0b4\uc5d0 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isMIMEType":{"id":"utils/validator/isMIMEType","title":"isMIMEType","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 MIME Type\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 MIME Type\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNil":{"id":"utils/validator/isNil","title":"isNil","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790 \ud0c0\uc785\uc774 undefined | null\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNotNil":{"id":"utils/validator/isNotNil","title":"isNotNil","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uac00 \uc544\ub2cc\uc9c0 \uac80\uc0ac\ud558\uace0, \uc544\ub2c8\ub77c\uba74 \uc8fc\uc5b4\uc9c4 \uc778\uc790 \ud0c0\uc785 \uadf8\ub300\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumber":{"id":"utils/validator/isNumber","title":"isNumber","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc22b\uc790\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 number\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumericString":{"id":"utils/validator/isNumericString","title":"isNumericString","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc22b\uc790(0-9)\ub85c\ub9cc \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPlainObject":{"id":"utils/validator/isPlainObject","title":"isPlainObject","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Plain Object(\uc77c\ubc18 \uac1d\uccb4) \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPrimitive":{"id":"utils/validator/isPrimitive","title":"isPrimitive","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc6d0\uc2dc\uac12\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Primitive\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPromise":{"id":"utils/validator/isPromise","title":"isPromise","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Promise\uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. Promise\uac00 \ub9de\ub2e4\uba74 \ud0c0\uc785\uc744 \uc881\ud600\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isReference":{"id":"utils/validator/isReference","title":"isReference","description":"\ucc38\uc870 \ud0c0\uc785\uc740 \uac1d\uccb4, \ubc30\uc5f4, \ud568\uc218 \ub4f1 \ube44\uc6d0\uc2dc \ud0c0\uc785\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4. \uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ucc38\uc870 \ud0c0\uc785\uc778\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isString":{"id":"utils/validator/isString","title":"isString","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubb38\uc790\uc5f4\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 string\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isSubset":{"id":"utils/validator/isSubset","title":"isSubset","description":"\ub450 \ubc88\uc9f8 \uc778\uc790\ub85c \uc8fc\uc5b4\uc9c0\ub294 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uccab \ubc88\uc9f8 \uc778\uc790\uc758 \ubc30\uc5f4\uc774 \uc644\uc804\ud788 \ud3ec\ud568\ud558\ub294\uc9c0(\ubd80\ubd84\uc9d1\ud569) \uc5ec\ubd80\ub97c boolean\uc73c\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidEmail":{"id":"utils/validator/isValidEmail","title":"isValidEmail","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc774\uba54\uc77c \ud615\uc2dd\uc744 \uc900\uc218\ud558\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPassword":{"id":"utils/validator/isValidPassword","title":"isValidPassword","description":"KISA-\ud55c\uad6d \uc778\ud130\ub137 \uc9c4\ud765\uc6d0 \uc758 \ud328\uc2a4\uc6cc\ub4dc \uaddc\uce59\uc744 \uae30\ubc18\uc73c\ub85c \ud328\uc2a4\uc6cc\ub4dc \uc720\ud6a8\uc131 \uac10\uc0ac\ub97c \ud560 \uc218 \uc788\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPhoneNumberFormat":{"id":"utils/validator/isValidPhoneNumberFormat","title":"isValidPhoneNumberFormat","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 -(hyphen)\uc744 \ud3ec\ud568\ud55c \uc804\ud654\ubc88\ud638 \ud615\uc2dd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isWindow":{"id":"utils/validator/isWindow","title":"isWindow","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 window \uac1d\uccb4\uc778\uc9c0 \ud655\uc778\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Window\ub85c \ud0c0\uc785\uc744 \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"}}}}')}}]); \ No newline at end of file diff --git a/assets/js/ee1f2119.ef8911e8.js b/assets/js/ee1f2119.ef8911e8.js new file mode 100644 index 000000000..e73eabfef --- /dev/null +++ b/assets/js/ee1f2119.ef8911e8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7932],{2601:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"tutorialSidebar":[{"type":"link","label":"Introduce","href":"/modern-kit/docs/introduce/","docId":"introduce/Introduce","unlisted":false},{"type":"category","label":"react","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"components","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"AspectRatio","href":"/modern-kit/docs/react/components/AspectRatio","docId":"react/components/AspectRatio","unlisted":false},{"type":"link","label":"ClientOnly","href":"/modern-kit/docs/react/components/ClientOnly","docId":"react/components/ClientOnly","unlisted":false},{"type":"link","label":"DebounceWrapper","href":"/modern-kit/docs/react/components/DebounceWrapper","docId":"react/components/DebounceWrapper","unlisted":false},{"type":"link","label":"FallbackLazyImage","href":"/modern-kit/docs/react/components/FallbackLazyImage","docId":"react/components/FallbackLazyImage","unlisted":false},{"type":"link","label":"IfElse","href":"/modern-kit/docs/react/components/IfElse","docId":"react/components/IfElse","unlisted":false},{"type":"link","label":"InView","href":"/modern-kit/docs/react/components/InView","docId":"react/components/InView","unlisted":false},{"type":"link","label":"Iterator","href":"/modern-kit/docs/react/components/Iterator","docId":"react/components/Iterator","unlisted":false},{"type":"link","label":"LazyImage","href":"/modern-kit/docs/react/components/LazyImage","docId":"react/components/LazyImage","unlisted":false},{"type":"link","label":"OutsideClick","href":"/modern-kit/docs/react/components/OutsideClick","docId":"react/components/OutsideClick","unlisted":false},{"type":"link","label":"Portal","href":"/modern-kit/docs/react/components/Portal","docId":"react/components/Portal","unlisted":false},{"type":"link","label":"SeparatedIterator","href":"/modern-kit/docs/react/components/SeparatedIterator","docId":"react/components/SeparatedIterator","unlisted":false},{"type":"link","label":"SwitchCase","href":"/modern-kit/docs/react/components/SwithCase","docId":"react/components/SwithCase","unlisted":false},{"type":"link","label":"When","href":"/modern-kit/docs/react/components/When","docId":"react/components/When","unlisted":false}]},{"type":"category","label":"hooks","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"useAsyncPreservedCallback","href":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","docId":"react/hooks/useAsyncPreservedCallback","unlisted":false},{"type":"link","label":"useBlockPromiseMultipleClick","href":"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","docId":"react/hooks/useBlockPromiseMultipleClick","unlisted":false},{"type":"link","label":"useClipboard","href":"/modern-kit/docs/react/hooks/useClipboard","docId":"react/hooks/useClipboard","unlisted":false},{"type":"link","label":"useCounter","href":"/modern-kit/docs/react/hooks/useCounter","docId":"react/hooks/useCounter","unlisted":false},{"type":"link","label":"useCycleList","href":"/modern-kit/docs/react/hooks/useCycleList","docId":"react/hooks/useCycleList","unlisted":false},{"type":"link","label":"useDebounce","href":"/modern-kit/docs/react/hooks/useDebounce","docId":"react/hooks/useDebounce","unlisted":false},{"type":"link","label":"useDebouncedInputValue","href":"/modern-kit/docs/react/hooks/useDebouncedInputValue","docId":"react/hooks/useDebouncedInputValue","unlisted":false},{"type":"link","label":"useDebouncedState","href":"/modern-kit/docs/react/hooks/useDebouncedState","docId":"react/hooks/useDebouncedState","unlisted":false},{"type":"link","label":"useDocumentTitle","href":"/modern-kit/docs/react/hooks/useDocumentTitle","docId":"react/hooks/useDocumentTitle","unlisted":false},{"type":"link","label":"useEventListener","href":"/modern-kit/docs/react/hooks/useEventListener","docId":"react/hooks/useEventListener","unlisted":false},{"type":"link","label":"useFileReader","href":"/modern-kit/docs/react/hooks/useFileReader","docId":"react/hooks/useFileReader","unlisted":false},{"type":"link","label":"useForceUpdate","href":"/modern-kit/docs/react/hooks/useForceUpdate","docId":"react/hooks/useForceUpdate","unlisted":false},{"type":"link","label":"useHover","href":"/modern-kit/docs/react/hooks/useHover","docId":"react/hooks/useHover","unlisted":false},{"type":"link","label":"useImageStatus","href":"/modern-kit/docs/react/hooks/useImageStatus","docId":"react/hooks/useImageStatus","unlisted":false},{"type":"link","label":"useIntersectionObserver","href":"/modern-kit/docs/react/hooks/useIntersectionObserver","docId":"react/hooks/useIntersectionObserver","unlisted":false},{"type":"link","label":"useInterval","href":"/modern-kit/docs/react/hooks/useInterval","docId":"react/hooks/useInterval","unlisted":false},{"type":"link","label":"useIsMounted","href":"/modern-kit/docs/react/hooks/useIsMounted","docId":"react/hooks/useIsMounted","unlisted":false},{"type":"link","label":"useIsomorphicLayoutEffect","href":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","docId":"react/hooks/useIsomorphicLayoutEffect","unlisted":false},{"type":"link","label":"useKeyDown","href":"/modern-kit/docs/react/hooks/useKeyDown","docId":"react/hooks/useKeyDown","unlisted":false},{"type":"link","label":"useLocalStorage","href":"/modern-kit/docs/react/hooks/useLocalStorage","docId":"react/hooks/useLocalStorage","unlisted":false},{"type":"link","label":"useMediaQuery","href":"/modern-kit/docs/react/hooks/useMediaQuery","docId":"react/hooks/useMediaQuery","unlisted":false},{"type":"link","label":"useMergeRefs","href":"/modern-kit/docs/react/hooks/useMergeRefs","docId":"react/hooks/useMergeRefs","unlisted":false},{"type":"link","label":"useMouse","href":"/modern-kit/docs/react/hooks/useMouse","docId":"react/hooks/useMouse","unlisted":false},{"type":"link","label":"useNetwork","href":"/modern-kit/docs/react/hooks/useNetwork","docId":"react/hooks/useNetwork","unlisted":false},{"type":"link","label":"useOutsidePointerDown","href":"/modern-kit/docs/react/hooks/useOutsidePointerDown","docId":"react/hooks/useOutsidePointerDown","unlisted":false},{"type":"link","label":"usePreferredColorScheme","href":"/modern-kit/docs/react/hooks/usePreferredColorScheme","docId":"react/hooks/usePreferredColorScheme","unlisted":false},{"type":"link","label":"usePreservedCallback","href":"/modern-kit/docs/react/hooks/usePreservedCallback","docId":"react/hooks/usePreservedCallback","unlisted":false},{"type":"link","label":"usePreservedState","href":"/modern-kit/docs/react/hooks/usePreservedState","docId":"react/hooks/usePreservedState","unlisted":false},{"type":"link","label":"usePrevious","href":"/modern-kit/docs/react/hooks/usePrevious","docId":"react/hooks/usePrevious","unlisted":false},{"type":"link","label":"useResizeObserver","href":"/modern-kit/docs/react/hooks/useResizeObserver","docId":"react/hooks/useResizeObserver","unlisted":false},{"type":"link","label":"useScrollLock","href":"/modern-kit/docs/react/hooks/useScrollLock","docId":"react/hooks/useScrollLock","unlisted":false},{"type":"link","label":"useScrollTo","href":"/modern-kit/docs/react/hooks/useScrollTo","docId":"react/hooks/useScrollTo","unlisted":false},{"type":"link","label":"useSessionStorage","href":"/modern-kit/docs/react/hooks/useSessionStorage","docId":"react/hooks/useSessionStorage","unlisted":false},{"type":"link","label":"useStep","href":"/modern-kit/docs/react/hooks/useStep","docId":"react/hooks/useStep","unlisted":false},{"type":"link","label":"useStepState","href":"/modern-kit/docs/react/hooks/useStepState","docId":"react/hooks/useStepState","unlisted":false},{"type":"link","label":"useThrottle","href":"/modern-kit/docs/react/hooks/useThrottle","docId":"react/hooks/useThrottle","unlisted":false},{"type":"link","label":"useTimeout","href":"/modern-kit/docs/react/hooks/useTimeout","docId":"react/hooks/useTimeout","unlisted":false},{"type":"link","label":"useToggle","href":"/modern-kit/docs/react/hooks/useToggle","docId":"react/hooks/useToggle","unlisted":false},{"type":"link","label":"useUnMount","href":"/modern-kit/docs/react/hooks/useUnmount","docId":"react/hooks/useUnmount","unlisted":false},{"type":"link","label":"useUserAgent","href":"/modern-kit/docs/react/hooks/useUserAgent","docId":"react/hooks/useUserAgent","unlisted":false},{"type":"link","label":"useVhProperty","href":"/modern-kit/docs/react/hooks/useVhProperty","docId":"react/hooks/useVhProperty","unlisted":false},{"type":"link","label":"useVisibilityChange","href":"/modern-kit/docs/react/hooks/useVisibilityChange","docId":"react/hooks/useVisibilityChange","unlisted":false},{"type":"link","label":"useWindowSize","href":"/modern-kit/docs/react/hooks/useWindowSize","docId":"react/hooks/useWindowSize","unlisted":false}]}]},{"type":"category","label":"utils","collapsible":true,"collapsed":true,"items":[{"type":"category","label":"array","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"chunk","href":"/modern-kit/docs/utils/array/chunk","docId":"utils/array/chunk","unlisted":false},{"type":"link","label":"compact","href":"/modern-kit/docs/utils/array/compact","docId":"utils/array/compact","unlisted":false},{"type":"link","label":"contains","href":"/modern-kit/docs/utils/array/contains","docId":"utils/array/contains","unlisted":false},{"type":"link","label":"countOccurrencesInArray","href":"/modern-kit/docs/utils/array/countOccurrencesInArray","docId":"utils/array/countOccurrencesInArray","unlisted":false},{"type":"link","label":"difference","href":"/modern-kit/docs/utils/array/difference","docId":"utils/array/difference","unlisted":false},{"type":"link","label":"drop","href":"/modern-kit/docs/utils/array/drop","docId":"utils/array/drop","unlisted":false},{"type":"link","label":"excludeElements","href":"/modern-kit/docs/utils/array/excludeElements","docId":"utils/array/excludeElements","unlisted":false},{"type":"link","label":"fill","href":"/modern-kit/docs/utils/array/fill","docId":"utils/array/fill","unlisted":false},{"type":"link","label":"flatMap","href":"/modern-kit/docs/utils/array/flatMap","docId":"utils/array/flatMap","unlisted":false},{"type":"link","label":"flatMapDeep","href":"/modern-kit/docs/utils/array/flatMapDeep","docId":"utils/array/flatMapDeep","unlisted":false},{"type":"link","label":"flatten","href":"/modern-kit/docs/utils/array/flatten","docId":"utils/array/flatten","unlisted":false},{"type":"link","label":"flattenDeep","href":"/modern-kit/docs/utils/array/flattenDeep","docId":"utils/array/flattenDeep","unlisted":false},{"type":"link","label":"flattenDeepThenMap","href":"/modern-kit/docs/utils/array/flattenDeepThenMap","docId":"utils/array/flattenDeepThenMap","unlisted":false},{"type":"link","label":"forEachRight","href":"/modern-kit/docs/utils/array/forEachRight","docId":"utils/array/forEachRight","unlisted":false},{"type":"link","label":"intersection","href":"/modern-kit/docs/utils/array/intersection","docId":"utils/array/intersection","unlisted":false},{"type":"link","label":"intersectionWithDuplicates","href":"/modern-kit/docs/utils/array/intersectionWithDuplicates","docId":"utils/array/intersectionWithDuplicates","unlisted":false},{"type":"link","label":"mapRight","href":"/modern-kit/docs/utils/array/mapRight","docId":"utils/array/mapRight","unlisted":false},{"type":"link","label":"partition","href":"/modern-kit/docs/utils/array/partition","docId":"utils/array/partition","unlisted":false},{"type":"link","label":"shuffle","href":"/modern-kit/docs/utils/array/shuffle","docId":"utils/array/shuffle","unlisted":false},{"type":"link","label":"swap","href":"/modern-kit/docs/utils/array/swap","docId":"utils/array/swap","unlisted":false},{"type":"link","label":"take","href":"/modern-kit/docs/utils/array/take","docId":"utils/array/take","unlisted":false},{"type":"link","label":"union","href":"/modern-kit/docs/utils/array/union","docId":"utils/array/union","unlisted":false},{"type":"link","label":"uniq","href":"/modern-kit/docs/utils/array/uniq","docId":"utils/array/uniq","unlisted":false}]},{"type":"category","label":"clipboard","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"copyClipboardImage","href":"/modern-kit/docs/utils/clipboard/copyClipboardImage","docId":"utils/clipboard/copyClipboardImage","unlisted":false},{"type":"link","label":"copyClipboardText","href":"/modern-kit/docs/utils/clipboard/copyClipboardText","docId":"utils/clipboard/copyClipboardText","unlisted":false},{"type":"link","label":"copyFallbackClipboardText","href":"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","docId":"utils/clipboard/copyFallbackClipboardText","unlisted":false},{"type":"link","label":"readClipboardContents","href":"/modern-kit/docs/utils/clipboard/readClipboardContents","docId":"utils/clipboard/readClipboardContents","unlisted":false},{"type":"link","label":"readClipboardText","href":"/modern-kit/docs/utils/clipboard/readClipboardText","docId":"utils/clipboard/readClipboardText","unlisted":false}]},{"type":"category","label":"common","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"abRandom","href":"/modern-kit/docs/utils/common/abRandom","docId":"utils/common/abRandom","unlisted":false},{"type":"link","label":"asyncNoop","href":"/modern-kit/docs/utils/common/asyncNoop","docId":"utils/common/asyncNoop","unlisted":false},{"type":"link","label":"deepCopy","href":"/modern-kit/docs/utils/common/deepCopy","docId":"utils/common/deepCopy","unlisted":false},{"type":"link","label":"delay","href":"/modern-kit/docs/utils/common/delay","docId":"utils/common/delay","unlisted":false},{"type":"link","label":"getUniqId","href":"/modern-kit/docs/utils/common/getUniqId","docId":"utils/common/getUniqId","unlisted":false},{"type":"link","label":"getUniqTime","href":"/modern-kit/docs/utils/common/getUniqTime","docId":"utils/common/getUniqTime","unlisted":false},{"type":"link","label":"getViewportSize","href":"/modern-kit/docs/utils/common/getViewportSize","docId":"utils/common/getViewportSize","unlisted":false},{"type":"link","label":"hexToRgba","href":"/modern-kit/docs/utils/common/hexToRgba","docId":"utils/common/hexToRgba","unlisted":false},{"type":"link","label":"identity","href":"/modern-kit/docs/utils/common/identity","docId":"utils/common/identity","unlisted":false},{"type":"link","label":"noop","href":"/modern-kit/docs/utils/common/noop","docId":"utils/common/noop","unlisted":false},{"type":"link","label":"once","href":"/modern-kit/docs/utils/common/once","docId":"utils/common/once","unlisted":false},{"type":"link","label":"parseJSON","href":"/modern-kit/docs/utils/common/parseJSON","docId":"utils/common/parseJSON","unlisted":false},{"type":"link","label":"pickFalsy","href":"/modern-kit/docs/utils/common/pickFalsy","docId":"utils/common/pickFalsy","unlisted":false},{"type":"link","label":"size","href":"/modern-kit/docs/utils/common/size","docId":"utils/common/size","unlisted":false},{"type":"link","label":"wrapInArray","href":"/modern-kit/docs/utils/common/wrapInArray","docId":"utils/common/wrapInArray","unlisted":false}]},{"type":"category","label":"device","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"getOS","href":"/modern-kit/docs/utils/device/getOS","docId":"utils/device/getOS","unlisted":false},{"type":"link","label":"isClient","href":"/modern-kit/docs/utils/device/isClient","docId":"utils/device/isClient","unlisted":false},{"type":"link","label":"isMobile","href":"/modern-kit/docs/utils/device/isMobile","docId":"utils/device/isMobile","unlisted":false},{"type":"link","label":"isServer","href":"/modern-kit/docs/utils/device/isSever","docId":"utils/device/isSever","unlisted":false}]},{"type":"category","label":"file","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"convertImageToBase64","href":"/modern-kit/docs/utils/file/convertImageToBase64","docId":"utils/file/convertImageToBase64","unlisted":false},{"type":"link","label":"convertImageToBlob","href":"/modern-kit/docs/utils/file/convertImageToBlob","docId":"utils/file/convertImageToBlob","unlisted":false},{"type":"link","label":"getBlobFromUrl","href":"/modern-kit/docs/utils/file/getBlobFromUrl","docId":"utils/file/getBlobFromUrl","unlisted":false},{"type":"link","label":"getMIMEType","href":"/modern-kit/docs/utils/file/getMIMEType","docId":"utils/file/getMIMEType","unlisted":false},{"type":"link","label":"getMIMETypeFromFile","href":"/modern-kit/docs/utils/file/getMIMETypeFromFile","docId":"utils/file/getMIMETypeFromFile","unlisted":false},{"type":"link","label":"getMIMETypeFromResponse","href":"/modern-kit/docs/utils/file/getMIMETypeFromResponse","docId":"utils/file/getMIMETypeFromResponse","unlisted":false},{"type":"link","label":"getMIMETypeFromUrl","href":"/modern-kit/docs/utils/file/getMIMETypeFromUrl","docId":"utils/file/getMIMETypeFromUrl","unlisted":false}]},{"type":"category","label":"formatter","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"formatNumberByUnits","href":"/modern-kit/docs/utils/formatter/formatNumberByUnits","docId":"utils/formatter/formatNumberByUnits","unlisted":false},{"type":"link","label":"formatNumberCurrency","href":"/modern-kit/docs/utils/formatter/formatNumberCurrency","docId":"utils/formatter/formatNumberCurrency","unlisted":false},{"type":"link","label":"formatNumberWithCommas","href":"/modern-kit/docs/utils/formatter/formatNumberWithCommas","docId":"utils/formatter/formatNumberWithCommas","unlisted":false},{"type":"link","label":"formatPhoneNumber","href":"/modern-kit/docs/utils/formatter/formatPhoneNumber","docId":"utils/formatter/formatPhoneNumber","unlisted":false}]},{"type":"category","label":"math","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"average","href":"/modern-kit/docs/utils/math/average","docId":"utils/math/average","unlisted":false},{"type":"link","label":"max","href":"/modern-kit/docs/utils/math/max","docId":"utils/math/max","unlisted":false},{"type":"link","label":"min","href":"/modern-kit/docs/utils/math/min","docId":"utils/math/min","unlisted":false},{"type":"link","label":"range","href":"/modern-kit/docs/utils/math/range","docId":"utils/math/range","unlisted":false},{"type":"link","label":"sum","href":"/modern-kit/docs/utils/math/sum","docId":"utils/math/sum","unlisted":false}]},{"type":"category","label":"object","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"deleteEmptyProperties","href":"/modern-kit/docs/utils/object/deleteEmptyProperties","docId":"utils/object/deleteEmptyProperties","unlisted":false},{"type":"link","label":"groupBy","href":"/modern-kit/docs/utils/object/groupBy","docId":"utils/object/groupBy","unlisted":false},{"type":"link","label":"invert","href":"/modern-kit/docs/utils/object/invert","docId":"utils/object/invert","unlisted":false},{"type":"link","label":"mapKeys","href":"/modern-kit/docs/utils/object/mapKeys","docId":"utils/object/mapKeys","unlisted":false},{"type":"link","label":"mapValues","href":"/modern-kit/docs/utils/object/mapValues","docId":"utils/object/mapValues","unlisted":false},{"type":"link","label":"mergeProperties","href":"/modern-kit/docs/utils/object/mergeProperties","docId":"utils/object/mergeProperties","unlisted":false},{"type":"link","label":"objectEntries","href":"/modern-kit/docs/utils/object/objectEntries","docId":"utils/object/objectEntries","unlisted":false},{"type":"link","label":"objectKeys","href":"/modern-kit/docs/utils/object/objectKeys","docId":"utils/object/objectKeys","unlisted":false},{"type":"link","label":"objectValues","href":"/modern-kit/docs/utils/object/objectValues","docId":"utils/object/objectValues","unlisted":false},{"type":"link","label":"omit","href":"/modern-kit/docs/utils/object/omit","docId":"utils/object/omit","unlisted":false},{"type":"link","label":"pick","href":"/modern-kit/docs/utils/object/pick","docId":"utils/object/pick","unlisted":false}]},{"type":"category","label":"string","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"countSubstringOccurrences","href":"/modern-kit/docs/utils/string/countSubstringOccurrences","docId":"utils/string/countSubstringOccurrences","unlisted":false},{"type":"link","label":"extractLetters","href":"/modern-kit/docs/utils/string/extractLetters","docId":"utils/string/extractLetters","unlisted":false},{"type":"link","label":"extractNumber","href":"/modern-kit/docs/utils/string/extractNumber","docId":"utils/string/extractNumber","unlisted":false},{"type":"link","label":"removeSpecialCharacters","href":"/modern-kit/docs/utils/string/removeSpecialCharacters","docId":"utils/string/removeSpecialCharacters","unlisted":false},{"type":"link","label":"repeatCharacters","href":"/modern-kit/docs/utils/string/repeatCharacters","docId":"utils/string/repeatCharacters","unlisted":false},{"type":"link","label":"reverseString","href":"/modern-kit/docs/utils/string/reverseString","docId":"utils/string/reverseString","unlisted":false},{"type":"link","label":"serialize","href":"/modern-kit/docs/utils/string/serialize","docId":"utils/string/serialize","unlisted":false}]},{"type":"category","label":"style","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"rem","href":"/modern-kit/docs/utils/style/rem","docId":"utils/style/rem","unlisted":false}]},{"type":"category","label":"validator","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"hasProperty","href":"/modern-kit/docs/utils/validator/hasProperty","docId":"utils/validator/hasProperty","unlisted":false},{"type":"link","label":"isArray","href":"/modern-kit/docs/utils/validator/isArray","docId":"utils/validator/isArray","unlisted":false},{"type":"link","label":"isBoolean","href":"/modern-kit/docs/utils/validator/isBoolean","docId":"utils/validator/isBoolean","unlisted":false},{"type":"link","label":"isEqual","href":"/modern-kit/docs/utils/validator/isEqual","docId":"utils/validator/isEqual","unlisted":false},{"type":"link","label":"isFloat","href":"/modern-kit/docs/utils/validator/isFloat","docId":"utils/validator/isFloat","unlisted":false},{"type":"link","label":"isFunction","href":"/modern-kit/docs/utils/validator/isFuntion","docId":"utils/validator/isFuntion","unlisted":false},{"type":"link","label":"isInRange","href":"/modern-kit/docs/utils/validator/isInRange","docId":"utils/validator/isInRange","unlisted":false},{"type":"link","label":"isMIMEType","href":"/modern-kit/docs/utils/validator/isMIMEType","docId":"utils/validator/isMIMEType","unlisted":false},{"type":"link","label":"isNil","href":"/modern-kit/docs/utils/validator/isNil","docId":"utils/validator/isNil","unlisted":false},{"type":"link","label":"isNotNil","href":"/modern-kit/docs/utils/validator/isNotNil","docId":"utils/validator/isNotNil","unlisted":false},{"type":"link","label":"isNumber","href":"/modern-kit/docs/utils/validator/isNumber","docId":"utils/validator/isNumber","unlisted":false},{"type":"link","label":"isNumericString","href":"/modern-kit/docs/utils/validator/isNumericString","docId":"utils/validator/isNumericString","unlisted":false},{"type":"link","label":"isPlainObject","href":"/modern-kit/docs/utils/validator/isPlainObject","docId":"utils/validator/isPlainObject","unlisted":false},{"type":"link","label":"isPrimitive","href":"/modern-kit/docs/utils/validator/isPrimitive","docId":"utils/validator/isPrimitive","unlisted":false},{"type":"link","label":"isPromise","href":"/modern-kit/docs/utils/validator/isPromise","docId":"utils/validator/isPromise","unlisted":false},{"type":"link","label":"isReference","href":"/modern-kit/docs/utils/validator/isReference","docId":"utils/validator/isReference","unlisted":false},{"type":"link","label":"isString","href":"/modern-kit/docs/utils/validator/isString","docId":"utils/validator/isString","unlisted":false},{"type":"link","label":"isSubset","href":"/modern-kit/docs/utils/validator/isSubset","docId":"utils/validator/isSubset","unlisted":false},{"type":"link","label":"isValidEmail","href":"/modern-kit/docs/utils/validator/isValidEmail","docId":"utils/validator/isValidEmail","unlisted":false},{"type":"link","label":"isValidPassword","href":"/modern-kit/docs/utils/validator/isValidPassword","docId":"utils/validator/isValidPassword","unlisted":false},{"type":"link","label":"isValidPhoneNumberFormat","href":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","docId":"utils/validator/isValidPhoneNumberFormat","unlisted":false},{"type":"link","label":"isWindow","href":"/modern-kit/docs/utils/validator/isWindow","docId":"utils/validator/isWindow","unlisted":false}]}]}]},"docs":{"introduce/Introduce":{"id":"introduce/Introduce","title":"\uc18c\uac1c","description":"@modern-kit\ub294 \ud074\ub77c\uc774\uc5b8\ud2b8 \uac1c\ubc1c\uc5d0 \uc720\uc6a9\ud55c \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8, \ucee4\uc2a4\ud140 \ud6c5 \ubc0f \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218, \ud0c0\uc785\uc744 \uc81c\uacf5\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/AspectRatio":{"id":"react/components/AspectRatio","title":"AspectRatio","description":"\uc790\uc2dd \uc694\uc18c\uc758 \uac00\ub85c, \uc138\ub85c \ube44\uc728 aspect-ratio \uc744 \ud3b8\ub9ac\ud558\uac8c \ub9de\ucdb0 \uc904 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/ClientOnly":{"id":"react/components/ClientOnly","title":"ClientOnly","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0 mount \ub418\uc5c8\uc744 \ub54c children\uc774 \ub098\ud0c0\ub098\uac8c \ud574\uc8fc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc989, children\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8 \ud658\uacbd\uc784\uc744 \ubcf4\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. mount \uc804\uc5d0\ub294 fallback\uc73c\ub85c \ub123\uc5b4\uc900 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/DebounceWrapper":{"id":"react/components/DebounceWrapper","title":"DebounceWrapper","description":"\uc790\uc2dd \uc694\uc18c\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \uc774\ubca4\ud2b8(ex: Click Event)\ub97c debounce\ud574\uc8fc\ub294 \uc720\ud2f8 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/FallbackLazyImage":{"id":"react/components/FallbackLazyImage","title":"FallbackLazyImage","description":"LazyImage \ucef4\ud3ec\ub10c\ud2b8 \ub97c \ud655\uc7a5\ud574 \uc774\ubbf8\uc9c0 load \uc5ec\ubd80\uc5d0 \ub530\ub978 Fallback \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/IfElse":{"id":"react/components/IfElse","title":"IfElse","description":"IfElse \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc8fc\uc5b4\uc9c4 \uc870\uac74\uc5d0 \ub530\ub77c \ub450 \uac00\uc9c0 \ucef4\ud3ec\ub10c\ud2b8 \uc911 \ud558\ub098\ub97c \ub80c\ub354\ub9c1\ud558\ub294 \uac04\ub2e8\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/InView":{"id":"react/components/InView","title":"InView","description":"InView\ub294 useIntersectionObserver \ub97c \uc120\uc5b8\uc801\uc73c\ub85c \ud65c\uc6a9 \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Iterator":{"id":"react/components/Iterator","title":"Iterator","description":"items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c, \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/LazyImage":{"id":"react/components/LazyImage","title":"LazyImage","description":"useIntersectionObserver \ub97c \ud65c\uc6a9\ud574 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c \ud560\ub2f9\ub41c \uc774\ubbf8\uc9c0\ub97c Lazy Loading \ud558\ub294 \uc774\ubbf8\uc9c0 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/OutsideClick":{"id":"react/components/OutsideClick","title":"OutsideClick","description":"useOutsideClickEffect\uc758 \uae30\ub2a5\uc744 \uc120\uc5b8\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/Portal":{"id":"react/components/Portal","title":"Portal","description":"Portal \ucef4\ud3ec\ub10c\ud2b8\ub294 React.createPortal\uc744 \uc0ac\uc6a9\ud574 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uc758 DOM \uacc4\uce35 \uad6c\uc870 \uc678\ubd80\uc758 DOM \ub178\ub4dc\uc5d0\uc11c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/SeparatedIterator":{"id":"react/components/SeparatedIterator","title":"SeparatedIterator","description":"Iterator\ub97c \ud655\uc7a5\ud574 items props\ub85c \uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \ubc18\ubcf5\ud558\uba74\uc11c \uac01 \ud56d\ubaa9\uc5d0 \ub300\ud574 \ud2b9\uc815 \uc694\uc18c \ubc0f \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uba70, \ub3d9\uc2dc\uc5d0 \uac01 \uc694\uc18c \uc0ac\uc774\uc5d0 \uad6c\ubd84\uc790(Separator)\ub97c \ub80c\ub354\ub9c1 \ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/SwithCase":{"id":"react/components/SwithCase","title":"SwitchCase","description":"Switch \ubb38\uc744 \ucef4\ud3ec\ub10c\ud2b8 \ud615\ud0dc\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/components/When":{"id":"react/components/When","title":"When","description":"condition prop\uc774 true\uba74 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\uace0, false\uba74 \ub80c\ub354\ub9c1\ud558\uc9c0 \uc54a\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useAsyncPreservedCallback":{"id":"react/hooks/useAsyncPreservedCallback","title":"useAsyncPreservedCallback","description":"usePreservedCallback \uacfc \uc720\uc0ac\ud558\ub098 Promise\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useBlockPromiseMultipleClick":{"id":"react/hooks/useBlockPromiseMultipleClick","title":"useBlockPromiseMultipleClick","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 Callback \ud568\uc218\uc758 Promise \ub3d9\uc791\uc744 \uc218\ud589\ud558\ub294 \ub3d9\uc548 \uc911\ubcf5 \ud638\ucd9c\uc774 \ubd88\uac00\ub2a5\ud558\ub3c4\ub85d \ucc28\ub2e8\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useClipboard":{"id":"react/hooks/useClipboard","title":"useClipboard","description":"\ud074\ub9bd\ubcf4\ub4dc\uc640 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ud568\uc218\ub4e4\uacfc \uc800\uc7a5\ub41c \ub370\uc774\ud130\ub97c \ud3ec\ud568\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useCounter":{"id":"react/hooks/useCounter","title":"useCounter","description":"\uce74\uc6b4\ud130\ub97c \uad00\ub9ac\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc73c\ub85c, \uc99d\uac00, \uac10\uc18c \ubc0f \ub9ac\uc14b \uae30\ub2a5 \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useCycleList":{"id":"react/hooks/useCycleList","title":"useCycleList","description":"\ubc30\uc5f4\uc744 \uc694\uc18c\ub97c \uc21c\ud658\ud558\uba70 \ub2e4\uc74c(nextIndex), \uc774\uc804(prevIndex) \ub610\ub294 \ud2b9\uc815 \uc778\ub371\uc2a4\ub85c \uc774\ub3d9(setIndex) \ud560 \uc218 \uc788\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebounce":{"id":"react/hooks/useDebounce","title":"useDebounce","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDebouncedInputValue":{"id":"react/hooks/useDebouncedInputValue","title":"useDebouncedInputValue","description":"input value\ub97c \uad00\ub9ac\ud558\uace0, \ub514\ubc14\uc6b4\uc2f1(debouncing)\uc744 \uc801\uc6a9\ud558\ub294 \ucee4\uc2a4\ud140 React \ud6c5\uc785\ub2c8\ub2e4","sidebar":"tutorialSidebar"},"react/hooks/useDebouncedState":{"id":"react/hooks/useDebouncedState","title":"useDebouncedState","description":"useState\uc758 \ub514\ubc14\uc6b4\uc2a4 \ubc84\uc804\uc758 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useDocumentTitle":{"id":"react/hooks/useDocumentTitle","title":"useDocumentTitle","description":"SEO\uc640\ub294 \uad00\uacc4 \uc5c6\uc774 document.title\uc744 \ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\uc2dc\ucf1c\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useEventListener":{"id":"react/hooks/useEventListener","title":"useEventListener","description":"\uc9c0\uc815\ub41c \uc694\uc18c\uc5d0 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ucd94\uac00\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \uc790\ub3d9\uc73c\ub85c \uc81c\uac70\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useFileReader":{"id":"react/hooks/useFileReader","title":"useFileReader","description":"File \uac1d\uccb4\ub97c \uc6d0\ud558\ub294 \uc77d\uae30 \uba54\uc11c\ub4dc(readAsText,readAsDataURL,readAsArrayBuffer)\ub85c \uc77d\uace0, \uc77d\uc740 \ud30c\uc77c \ucee8\ud150\uce20\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useForceUpdate":{"id":"react/hooks/useForceUpdate","title":"useForceUpdate","description":"\ubc18\ud658\ub41c \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba74 \uac15\uc81c\ub85c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1 \uc2dc\ud0a4\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useHover":{"id":"react/hooks/useHover","title":"useHover","description":"\ub300\uc0c1 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\uace0, \ub9c8\uc6b0\uc2a4\uac00 \uc62c\ub77c\uac00\uac70\ub098 \ub0b4\ub824\uac14\uc744 \ub54c\uc758 \uc561\uc158\uc744 \uc815\uc758\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useImageStatus":{"id":"react/hooks/useImageStatus","title":"useImageStatus","description":"\ubc18\ud658\ub41c ref\ub97c ` \ud0dc\uadf8\uc5d0 \ud560\ub2f9\ud558\uba74 \uc774\ubbf8\uc9c0 \ub85c\ub4dc\ud558\ub294 \uacfc\uc815\uc5d0\uc11c pending, loading, complete, error` \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIntersectionObserver":{"id":"react/hooks/useIntersectionObserver","title":"useIntersectionObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uac00 Viewport\uc5d0 \ub178\ucd9c\ub420 \ub54c(onIntersectStart) \ud639\uc740 \ub098\uac08 \ub54c(onIntersectEnd) \ud2b9\uc815 action \ud568\uc218\ub97c \ud638\ucd9c \ud560 \uc218 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useInterval":{"id":"react/hooks/useInterval","title":"useInterval","description":"window.setInterval\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsMounted":{"id":"react/hooks/useIsMounted","title":"useIsMounted","description":"\ub9c8\uc6b4\ud2b8\ub41c \uc0c1\ud0dc\uc778\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud560 \uc218 \uc788\ub294 \uc0c1\ud0dc \uac12\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useIsomorphicLayoutEffect":{"id":"react/hooks/useIsomorphicLayoutEffect","title":"useIsomorphicLayoutEffect","description":"useIsomorphicLayoutEffect\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1 \ud658\uacbd\uc5d0\uc11c\ub3c4 \ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ub3c4\ub85d \ubcf4\uc7a5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useKeyDown":{"id":"react/hooks/useKeyDown","title":"useKeyDown","description":"ref\ub97c \uc804\ub2ec\ud55c \uc694\uc18c\uac00 \ud3ec\ucee4\uc2f1\ub41c \uc0c1\ud0dc\uc5d0\uc11c keydown \uc774\ubca4\ud2b8 \ubc1c\uc0dd \uc2dc keyDownCallbackMap\ub85c \uc9c0\uc815\ud55c key\uc5d0 \ud2b8\ub9ac\uac70\ub418\uc5b4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useLocalStorage":{"id":"react/hooks/useLocalStorage","title":"useLocalStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \ub85c\uceec \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMediaQuery":{"id":"react/hooks/useMediaQuery","title":"useMediaQuery","description":"\ubbf8\ub514\uc5b4 \ucffc\ub9ac \ubb38\uc790\uc5f4\uc758 \ubd84\uc11d \uacb0\uacfc\ub97c \uc27d\uac8c \ud655\uc778 \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMergeRefs":{"id":"react/hooks/useMergeRefs","title":"useMergeRefs","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uc5ec\ub7ec \uac1c\uc758 ref\ub97c \ud558\ub098\ub85c \ubcd1\ud569\ud560 \ub54c \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useMouse":{"id":"react/hooks/useMouse","title":"useMouse","description":"\ub300\uc0c1 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \uae30\uc900\uc73c\ub85c \ub9c8\uc6b0\uc2a4\uc758 \uc704\uce58\ub97c \ucd94\uc801\ud558\ub294 Hook\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useNetwork":{"id":"react/hooks/useNetwork","title":"useNetwork","description":"useSyncExternalStore\uc744 \uc0ac\uc6a9\ud574 \ube0c\ub77c\uc6b0\uc800 \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0 \uc0c1\ud0dc\ub97c \uad6c\ub3c5 \ud6c4 online \uc0c1\ud0dc \uc5ec\ubd80\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useOutsidePointerDown":{"id":"react/hooks/useOutsidePointerDown","title":"useOutsidePointerDown","description":"\ud2b9\uc815 \uc694\uc18c \uc678\ubd80\uc5d0\uc11c \ub9c8\uc6b0\uc2a4 \ub610\ub294 \ud130\uce58 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \ud638\ucd9c\ub418\ub294 \ucf5c\ubc31\uc744 \ub4f1\ub85d\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreferredColorScheme":{"id":"react/hooks/usePreferredColorScheme","title":"usePreferredColorScheme","description":"\uc0ac\uc6a9\uc790\uc758 \uc0c9\uc0c1 \uc2a4\ud0b4 \uc120\ud638\ub3c4(prefers-coloc-scheme) \uc5d0 \ub530\ub77c dark, light, \ub610\ub294 no-preference\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedCallback":{"id":"react/hooks/usePreservedCallback","title":"usePreservedCallback","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\uc758 \ucc38\uc870\ub97c \uc720\uc9c0\ud558\uace0, \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \uc0ac\uc774\uc5d0 \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePreservedState":{"id":"react/hooks/usePreservedState","title":"usePreservedState","description":"\uc8fc\uc5b4\uc9c4 \uac12\uacfc \ube44\uad50 \ud568\uc218(comparator)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \ubcf4\uc874\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/usePrevious":{"id":"react/hooks/usePrevious","title":"usePrevious","description":"\uc774\uc804 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc778\uc218\uc758 \uac12\uc744 \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useResizeObserver":{"id":"react/hooks/useResizeObserver","title":"useResizeObserver","description":"ref\ub97c \ud560\ub2f9\ud55c \ud0c0\uac9f \uc5d8\ub9ac\uba3c\ud2b8\uc758 DOM \ud06c\uae30 \ubcc0\ud654\ub97c \uac10\uc9c0\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useScrollLock":{"id":"react/hooks/useScrollLock","title":"useScrollLock","description":"\ud2b9\uc815 \uc694\uc18c\uc758 \uc2a4\ud06c\ub864\uc744 lock, unlock \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useScrollTo":{"id":"react/hooks/useScrollTo","title":"useScrollTo","description":"\uc2a4\ud06c\ub864 \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useSessionStorage":{"id":"react/hooks/useSessionStorage","title":"useSessionStorage","description":"React v18\ubd80\ud130 \uc9c0\uc6d0\ud558\ub294 useSyncExternalStore \uc744 \ud65c\uc6a9\ud574 \uc138\uc158 \uc2a4\ud1a0\ub9ac\uc9c0 \ub0b4\uc758 \ud2b9\uc815 key \ub370\uc774\ud130\ub97c \uad6c\ub3c5\ud558\uace0, \uad6c\ub3c5 \uc911\uc778 \ub370\uc774\ud130\uc5d0 \ubcc0\ud654\uac00 \uc788\uc744 \uc2dc \uc774\ub97c \ub3d9\uae30\ud654\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useStep":{"id":"react/hooks/useStep","title":"useStep","description":"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useStepState":{"id":"react/hooks/useStepState","title":"useStepState","description":"useStep \uc744 \ud655\uc7a5\ud574 multi-step process\uc758 step\uc744 \uad00\ub9ac \ubc0f \ucd94\uc801\ud558\uba70 \ub3d9\uc2dc\uc5d0 \ub0b4\ubd80 \uc0c1\ud0dc\ub97c \uad00\ub9ac \ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useThrottle":{"id":"react/hooks/useThrottle","title":"useThrottle","description":"debounce\ub97c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useTimeout":{"id":"react/hooks/useTimeout","title":"useTimeout","description":"window.setTimeout\uc744 \ud3b8\ub9ac\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useToggle":{"id":"react/hooks/useToggle","title":"useToggle","description":"boolean \ud0c0\uc785\uc758 state\ub97c Toggle\ub85c \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ucee4\uc2a4\ud140 \ud6c5 \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUnmount":{"id":"react/hooks/useUnmount","title":"useUnMount","description":"\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useUserAgent":{"id":"react/hooks/useUserAgent","title":"useUserAgent","description":"ua-parser-js \ub97c \ud65c\uc6a9\ud574\uc11c window.navigator.userAgent \ubb38\uc790\uc5f4\uc744 \ud30c\uc2f1\ud55c \ub370\uc774\ud130\ub97c \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVhProperty":{"id":"react/hooks/useVhProperty","title":"useVhProperty","description":"iOS \uc6f9 \ud658\uacbd\uc5d0\uc11c\ub294 \uc8fc\uc18c\ud45c\uc2dc\uc904\uc758 \ub192\uc774\ub85c \uc778\ud574 100vh\uac00 \uc2e4\uc81c \ubcf4\uc774\ub294 \ud654\uba74\uc758 \ub192\uc774\ubcf4\ub2e4 \ud06c\uac8c \uce21\uc815\ub429\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useVisibilityChange":{"id":"react/hooks/useVisibilityChange","title":"useVisibilityChange","description":"visibilitychange \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc989, \ube0c\ub77c\uc6b0\uc800 \ud0ed\uc758 \ucf58\ud150\uce20\uac00 \ubcf4\uc5ec\uc9c0\uba74 onShow \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\uba70, \ucf58\ud150\uce20\uac00 \uc228\uaca8\uc9c0\uba74 onHide \ucf5c\ubc31 \ud568\uc218\ub97c \uc2e4\ud589\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"react/hooks/useWindowSize":{"id":"react/hooks/useWindowSize","title":"useWindowSize","description":"\ud604\uc7ac \ube0c\ub77c\uc6b0\uc800 \ucc3d\uc758 \ub108\ube44\uc640 \ub192\uc774 \uc815\ubcf4\ub97c \ucd94\uc801\ud558\uace0, \ubc18\ud658\ud558\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4. \ub610\ud55c, \ubd88 \ud544\uc694\ud55c \ud638\ucd9c\uc744 \ubc29\uc9c0\ud558\uae30\uc704\ud55c debounce \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/chunk":{"id":"utils/array/chunk","title":"chunk","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc744 \uc9c0\uc815\ub41c size\ub9cc\ud07c\uc758 \uc791\uc740 \ubc30\uc5f4\ub85c \ub098\ub204\uc5b4 \ubc18\ud658\ud558\ub294 \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/compact":{"id":"utils/array/compact","title":"compact","description":"\ubc30\uc5f4\uc5d0\uc11c false, 0, \'\', null, undefined \uac12\uc744 \uc81c\uac70\ud558\uace0 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/contains":{"id":"utils/array/contains","title":"contains","description":"\uccab \ubc88\uc9f8 \uc778\uc790\ub85c \ub118\uae34 \ubc30\uc5f4\uc5d0 \ud2b9\uc815 \uc694\uc18c\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\ub294\uc9c0 \ud310\ub2e8\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/countOccurrencesInArray":{"id":"utils/array/countOccurrencesInArray","title":"countOccurrencesInArray","description":"\uc785\ub825\ud55c \ubc30\uc5f4\uc5d0\uc11c \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\ub4e4\uc774 \ub4f1\uc7a5\ud55c \ud69f\uc218\ub97c \uce74\uc6b4\ud305 \ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/difference":{"id":"utils/array/difference","title":"difference","description":"\uccab\ubc88\uc9f8 \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c \ub450\ubc88\uc9f8 \ubc30\uc5f4\uacfc \uc911\ubcf5\ub41c \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/drop":{"id":"utils/array/drop","title":"drop","description":"\ubc30\uc5f4\uc758 \uccab \uc694\uc18c\ubd80\ud130 n\uac1c\uc758 \uc694\uc18c\uac00 \uc0ad\uc81c\ub41c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/excludeElements":{"id":"utils/array/excludeElements","title":"excludeElements","description":"1\ubc88\uc9f8 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ub41c \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c 2\ubc88\uc9f8 \ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc744 \uc81c\uc678\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/fill":{"id":"utils/array/fill","title":"fill","description":"\ubc30\uc5f4\uc744 \uc9c0\uc815\ud55c \uac12\uc73c\ub85c \ucc44\uc6c1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatMap":{"id":"utils/array/flatMap","title":"flatMap","description":"\uac01 \ubc30\uc5f4 \uc694\uc18c\ub97c iteratee \ud568\uc218\ub85c \ub9e4\ud551\ud558\uace0 \uc9c0\uc815\ub41c \uae4a\uc774\uae4c\uc9c0 \uacb0\uacfc\ub97c \ud3c9\ud0c4\ud654\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatMapDeep":{"id":"utils/array/flatMapDeep","title":"flatMapDeep","description":"\uc8fc\uc5b4\uc9c4 iteratee \ud568\uc218\ub85c \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\ub97c \uc7ac\uadc0\uc801\uc73c\ub85c \ub9e4\ud551\ud55c \ud6c4, \uacb0\uacfc \ubc30\uc5f4\uc744 \uae4a\uac8c \ud3c9\ud0c4\ud654\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flatten":{"id":"utils/array/flatten","title":"flatten","description":"\uc911\ucca9 \ubc30\uc5f4\uc744 \uc9c0\uc815\ub41c \uae4a\uc774\uae4c\uc9c0 \ud3c9\ud0c4\ud654 \ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flattenDeep":{"id":"utils/array/flattenDeep","title":"flattenDeep","description":"flatten \uc744 \uae30\ubc18\uc73c\ub85c \uc8fc\uc5b4\uc9c4 \uc911\ucca9 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uae4a\uc774\ub97c \ud3c9\ud0c4\ud654\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/flattenDeepThenMap":{"id":"utils/array/flattenDeepThenMap","title":"flattenDeepThenMap","description":"\uc911\ucca9 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uae4a\uc774\ub97c \ud3c9\ud0c4\ud654 \ud55c \ud6c4 \uc81c\uacf5\ub41c iteratee \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac01 \uc694\uc18c\ub97c \ub9e4\ud551\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/forEachRight":{"id":"utils/array/forEachRight","title":"forEachRight","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc21c\ud68c\ud558\uba70 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/intersection":{"id":"utils/array/intersection","title":"intersection","description":"\ub450 \ubc30\uc5f4 \ub0b4\uc5d0\uc11c \ub3d9\uc77c\ud558\uac8c \uc874\uc7ac\ud558\ub294, \uad50\ucc28\ub41c \uac12\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/intersectionWithDuplicates":{"id":"utils/array/intersectionWithDuplicates","title":"intersectionWithDuplicates","description":"\ub450 \ubc30\uc5f4 \ub0b4\uc5d0\uc11c \ub3d9\uc77c\ud558\uac8c \uc874\uc7ac\ud558\ub294, \uad50\ucc28\ub41c \uac12\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/mapRight":{"id":"utils/array/mapRight","title":"mapRight","description":"\uc8fc\uc5b4\uc9c4 \ubc30\uc5f4\uc758 \uac01 \uc694\uc18c\uc5d0 \ub300\ud574 \uc624\ub978\ucabd\uc5d0\uc11c \uc67c\ucabd\uc73c\ub85c \uc21c\ud68c\ud558\uba70 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uace0, \uacb0\uacfc\ub97c \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\ub85c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/partition":{"id":"utils/array/partition","title":"partition","description":"\uccab \ubc88\uc9f8 \uc778\uc790\uc758 \ubc30\uc5f4\uc744 \uae30\uc900\uc73c\ub85c 2\ubc88\uc9f8 \uc778\uc790\uc778 predicate \ud568\uc218\uac00 true\ub97c \ubc18\ud658\ud558\ub294 \uc694\uc18c\ub4e4\uc758 \ubaa8\uc74c\uacfc false\ub97c \ubc18\ud658\ud558\ub294 \uc694\uc18c\ub4e4\uc758 \ubaa8\uc74c \ub450 \uadf8\ub8f9\uc73c\ub85c \ub098\ub208 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/shuffle":{"id":"utils/array/shuffle","title":"shuffle","description":"\ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc758 \uc21c\uc11c\ub97c \ubb34\uc791\uc704\ub85c \uc11e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/swap":{"id":"utils/array/swap","title":"swap","description":"\ubc30\uc5f4 \ub0b4 \ub450 \uc694\uc18c\uc758 \uc704\uce58\ub97c \uad50\ud658\ud558\uba70, \uc635\uc158\uc5d0 \ub530\ub77c \uc6d0\ubcf8 \ubc30\uc5f4\uc744 \uc218\uc815\ud558\uac70\ub098 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/take":{"id":"utils/array/take","title":"take","description":"\ubc30\uc5f4\uc758 \uccab \uc694\uc18c\ubd80\ud130 n\uac1c\uc758 \uc694\uc18c\ub97c \uac00\uc838\uc628 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/union":{"id":"utils/array/union","title":"union","description":"\ub450 \ubc30\uc5f4\uc744 \uacb0\ud569 \ud6c4, \uc911\ubcf5 \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/array/uniq":{"id":"utils/array/uniq","title":"uniq","description":"\uc911\ubcf5 \uc694\uc18c\ub97c \uc81c\uc678\ud574 \uace0\uc720\ud55c \uac12\ub9cc\uc744 \uac16\ub294 \uc0c8\ub85c\uc6b4 \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyClipboardImage":{"id":"utils/clipboard/copyClipboardImage","title":"copyClipboardImage","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \uc774\ubbf8\uc9c0 \uc18c\uc2a4\ub97c \ud1b5\ud574 \uc774\ubbf8\uc9c0\ub97c \uc77d\uc5b4 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyClipboardText":{"id":"utils/clipboard/copyClipboardText","title":"copyClipboardText","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \ubb38\uc790\uc5f4\uc744 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. Clipboard API\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \ube0c\ub77c\uc6b0\uc800 \ud658\uacbd\uc77c \uacbd\uc6b0 clipboardFallbackTextCopy\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/copyFallbackClipboardText":{"id":"utils/clipboard/copyFallbackClipboardText","title":"copyFallbackClipboardText","description":"\uc778\uc790\ub85c \ub118\uaca8\uc900 \ubb38\uc790\uc5f4\uc744 Clipboard\uc5d0 \uc800\uc7a5\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/readClipboardContents":{"id":"utils/clipboard/readClipboardContents","title":"readClipboardContents","description":"Clipboard\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8\ub97c \ud3ec\ud568\ud55c html, \uc774\ubbf8\uc9c0 \ub4f1 \ub2e4\uc591\ud55c \uc720\ud615\uc758 \ucee8\ud150\uce20\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/clipboard/readClipboardText":{"id":"utils/clipboard/readClipboardText","title":"readClipboardText","description":"Clipboard\uc5d0 \uc800\uc7a5\ub41c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub97c \uc77d\uc5b4\uc624\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/abRandom":{"id":"utils/common/abRandom","title":"abRandom","description":"50% \ud655\ub960\ub85c 0\ub610\ub294 1\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/asyncNoop":{"id":"utils/common/asyncNoop","title":"asyncNoop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, Promise\ub97c \ubc18\ud658\ud558\ub294 async \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/deepCopy":{"id":"utils/common/deepCopy","title":"deepCopy","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \uac12\uc744 \uae4a\uc740 \ubcf5\uc0ac\ub97c \uc218\ud589\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/delay":{"id":"utils/common/delay","title":"delay","description":"\uc8fc\uc5b4\uc9c4 \uc2dc\uac04\ub9cc\ud07c \uae30\ub2e4\ub9b0 \ub4a4 \ub2e4\uc74c \ub3d9\uc791\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqId":{"id":"utils/common/getUniqId","title":"getUniqId","description":"\uc720\ub2c8\ud06c\ud55c \uc544\uc774\ub514\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getUniqTime":{"id":"utils/common/getUniqTime","title":"getUniqTime","description":"\uae30\ubcf8\uc801\uc73c\ub85c new Date().getTime() \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc774\uc9c0\ub9cc, \ub3d9\uc77c \uc2dc\uac04\uc5d0 \uc5ec\ub7ec\ubc88 \ud638\ucd9c \ud560 \uacbd\uc6b0 \uc720\ub2c8\ud06c \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/getViewportSize":{"id":"utils/common/getViewportSize","title":"getViewportSize","description":"\ud604\uc7ac Viewport Size\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/hexToRgba":{"id":"utils/common/hexToRgba","title":"hexToRgba","description":"16\uc9c4\uc218 \uc0c9\uc0c1 \ucf54\ub4dc(Hex)\ub97c RGB\ud615\uc2dd\uc73c\ub85c \ubcc0\uacbd\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. (HEX -> RGB)","sidebar":"tutorialSidebar"},"utils/common/identity":{"id":"utils/common/identity","title":"identity","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uac12\uc744 \uadf8\ub300\ub85c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/noop":{"id":"utils/common/noop","title":"noop","description":"\uc544\ubb34 \ub3d9\uc791 \ud558\uc9c0 \uc54a\uace0, undefined\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/once":{"id":"utils/common/once","title":"once","description":"\uc8fc\uc5b4\uc9c4 \ucf5c\ubc31 \ud568\uc218\ub97c \ud55c \ubc88\ub9cc \uc2e4\ud589\ud558\uac8c \ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \uccab \ubc88\uc9f8 \ud638\ucd9c \uc774\ud6c4\uc5d0\ub294 \uc774\uc804\uc5d0 \uc2e4\ud589\ub41c \uacb0\uacfc\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/parseJSON":{"id":"utils/common/parseJSON","title":"parseJSON","description":"\ubb38\uc790\uc5f4 \uc678\uc758 \ud0c0\uc785\uc740 \uadf8\ub300\ub85c \ubc18\ud658\ud558\uba70, \ubb38\uc790\uc5f4\uc778 \uacbd\uc6b0 \uc815\ud655\ud55c JSON Format\uc73c\ub85c \ub118\uae38 \uacbd\uc6b0 \ud574\ub2f9 \ubb38\uc790\uc5f4\uc744 JSON.parse\ub85c \ubcc0\ud658 \ud6c4 \ubc18\ud658\ub41c \uac12\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4. \ub9cc\uc57d \uc815\ud655\ud55c JSON Format\uc774 \uc544\ub2cc \uacbd\uc6b0 \uc5d0\ub7ec\ub97c \ubc1c\uc0dd\uc2dc\ud0b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/pickFalsy":{"id":"utils/common/pickFalsy","title":"pickFalsy","description":"\uc120\ud0dd\ud55c \ud0c0\uc785\uc5d0 \ub300\ud55c falsy \uccb4\ud06c \ud568\uc218\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/common/size":{"id":"utils/common/size","title":"size","description":"\uc8fc\uc5b4\uc9c4 \uac12\uc758 \ud06c\uae30\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4. \ud06c\uae30\ub294 \uac12\uc758 \uc720\ud615\uc5d0 \ub530\ub77c \uacb0\uc815\ub429\ub2c8\ub2e4:","sidebar":"tutorialSidebar"},"utils/common/wrapInArray":{"id":"utils/common/wrapInArray","title":"wrapInArray","description":"\ubc30\uc5f4\uc774 \uc544\ub2c8\ub77c\uba74 \ub798\ud551\ub41c \ubc30\uc5f4\uc744 \ubc18\ud658\ud558\uace0, \ubc30\uc5f4\uc774\ub77c\uba74 \ub798\ud551\ud558\uc9c0 \uc54a\uace0 \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/getOS":{"id":"utils/device/getOS","title":"getOS","description":"userAgent\ub97c \uae30\ubc18\uc73c\ub85c OS \uac12\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isClient":{"id":"utils/device/isClient","title":"isClient","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \ud074\ub77c\uc774\uc5b8\ud2b8(\ube0c\ub77c\uc6b0\uc800)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isMobile":{"id":"utils/device/isMobile","title":"isMobile","description":"\ubaa8\ubc14\uc77c \ud658\uacbd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/device/isSever":{"id":"utils/device/isSever","title":"isServer","description":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub7f0\ud0c0\uc784 \ud658\uacbd\uc774 \uc11c\ubc84(Node.js)\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/convertImageToBase64":{"id":"utils/file/convertImageToBase64","title":"convertImageToBase64","description":"\uc774\ubbf8\uc9c0\ub97c canvas\ub97c \ud65c\uc6a9\ud574 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0 \ud3ec\ub9f7(png, jpeg, webp)\uc758 Base64 \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/convertImageToBlob":{"id":"utils/file/convertImageToBlob","title":"convertImageToBlob","description":"\uc774\ubbf8\uc9c0\ub97c canvas\ub97c \ud65c\uc6a9\ud574 \uc6d0\ud558\ub294 \uc774\ubbf8\uc9c0 \ud3ec\ub9f7(png, jpeg, webp)\uc758 Blob \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getBlobFromUrl":{"id":"utils/file/getBlobFromUrl","title":"getBlobFromUrl","description":"URL \ubb38\uc790\uc5f4\uc744 \uc778\uc790\ub85c \ubc1b\uc544, \ud574\ub2f9 URL\ub85c fetch \uc694\uccad \ud6c4 \uc751\ub2f5 \ubc1b\uc740 Response \uac1d\uccb4\ub97c Blob \uac1d\uccb4\ub85c \ubcc0\ud658 \ud6c4 \uc774\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMEType":{"id":"utils/file/getMIMEType","title":"getMIMEType","description":"getMIMETypeFromFile, getMIMETypeFromResponse, getMIMETypeFromUrl \uc744 \ud1b5\ud569\ud55c MIME \ud0c0\uc785\uc744 \uc5bb\uc744 \uc218 \uc788\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromFile":{"id":"utils/file/getMIMETypeFromFile","title":"getMIMETypeFromFile","description":"File \uac1d\uccb4\ub97c \uc778\uc790\ub85c\ubc1b\uc544, \ud574\ub2f9 File \uac1d\uccb4\ub85c\ubd80\ud130 MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromResponse":{"id":"utils/file/getMIMETypeFromResponse","title":"getMIMETypeFromResponse","description":"Response \uac1d\uccb4\ub97c \uc778\uc790\ub85c\ubc1b\uc544, \ud574\ub2f9 Response \uac1d\uccb4\ub85c\ubd80\ud130 MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/file/getMIMETypeFromUrl":{"id":"utils/file/getMIMETypeFromUrl","title":"getMIMETypeFromUrl","description":"URL \ubb38\uc790\uc5f4\uc744 \uc778\uc790\ub85c \ubc1b\uc544, \ud574\ub2f9 URL\ub85c fetch \uc694\uccad \ud6c4 \uc751\ub2f5 \ubc1b\uc740 Response \uac1d\uccb4\uc5d0\uc11c MIME \ud0c0\uc785\uc744 \ucd94\ucd9c\ud558\ub294 \ube44\ub3d9\uae30 \ud568\uc218\uc785\ub2c8\ub2e4. MIME \ud0c0\uc785\uc744 \uac00\uc838\uc624\ub294\ub370 \uc2e4\ud328\ud558\uba74 \ube48 \ubb38\uc790\uc5f4(\'\')\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberByUnits":{"id":"utils/formatter/formatNumberByUnits","title":"formatNumberByUnits","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uc22b\uc790\ub97c \ub2e8\uc704 \ubcc4\ub85c \uad6c\ubd84\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberCurrency":{"id":"utils/formatter/formatNumberCurrency","title":"formatNumberCurrency","description":"\uc778\uc790\ub85c \ubc1b\uc740 \uc22b\uc790\ub97c \ub2e8\uc704 \ubcc4\ub85c \uad6c\ubd84\ud558\uace0 \ud1b5\ud654 \ub2e8\uc704\ub97c \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatNumberWithCommas":{"id":"utils/formatter/formatNumberWithCommas","title":"formatNumberWithCommas","description":"\ubb38\uc790\uc5f4 \ub610\ub294 \uc22b\uc790\ub97c \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \ucc9c \ub2e8\uc704\ub85c (,)comma\ub97c \ucd94\uac00\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/formatter/formatPhoneNumber":{"id":"utils/formatter/formatPhoneNumber","title":"formatPhoneNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc804\ud654 \ubc88\ud638 \ud3ec\ub9f7\uc73c\ub85c -(hyphen)\uc744 \ub123\uc5b4\uc11c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/average":{"id":"utils/math/average","title":"average","description":"\ubc30\uc5f4 \uc694\uc18c\uc758 \ud569\uc758 \ud3c9\uade0\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/max":{"id":"utils/math/max","title":"max","description":"\ubc30\uc5f4\uc5d0\uc11c \ucd5c\ub313\uac12\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/min":{"id":"utils/math/min","title":"min","description":"\ubc30\uc5f4\uc5d0\uc11c \ucd5c\uc19f\uac12\uc744 \ucc3e\uc2b5\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/range":{"id":"utils/math/range","title":"range","description":"\uc8fc\uc5b4\uc9c4 \ubc94\uc704 \ub0b4\uc758 \uc22b\uc790 \ubc30\uc5f4\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/math/sum":{"id":"utils/math/sum","title":"sum","description":"\ubc30\uc5f4 \uc694\uc18c\uc758 \ud569\uc744 \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/deleteEmptyProperties":{"id":"utils/object/deleteEmptyProperties","title":"deleteEmptyProperties","description":"\uac1d\uccb4\uc758 \uc911\ucca9 \uac1d\uccb4/\ubc30\uc5f4\uc744 \ud3ec\ud568\ud55c \ubaa8\ub4e0 \ud504\ub85c\ud37c\ud2f0\ub97c \uc21c\ud68c\ud558\uba74\uc11c \uac12\uc774 \uc544\ub798 \ub098\uc5f4\ud55c \ube48 \uac12\ub4e4 \uc911 \ud558\ub098\ub77c\uba74, \ud574\ub2f9 \ud504\ub85c\ud37c\ud2f0\ub4e4\uc744 \uc81c\uac70\ud55c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/groupBy":{"id":"utils/object/groupBy","title":"groupBy","description":"\ubc30\uc5f4\uc758 \uc694\uc18c\ub4e4\uc744 \uc81c\uacf5\ub41c \ucf5c\ubc31 \ud568\uc218 callbackFn\uc5d0 \ub530\ub77c \uadf8\ub8f9\ud654\ud558\uc5ec, \uac01 \ud0a4\uc5d0 \ud574\ub2f9\ud558\ub294 \ud56d\ubaa9\ub4e4\uc758 \ubc30\uc5f4\uc744 \ud3ec\ud568\ud558\ub294 \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/invert":{"id":"utils/object/invert","title":"invert","description":"\uac1d\uccb4\uc758 key\uc640 value\ub97c \ub4a4\uc9d1\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mapKeys":{"id":"utils/object/mapKeys","title":"mapKeys","description":"\uc8fc\uc5b4\uc9c4 \uac1d\uccb4\uc758 \uac01 \ud0a4\uc5d0 \ub300\ud574 \uc81c\uacf5\ub41c \ubcc0\ud658 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c8 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uc6d0\ubcf8 \uac1d\uccb4\uc758 \ud0a4\ub4e4\uc744 \ubcc0\ud658\ud55c \ud6c4 \uc0dd\uc131\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mapValues":{"id":"utils/object/mapValues","title":"mapValues","description":"\uc8fc\uc5b4\uc9c4 \uac1d\uccb4\uc758 \uac01 \uac12\uc5d0 \ub300\ud574 \uc81c\uacf5\ub41c \ubcc0\ud658 \ud568\uc218\ub97c \ud638\ucd9c\ud558\uc5ec \uc0c8 \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uc6d0\ubcf8 \uac1d\uccb4\uc758 \uac12\ub4e4\uc744 \ubcf5\uc0ac\ud558\uc5ec \ubcc0\ud658\ud55c \ud6c4 \uc0dd\uc131\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/mergeProperties":{"id":"utils/object/mergeProperties","title":"mergeProperties","description":"\uae30\uc900\uc774 \ub418\ub294 target \uac1d\uccb4\uc640 source \uac1d\uccb4\uc758 \ud504\ub85c\ud37c\ud2f0\ub97c \ubcd1\ud569\ud558\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectEntries":{"id":"utils/object/objectEntries","title":"objectEntries","description":"Object.entries()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectKeys":{"id":"utils/object/objectKeys","title":"objectKeys","description":"Object.keys()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\uc9c0\ub9cc key\ud0c0\uc785\uc744 \uc9c0\ucf1c\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/objectValues":{"id":"utils/object/objectValues","title":"objectValues","description":"Object.values()\uc640 \ub3d9\uc77c\ud558\uac8c \ub3d9\uc791\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/omit":{"id":"utils/object/omit","title":"omit","description":"\uccab \ubc88\uc9f8 \uc778\uc790\ub85c \ub123\uc740 \uac1d\uccb4\ub97c \uae30\uc900\uc73c\ub85c \ub450 \ubc88\uc9f8 \uc778\uc790\ub85c \ub123\uc740 keys \uc694\uc18c\uc5d0 \ub300\uc751\ud558\ub294 \ud504\ub85c\ud37c\ud2f0\ub97c \uc0dd\ub7b5\ud55c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/object/pick":{"id":"utils/object/pick","title":"pick","description":"\uc778\uc790\ub85c \ub123\uc740 keys\ub85c \uad6c\uc131\ub41c \uac1d\uccb4\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ubc18\ud658\ub41c \uac1d\uccb4\ub294 \uae4a\uc740 \ubcf5\uc0ac\ub41c \uc0c8\ub85c\uc6b4 \uac1d\uccb4\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/countSubstringOccurrences":{"id":"utils/string/countSubstringOccurrences","title":"countSubstringOccurrences","description":"\ubb38\uc790\uc5f4\uc5d0\uc11c \ud2b9\uc815 \ud558\uc704 \ubb38\uc790\uc5f4\uc774 \uc5bc\ub9c8\ub098 \ubc18\ubcf5 \ub4f1\uc7a5\ud588\ub294\uc9c0 \ud69f\uc218\ub97c \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractLetters":{"id":"utils/string/extractLetters","title":"extractLetters","description":"\uc784\uc758\uc758 \ubb38\uc790\uc5f4\uc5d0 \ub300\ud574 \uc120\ud0dd\ud55c \ubb38\uc790 \uc18d\uc131\ub9cc \ubc18\uc601\uc2dc\ud0a8 \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \uc0dd\uc131\ud558\uc5ec \ubc18\ud658\ud558\ub294 \uba54\uc11c\ub4dc \uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/extractNumber":{"id":"utils/string/extractNumber","title":"extractNumber","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \uc22b\uc790\ub97c \uc81c\uc678\ud55c \ubaa8\ub4e0 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/removeSpecialCharacters":{"id":"utils/string/removeSpecialCharacters","title":"removeSpecialCharacters","description":"\ubb38\uc790\uc5f4\uc744 \uc785\ub825\ud558\uba74 \ud2b9\uc218 \ubb38\uc790\ub97c \uc81c\uac70\ud55c \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/repeatCharacters":{"id":"utils/string/repeatCharacters","title":"repeatCharacters","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc758 \uac01 \ubb38\uc790\ub97c \uc8fc\uc5b4\uc9c4 \ubc18\ubcf5 \ud69f\uc218\ub9cc\ud07c \ubc18\ubcf5\ud574\uc11c \uc0c8\ub85c\uc6b4 \ubb38\uc790\uc5f4\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/reverseString":{"id":"utils/string/reverseString","title":"reverseString","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc744 \ub4a4\uc9d1\uc740 \ud615\ud0dc\ub85c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/string/serialize":{"id":"utils/string/serialize","title":"serialize","description":"\uac1d\uccb4\ub85c \ub4e4\uc5b4\uc628 \uac12\uc744 query paramater\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc9c1\ub82c\ud654\ud574\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/style/rem":{"id":"utils/style/rem","title":"rem","description":"Root \uc694\uc18c(html)\uc758 fontSize\ub97c \uae30\ubc18\uc73c\ub85c pixel \uac12\uc744 rem \ud615\ud0dc\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/hasProperty":{"id":"utils/validator/hasProperty","title":"hasProperty","description":"\uac1d\uccb4\uac00 \uc9c0\uc815\ub41c \ud504\ub85c\ud37c\ud2f0\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub294\uc9c0\ub97c \ub098\ud0c0\ub0b4\ub294 boolean\uc744 \ubc18\ud658\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. \ub9cc\uc57d, true\ub77c\uba74 \ud504\ub85c\ud37c\ud2f0\uc758 \ud0c0\uc785\uc774 \uc881\ud600\uc9d1\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isArray":{"id":"utils/validator/isArray","title":"isArray","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubc30\uc5f4\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Array\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isBoolean":{"id":"utils/validator/isBoolean","title":"isBoolean","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubd88\ub9ac\uc5b8\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 boolean\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isEqual":{"id":"utils/validator/isEqual","title":"isEqual","description":"\uc778\uc790\ub85c \uc8fc\uc5b4\uc9c4 \ub450 \uac12\uc744 \uae4a\uc740 \ube44\uad50\ud574\uc11c \uac19\uc740\uc9c0 \ub2e4\ub978\uc9c0 \uc5ec\ubd80\ub97c \ubc18\ud658\ud574\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFloat":{"id":"utils/validator/isFloat","title":"isFloat","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc720\ud55c\ud55c \ubd80\ub3d9\uc18c\uc218\uc810 \uc22b\uc790\uc778\uc9c0\ub97c \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isFuntion":{"id":"utils/validator/isFuntion","title":"isFunction","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ud568\uc218\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Function\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isInRange":{"id":"utils/validator/isInRange","title":"isInRange","description":"\ub300\uc0c1 \uac12\uc774 \uc8fc\uc5b4\uc9c4 \ubc94\uc704 \ub0b4\uc5d0 \uc788\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isMIMEType":{"id":"utils/validator/isMIMEType","title":"isMIMEType","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 MIME Type\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 MIME Type\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNil":{"id":"utils/validator/isNil","title":"isNil","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790 \ud0c0\uc785\uc774 undefined | null\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNotNil":{"id":"utils/validator/isNotNil","title":"isNotNil","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 null \ub610\ub294 undefined\uac00 \uc544\ub2cc\uc9c0 \uac80\uc0ac\ud558\uace0, \uc544\ub2c8\ub77c\uba74 \uc8fc\uc5b4\uc9c4 \uc778\uc790 \ud0c0\uc785 \uadf8\ub300\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumber":{"id":"utils/validator/isNumber","title":"isNumber","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc22b\uc790\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 number\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isNumericString":{"id":"utils/validator/isNumericString","title":"isNumericString","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc22b\uc790(0-9)\ub85c\ub9cc \uad6c\uc131\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPlainObject":{"id":"utils/validator/isPlainObject","title":"isPlainObject","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Plain Object(\uc77c\ubc18 \uac1d\uccb4) \uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPrimitive":{"id":"utils/validator/isPrimitive","title":"isPrimitive","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \uc6d0\uc2dc\uac12\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Primitive\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isPromise":{"id":"utils/validator/isPromise","title":"isPromise","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 Promise\uc778\uc9c0 \uac80\uc0ac\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. Promise\uac00 \ub9de\ub2e4\uba74 \ud0c0\uc785\uc744 \uc881\ud600\uc90d\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isReference":{"id":"utils/validator/isReference","title":"isReference","description":"\ucc38\uc870 \ud0c0\uc785\uc740 \uac1d\uccb4, \ubc30\uc5f4, \ud568\uc218 \ub4f1 \ube44\uc6d0\uc2dc \ud0c0\uc785\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4. \uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ucc38\uc870 \ud0c0\uc785\uc778\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isString":{"id":"utils/validator/isString","title":"isString","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 \ubb38\uc790\uc5f4\uc778\uc9c0 \uac80\uc0ac\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 string\uc73c\ub85c \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isSubset":{"id":"utils/validator/isSubset","title":"isSubset","description":"\ub450 \ubc88\uc9f8 \uc778\uc790\ub85c \uc8fc\uc5b4\uc9c0\ub294 \ubc30\uc5f4\uc758 \ubaa8\ub4e0 \uc694\uc18c\ub97c \uccab \ubc88\uc9f8 \uc778\uc790\uc758 \ubc30\uc5f4\uc774 \uc644\uc804\ud788 \ud3ec\ud568\ud558\ub294\uc9c0(\ubd80\ubd84\uc9d1\ud569) \uc5ec\ubd80\ub97c boolean\uc73c\ub85c \ubc18\ud658\ud569\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidEmail":{"id":"utils/validator/isValidEmail","title":"isValidEmail","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 \uc774\uba54\uc77c \ud615\uc2dd\uc744 \uc900\uc218\ud558\ub294\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPassword":{"id":"utils/validator/isValidPassword","title":"isValidPassword","description":"KISA-\ud55c\uad6d \uc778\ud130\ub137 \uc9c4\ud765\uc6d0 \uc758 \ud328\uc2a4\uc6cc\ub4dc \uaddc\uce59\uc744 \uae30\ubc18\uc73c\ub85c \ud328\uc2a4\uc6cc\ub4dc \uc720\ud6a8\uc131 \uac10\uc0ac\ub97c \ud560 \uc218 \uc788\ub294 \uc720\ud2f8 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isValidPhoneNumberFormat":{"id":"utils/validator/isValidPhoneNumberFormat","title":"isValidPhoneNumberFormat","description":"\uc8fc\uc5b4\uc9c4 \ubb38\uc790\uc5f4\uc774 -(hyphen)\uc744 \ud3ec\ud568\ud55c \uc804\ud654\ubc88\ud638 \ud615\uc2dd\uc778\uc9c0 \ud655\uc778\ud558\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"},"utils/validator/isWindow":{"id":"utils/validator/isWindow","title":"isWindow","description":"\uc8fc\uc5b4\uc9c4 \uc778\uc790\uac00 window \uac1d\uccb4\uc778\uc9c0 \ud655\uc778\ud558\uace0, \ub9de\ub2e4\uba74 \uc778\uc790\uc758 \ud0c0\uc785\uc744 Window\ub85c \ud0c0\uc785\uc744 \uc881\ud600\uc8fc\ub294 \ud568\uc218\uc785\ub2c8\ub2e4.","sidebar":"tutorialSidebar"}}}}')}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.20562a39.js b/assets/js/fbe6690a.20562a39.js deleted file mode 100644 index 2777a8915..000000000 --- a/assets/js/fbe6690a.20562a39.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see fbe6690a.20562a39.js.LICENSE.txt */ -"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7049],{8643:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>f,frontMatter:()=>s,metadata:()=>l,toc:()=>p});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useStep",l={id:"react/hooks/useStep",title:"useStep",description:"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useStep.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useStep",permalink:"/modern-kit/docs/react/hooks/useStep",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage"},next:{title:"useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(!0),{currentStep:s,hasNextStep:c,hasPrevStep:l,setStep:u,goToNextStep:d,goToPrevStep:p,resetStep:b}=(0,o.g4)({maxStep:3,infinite:t}),f={width:"300px",height:"120px",fontSize:"21px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{p((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{d((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{u(2,(({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"2\uc2a4\ud0ed\uc73c\ub85c \uc774\ub3d9"}),(0,i.jsx)(e.button,{onClick:()=>{b((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ucd08\uae30\ud654 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"infinite \ud1a0\uae00"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["currentStep: ",s]}),(0,i.jsxs)(e.p,{children:["hasNextStep: ",`${c}`]}),(0,i.jsxs)(e.p,{children:["hasPrevStep: ",`${l}`]}),(0,i.jsxs)(e.p,{children:["infinite: ",`${t}`]})]}),(0,i.jsxs)(e.div,{children:[0===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"red"},children:"0\ubc88 Step Box"}),1===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"green"},children:"1\ubc88 Step Box"}),2===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"blue"},children:"2\ubc88 Step Box"}),3===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"yellow"},children:"3\ubc88 Step Box"})]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usestep",children:"useStep"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,i.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubc30\uc5f4\uc758 \uc778\ub371\uc2a4\uc640 \ud638\ud658\ub420 \uc218 \uc788\uac8c ",(0,i.jsx)(t.code,{children:"0\ubc88"})," step\ubd80\ud130 \uc2dc\uc791\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStep/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseStepProps {\n maxStep: number;\n initialStep?: number; // default: 0\n infinite?: boolean; // default: false\n}\n\ntype StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useStep: ({ maxStep, initialStep, infinite }: UseStepProps) => {\n currentStep: number; // \ud604\uc7ac Step\n hasNextStep: boolean; // \ub2e4\uc74c Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n hasPrevStep: boolean; // \uc774\uc804 Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n setStep: (\n step: SetStateAction,\n action?: StepAction\n ) => void; // \ud2b9\uc815 Step \uc774\ub3d9 \ud568\uc218\n goToNextStep: (action?: StepAction) => void; // \ub2e4\uc74c Step \uc774\ub3d9 \ud568\uc218\n goToPrevStep: (action?: StepAction) => void; // \uc774\uc804 Step \uc774\ub3d9 \ud568\uc218\n resetStep: (action?: StepAction) => void; // initialValue \uc774\ub3d9 \ud568\uc218\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStep } from '@modern-kit/react';\n\nexport const Example = () => {\n const [infinite, setInfinite] = useState(true);\n const {\n currentStep,\n hasNextStep,\n hasPrevStep,\n setStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n } = useStep({ maxStep: 3, infinite: infinite });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleSetStep = () => {\n setStep(2, ({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleResetStep = () => {\n resetStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n \n \n
\n
\n

currentStep: {currentStep}

\n

hasNextStep: {`${hasNextStep}`}

\n

hasPrevStep: {`${hasPrevStep}`}

\n

infinite: {`${infinite}`}

\n
\n
\n {currentStep === 0 && (\n
\n 0\ubc88 Step Box\n
\n )}\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n {currentStep === 3 && (\n
\n 3\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>et,Bg:()=>be,Cf:()=>ye,D9:()=>Ve,FS:()=>ot,GN:()=>Ce,Hk:()=>ve,KS:()=>nt,LN:()=>Ue,Mm:()=>ge,Nr:()=>oe,Pr:()=>De,S1:()=>se,VP:()=>xe,XI:()=>Te,Xs:()=>Qe,Yz:()=>Ne,_:()=>ze,a9:()=>ue,ac:()=>Le,cM:()=>at,df:()=>pe,fB:()=>tt,g4:()=>Se,iP:()=>st,ii:()=>Fe,jr:()=>je,my:()=>fe,nA:()=>he,oM:()=>d,oz:()=>Xe,qQ:()=>He,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>me,yU:()=>Ye,yn:()=>Ee,z$:()=>ke});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var f="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,m=f||w||Function("return this")(),h=m.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=h?h.toStringTag:void 0,S=Object.prototype.toString,k="[object Null]",C="[object Undefined]",E=h?h.toStringTag:void 0;var j="[object Symbol]",T=/\s/,N=/^\s+/;function O(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var $=NaN,P=/^[-+]0x[0-9a-f]+$/i,_=/^0b[01]+$/i,R=/^0o[0-7]+$/i,I=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:k:E&&E in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return S.call(e)}(e)}(e)==j}(e))return $;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=_.test(e);return n||R.test(e)?I(e.slice(2),n?2:8):P.test(e)?$:+e}var z=function(){return m.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function B(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(f(e))return m(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function m(e){return s=void 0,p&&i?b(e):(i=r=void 0,a)}function h(){var e=z(),n=f(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=M(t)||0,O(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(M(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),h.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},h.flush=function(){return void 0===s?a:m(z())},h}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function G(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const W=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return G(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>B(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,f]=(0,r.useState)(!1),w=!b,m=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),h=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),f(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:m,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:h,onLoad:v},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})};const fe=(0,r.forwardRef)(((e,t)=>{var{as:n,children:a,callback:s}=e,c=o(e,["as","children","callback"]);const{ref:l}=function(e){const t=(0,r.useRef)(null),n=ne(e);return(0,r.useEffect)((()=>{const e=function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown",i=({target:e})=>{const i=t.current;i&&!i.contains(e)&&n(i)};return document.addEventListener(e,i),()=>{document.removeEventListener(e,i)}}),[n]),{ref:t}}(s);return(0,i.jsx)(n||"div",Object.assign({ref:ce(l,t)},c,{children:a}))})),we=D()?r.useLayoutEffect:r.useEffect;(0,r.createContext)({parentPortalElement:null});const me=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},he=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},ve=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ge(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function xe(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield G(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return W(e);if(!("write"in window.navigator.clipboard))return W(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return W(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ye(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Se({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:b,resetStep:f}}function ke(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Se({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ce(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Ee(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ce("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function je(e,{preserveTitleOnUnmount:t=!1}={}){we((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Te({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function Ne(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Oe="modern-kit-local-storage",$e="modern-kit-session-storage",Pe={localStorage:{key:Oe,subscribe:e=>{window.addEventListener(Oe,e)},unsubscribe:e=>{window.removeEventListener(Oe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Oe))}},sessionStorage:{key:$e,subscribe:e=>{window.addEventListener($e,e)},unsubscribe:e=>{window.removeEventListener($e,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent($e))}}},_e=e=>Pe[e],Re=_e("localStorage"),Ie=e=>window.localStorage.getItem(e),Me=e=>(Re.subscribe(e),()=>{Re.unsubscribe(e)});function ze(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Me,(()=>Ie(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ie(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Re.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Re.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Ae=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Le(e,t){const[n,i]=(0,r.useState)(Ae(e,t));return(0,r.useEffect)((()=>{const t=window.matchMedia(e),n=e=>i(e.matches);return t.addEventListener("change",n),()=>t.removeEventListener("change",n)}),[e]),n}function Fe(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)({screenX:void 0,screenY:void 0,clientX:void 0,clientY:void 0,pageX:void 0,pageY:void 0,elementRelativeX:void 0,elementRelativeY:void 0,elementPositionX:void 0,elementPositionY:void 0});return we((()=>{const t=t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t,l={},u={};if(e.current){const t=e.current.getBoundingClientRect(),n=o-t.left,i=a-t.top,r=t.left+window.scrollX,s=t.top+window.scrollY;l.elementRelativeX=n,l.elementRelativeY=i,u.elementPositionX=r,u.elementPositionY=s}n(Object.assign(Object.assign({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c},l),u))};return document.addEventListener("mousemove",t),()=>{document.removeEventListener("mousemove",t)}}),[]),{ref:e,position:t}}const Be=()=>navigator.onLine,qe=()=>!0;function Ue({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Be,qe)}}function Xe(){return Le("(prefers-color-scheme: dark)")?"dark":"light"}function Ve(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ye(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function De({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return we((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Ge=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,We=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Ge(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Ge(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Ge(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Ge(c.width,i.width,s)}};function He(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=We(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Je=_e("sessionStorage"),Ke=e=>window.sessionStorage.getItem(e),Ze=e=>(Je.subscribe(e),()=>{Je.unsubscribe(e)});function Qe(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ze,(()=>Ke(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=Ke(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Je.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Je.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function et(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Se(e))}function tt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return O(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),B(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function nt(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var it={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",b="version",f="architecture",w="console",m="mobile",h="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",S="Apple",k="ASUS",C="BlackBerry",E="Browser",j="Chrome",T="Firefox",N="Google",O="Huawei",$="LG",P="Microsoft",_="Motorola",R="Opera",I="Samsung",M="Sharp",z="Sony",A="Xiaomi",L="Zebra",F="Facebook",B="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},G=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=h),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,B).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,b,c]),J.CPU=U([f]),J.DEVICE=U([l,p,d,w,m,v,h,g,x]),J.ENGINE=J.OS=U([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(it,it.exports);var rt=it.exports;function ot(){const[e,t]=(0,r.useState)(null);return we((()=>{const e=new rt.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function at({name:e="vh",enabledResize:t=!1}={}){we((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}function st(e={}){const{isDebounce:t=!1,wait:n=300}=e,[i,o]=(0,r.useState)({width:null,height:null}),a=(0,r.useCallback)((()=>{o({width:window.innerWidth,height:window.innerHeight})}),[]),s=ne(oe(a,n)),c=(0,r.useMemo)((()=>t?s:a),[a,t,s]);return we((()=>(a(),window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c)})),[a,c]),i}}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.8b1d2b92.js b/assets/js/fbe6690a.8b1d2b92.js new file mode 100644 index 000000000..b00242a06 --- /dev/null +++ b/assets/js/fbe6690a.8b1d2b92.js @@ -0,0 +1,2 @@ +/*! For license information please see fbe6690a.8b1d2b92.js.LICENSE.txt */ +"use strict";(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[7049],{8643:(e,t,n)=>{n.r(t),n.d(t,{Example:()=>d,assets:()=>u,contentTitle:()=>c,default:()=>f,frontMatter:()=>s,metadata:()=>l,toc:()=>p});var i=n(1986),r=n(9937),o=n(384),a=n(7800);const s={},c="useStep",l={id:"react/hooks/useStep",title:"useStep",description:"multi-step process\uc758 step\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4.",source:"@site/docs/react/hooks/useStep.mdx",sourceDirName:"react/hooks",slug:"/react/hooks/useStep",permalink:"/modern-kit/docs/react/hooks/useStep",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"useSessionStorage",permalink:"/modern-kit/docs/react/hooks/useSessionStorage"},next:{title:"useStepState",permalink:"/modern-kit/docs/react/hooks/useStepState"}},u={},d=()=>{const e={button:"button",div:"div",p:"p",...(0,r.a)()},[t,n]=(0,a.useState)(!0),{currentStep:s,hasNextStep:c,hasPrevStep:l,setStep:u,goToNextStep:d,goToPrevStep:p,resetStep:b}=(0,o.g4)({maxStep:3,infinite:t}),f={width:"300px",height:"120px",fontSize:"21px"};return(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.div,{children:[(0,i.jsx)(e.button,{onClick:()=>{p((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\uc774\uc804 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{d((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ub2e4\uc74c \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>{u(2,(({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"2\uc2a4\ud0ed\uc73c\ub85c \uc774\ub3d9"}),(0,i.jsx)(e.button,{onClick:()=>{b((({prev:e,next:t})=>{console.log(`${e}\uc5d0\uc11c ${t}\ub85c \uc774\ub3d9`)}))},children:"\ucd08\uae30\ud654 \uc2a4\ud0ed"}),(0,i.jsx)(e.button,{onClick:()=>n(!t),children:"infinite \ud1a0\uae00"})]}),(0,i.jsxs)(e.div,{children:[(0,i.jsxs)(e.p,{children:["currentStep: ",s]}),(0,i.jsxs)(e.p,{children:["hasNextStep: ",`${c}`]}),(0,i.jsxs)(e.p,{children:["hasPrevStep: ",`${l}`]}),(0,i.jsxs)(e.p,{children:["infinite: ",`${t}`]})]}),(0,i.jsxs)(e.div,{children:[0===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"red"},children:"0\ubc88 Step Box"}),1===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"green"},children:"1\ubc88 Step Box"}),2===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"blue"},children:"2\ubc88 Step Box"}),3===s&&(0,i.jsx)(e.div,{style:{...f,backgroundColor:"yellow"},children:"3\ubc88 Step Box"})]})]})},p=[{value:"Code",id:"code",level:2},{value:"Interface",id:"interface",level:2},{value:"Usage",id:"usage",level:2},{value:"Example",id:"example",level:2}];function b(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"usestep",children:"useStep"})}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"multi-step process"}),"\uc758 ",(0,i.jsx)(t.code,{children:"step"}),"\uc744 \uad00\ub9ac\ud558\uace0 \ucd94\uc801\ud574\uc8fc\ub294 \ucee4\uc2a4\ud140 \ud6c5\uc785\ub2c8\ub2e4."]}),"\n",(0,i.jsxs)(t.p,{children:["\ubc30\uc5f4\uc758 \uc778\ub371\uc2a4\uc640 \ud638\ud658\ub420 \uc218 \uc788\uac8c ",(0,i.jsx)(t.code,{children:"0\ubc88"})," step\ubd80\ud130 \uc2dc\uc791\ud569\ub2c8\ub2e4."]}),"\n",(0,i.jsx)("br",{}),"\n",(0,i.jsx)(t.h2,{id:"code",children:"Code"}),"\n",(0,i.jsx)(t.p,{children:(0,i.jsx)(t.a,{href:"https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/useStep/index.ts",children:"\ud83d\udd17 \uc2e4\uc81c \uad6c\ud604 \ucf54\ub4dc \ud655\uc778"})}),"\n",(0,i.jsx)(t.h2,{id:"interface",children:"Interface"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"interface UseStepProps {\n maxStep: number;\n initialStep?: number; // default: 0\n infinite?: boolean; // default: false\n}\n\ntype StepAction = ({ prev, next }: {\n prev: number;\n next: number;\n}) => void;\n"})}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-ts",metastring:'title="typescript"',children:"const useStep: ({ maxStep, initialStep, infinite }: UseStepProps) => {\n currentStep: number; // \ud604\uc7ac Step\n hasNextStep: boolean; // \ub2e4\uc74c Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n hasPrevStep: boolean; // \uc774\uc804 Step \uc774\ub3d9 \uac00\ub2a5 \uc5ec\ubd80\n setStep: (\n step: SetStateAction,\n action?: StepAction\n ) => void; // \ud2b9\uc815 Step \uc774\ub3d9 \ud568\uc218\n goToNextStep: (action?: StepAction) => void; // \ub2e4\uc74c Step \uc774\ub3d9 \ud568\uc218\n goToPrevStep: (action?: StepAction) => void; // \uc774\uc804 Step \uc774\ub3d9 \ud568\uc218\n resetStep: (action?: StepAction) => void; // initialValue \uc774\ub3d9 \ud568\uc218\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-tsx",metastring:'title="typescript"',children:"import { useStep } from '@modern-kit/react';\n\nexport const Example = () => {\n const [infinite, setInfinite] = useState(true);\n const {\n currentStep,\n hasNextStep,\n hasPrevStep,\n setStep,\n goToNextStep,\n goToPrevStep,\n resetStep,\n } = useStep({ maxStep: 3, infinite: infinite });\n\n const handleGoToNextStep = () => {\n goToNextStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleGoToPrevStep = () => {\n goToPrevStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleSetStep = () => {\n setStep(2, ({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const handleResetStep = () => {\n resetStep(({ prev, next }) => {\n console.log(`${prev}\uc5d0\uc11c ${next}\ub85c \uc774\ub3d9`);\n });\n };\n\n const boxStyle = {\n width: '300px',\n height: '120px',\n fontSize: '21px',\n };\n\n return (\n
\n
\n \n \n \n \n \n
\n
\n

currentStep: {currentStep}

\n

hasNextStep: {`${hasNextStep}`}

\n

hasPrevStep: {`${hasPrevStep}`}

\n

infinite: {`${infinite}`}

\n
\n
\n {currentStep === 0 && (\n
\n 0\ubc88 Step Box\n
\n )}\n {currentStep === 1 && (\n
\n 1\ubc88 Step Box\n
\n )}\n {currentStep === 2 && (\n
\n 2\ubc88 Step Box\n
\n )}\n {currentStep === 3 && (\n
\n 3\ubc88 Step Box\n
\n )}\n
\n
\n );\n};\n"})}),"\n",(0,i.jsx)(t.h2,{id:"example",children:"Example"}),"\n","\n",(0,i.jsx)(d,{})]})}function f(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(b,{...e})}):b(e)}},9937:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var i=n(7800);const r={},o=i.createContext(r);function a(e){const t=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),i.createElement(o.Provider,{value:t},e.children)}},384:(e,t,n)=>{n.d(t,{A:()=>it,B1:()=>he,Bg:()=>be,Cf:()=>ke,D9:()=>We,FS:()=>ct,GN:()=>Ee,Hk:()=>xe,KS:()=>ot,LN:()=>Ye,Mm:()=>ye,Nr:()=>oe,OR:()=>we,Pr:()=>He,S1:()=>se,VP:()=>Se,XI:()=>Oe,Xs:()=>nt,Yz:()=>$e,_:()=>Le,a9:()=>ue,ac:()=>Be,cM:()=>lt,df:()=>pe,fB:()=>rt,g4:()=>Ce,iP:()=>dt,ii:()=>Ue,jr:()=>Ne,my:()=>me,nA:()=>ge,oM:()=>d,oz:()=>De,qQ:()=>Ze,qx:()=>b,uM:()=>ae,wY:()=>le,xX:()=>de,xu:()=>ve,yU:()=>Ge,yn:()=>Te,z$:()=>je});var i=n(1986),r=n(7800);n(4041);function o(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r*{height:100%;left:0;position:absolute;top:0;width:100%}");const d=(0,r.forwardRef)(((e,t)=>{var{ratio:n,children:a,className:s,style:c}=e,l=o(e,["ratio","children","className","style"]);const d=(0,r.useMemo)((()=>Object.assign({paddingTop:`calc(100% * (1 / ${n}))`},c)),[n,c]);if(r.Children.count(a)>1)throw new Error("AspectRatio component expects exactly one child element.");return(0,i.jsx)("div",Object.assign({ref:t,className:u("AspectRatio-module_wrapper__xn3Vo",s),style:d},l,{children:r.Children.only(a)}))}));function p(){const[e,t]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{t(!0)}),[]),e}d.displayName="AspectRatio";const b=({fallback:e=(0,i.jsx)(i.Fragment,{}),children:t})=>p()?(0,i.jsx)(i.Fragment,{children:t}):e;var f="object"==typeof global&&global&&global.Object===Object&&global,w="object"==typeof self&&self&&self.Object===Object&&self,h=f||w||Function("return this")(),m=h.Symbol,v=Object.prototype,g=v.hasOwnProperty,x=v.toString,y=m?m.toStringTag:void 0,S=Object.prototype.toString,k="[object Null]",C="[object Undefined]",j=m?m.toStringTag:void 0;var E="[object Symbol]",T=/\s/,N=/^\s+/;function O(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}var $=NaN,P=/^[-+]0x[0-9a-f]+$/i,R=/^0b[01]+$/i,_=/^0o[0-7]+$/i,I=parseInt;function M(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&function(e){return null==e?void 0===e?C:k:j&&j in Object(e)?function(e){var t=g.call(e,y),n=e[y];try{e[y]=void 0;var i=!0}catch(e){}var r=x.call(e);return i&&(t?e[y]=n:delete e[y]),r}(e):function(e){return S.call(e)}(e)}(e)==E}(e))return $;if(O(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=O(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&T.test(e.charAt(t)););return t}(e)+1).replace(N,""):e}(e);var n=R.test(e);return n||_.test(e)?I(e.slice(2),n?2:8):P.test(e)?$:+e}var z=function(){return h.Date.now()},A="Expected a function",L=Math.max,F=Math.min;function B(e,t,n){var i,r,o,a,s,c,l=0,u=!1,d=!1,p=!0;if("function"!=typeof e)throw new TypeError(A);function b(t){var n=i,o=r;return i=r=void 0,l=t,a=e.apply(o,n)}function f(e){var n=e-c;return void 0===c||n>=t||n<0||d&&e-l>=o}function w(){var e=z();if(f(e))return h(e);s=setTimeout(w,function(e){var n=t-(e-c);return d?F(n,o-(e-l)):n}(e))}function h(e){return s=void 0,p&&i?b(e):(i=r=void 0,a)}function m(){var e=z(),n=f(e);if(i=arguments,r=this,c=e,n){if(void 0===s)return function(e){return l=e,s=setTimeout(w,t),u?b(e):a}(c);if(d)return clearTimeout(s),s=setTimeout(w,t),b(c)}return void 0===s&&(s=setTimeout(w,t)),a}return t=M(t)||0,O(n)&&(u=!!n.leading,o=(d="maxWait"in n)?L(M(n.maxWait)||0,t):o,p="trailing"in n?!!n.trailing:p),m.cancel=function(){void 0!==s&&clearTimeout(s),l=0,i=c=r=s=void 0},m.flush=function(){return void 0===s?a:h(z())},m}var q="Expected a function";function U(e,t,n,i){return new(n||(n=Promise))((function(t,r){function o(e){try{s(i.next(e))}catch(e){r(e)}}function a(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(e){e(i)}))).then(o,a)}s((i=i.apply(e,[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;const X={png:"image/png",jpg:"image/jpeg",jpeg:"image/jpeg",webp:"image/webp"},V=(e,t)=>new Promise(((n,i)=>{e.toBlob((e=>{e?n(e):i(new Error(`Failed to create blob with format ${t}`))}),t)}));function Y(){return"undefined"==typeof window}function D(){return!Y()}function W(e){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return"clipboard"in window.navigator?(yield navigator.clipboard.writeText(e),e):function(e){const t=document.createElement("textarea");t.value=e,t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{return document.execCommand("copy"),e}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}finally{document.body.removeChild(t)}}(e)}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}const G=e=>U(void 0,0,void 0,(function*(){const t=yield fetch(e);return W(yield t.text())}));const H=(e,t,n)=>{const i=Object.keys(e),r=Object.keys(t);if(i.length!==r.length)return!1;for(const o of i)if(!r.includes(o)||!J(e[o],t[o],n))return!1;return!0},J=(e,t,n)=>{if(e===t)return!0;if(Q(e)&&Q(t)&&isNaN(e)&&isNaN(t))return!0;if(Z(e)&&Z(t))return e.toString()===t.toString();if("object"!=typeof e||"object"!=typeof t||null===e||null===t)return!1;if(n.has(e)&&n.get(e)===t)return!0;if(n.set(e,t),e.constructor!==t.constructor)return!1;if(e instanceof Set){if(e.size!==t.size)return!1;const i=[...e],r=[...t];return H(i,r,n)}if(e instanceof Map){if(e.size!==t.size)return!1;for(const[i,r]of e)if(!t.has(i)||!J(r,t.get(i),n))return!1;return!0}return H(e,t,n)};function K(e,t){return J(e,t,new WeakMap)}function Z(e){return"function"==typeof e}function Q(e){return"number"==typeof e}function ee(){}function te(e){if("string"!=typeof e)return e;try{return JSON.parse(e)}catch(e){throw new Error(`Failed to parse data: ${e}`)}}function ne(e=ee){const t=(0,r.useRef)(e);return t.current=e,(0,r.useCallback)(((...e)=>t.current(...e)),[])}function ie(e){const t=ne(e);(0,r.useEffect)((()=>()=>t()),[t])}function re(e,t=K){const[n,i]=(0,r.useState)(e),o=ne(t);return(0,r.useEffect)((()=>{o(n,e)||i(e)}),[o,n,e]),n}function oe(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>B(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}const ae=({children:e,capture:t,wait:n,options:i})=>{const o=r.Children.only(e),a=oe(((...e)=>{const n=null==o?void 0:o.props;if(n)return"function"==typeof n[t]?n[t](...e):void 0}),n,i);return(0,r.cloneElement)(o,{[t]:a})};function se({onIntersectStart:e=ee,onIntersectEnd:t=ee,enabled:n=!0,calledOnce:i=!1,root:o=null,threshold:a=0,rootMargin:s="0px 0px 0px 0px"}){const c=(0,r.useRef)(0),l=(0,r.useRef)(!1),u=(0,r.useRef)(null),d=ne((([r],o)=>{if(!n||!r)return;const a=r.target;r.isIntersecting?(l.current=!0,c.current+=1,e(r)):l.current&&(l.current=!1,c.current+=1,t(r)),i&&c.current>1&&o.unobserve(a)}));return{ref:e=>{u.current&&u.current.disconnect(),u.current=new IntersectionObserver(d,{threshold:a,root:o,rootMargin:s}),e&&u.current.observe(e)}}}function ce(...e){return(0,r.useCallback)(((...e)=>t=>e.forEach((e=>{Z(e)?e(t):null!=e&&(e.current=t)})))(...e),e)}const le=(0,r.forwardRef)(((e,t)=>{var{src:n,threshold:r,root:a,rootMargin:s,alt:c,className:l}=e,u=o(e,["src","threshold","root","rootMargin","alt","className"]);const{ref:d}=se({onIntersectStart:e=>{e.target.src=n},calledOnce:!0,threshold:r,root:a,rootMargin:s}),p=l?`lazy-image ${l}`:"lazy-image";return(0,i.jsx)("img",Object.assign({className:p,ref:ce(t,d),alt:c},u))}));le.displayName="LazyImage";const ue=(0,r.forwardRef)(((e,t)=>{var{width:n,height:a,fallback:s,className:c,style:l,duration:u="0.2s",onLoad:d}=e,p=o(e,["width","height","fallback","className","style","duration","onLoad"]);const[b,f]=(0,r.useState)(!1),w=!b,h=(0,r.useMemo)((()=>({position:"relative",width:n,height:a})),[n,a]),m=(0,r.useMemo)((()=>Object.assign({position:"absolute",top:0,left:0,opacity:w?0:1,transition:`opacity ${u}`},l)),[w,u,l]),v=(0,r.useCallback)((e=>{d&&d(e),f(!0)}),[d]);return(0,i.jsxs)("div",{className:c?`lazy-image-wrapper ${c}`:"lazy-image-wrapper",style:h,children:[w&&s,(0,i.jsx)(le,Object.assign({ref:t,width:n,height:a,style:m,onLoad:v},p))]})}));ue.displayName="FallbackLazyImage";const de=({condition:e,trueComponent:t,falseComponent:n})=>{const o=(e=>"function"==typeof e?e():e)(e);return(0,i.jsx)(r.Fragment,{children:o?t:n})},pe=(0,r.forwardRef)(((e,t)=>{const{onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u}=e,d=o(e,["onIntersectStart","onIntersectEnd","calledOnce","threshold","root","rootMargin","enabled"]),{ref:p}=se({onIntersectStart:n,onIntersectEnd:r,calledOnce:a,threshold:s,root:c,rootMargin:l,enabled:u});return(0,i.jsx)("div",Object.assign({ref:ce(t,p)},d,{children:e.children}))}));pe.displayName="InView";const be=({items:e=[],itemKey:t,renderItem:n})=>{const o=(0,r.useCallback)(((e,n)=>{return function(e){return!function(e){return Object(e)!==e}(e)}(i=e)&&i.constructor===Object?(null==e?void 0:e[t])||n:`${n}_${e}`;var i}),[t]);return(0,i.jsx)(i.Fragment,{children:e.map(((e,t)=>(0,i.jsx)(r.Fragment,{children:n(e,t)},o(e,t))))})},fe=D()?r.useLayoutEffect:r.useEffect;function we(e,t,n,i={}){const r=re(i),o=ne(n);fe((()=>{if(e)return e.addEventListener(t,o,r),()=>{e.removeEventListener(t,o,r)}}),[t,e,r,o])}function he(e){const t=(0,r.useRef)(null),n=(0,r.useMemo)((()=>function(){if(Y())return!1;const e=window.navigator.userAgent;return/Android|webOS|iPhone|iPad|iPod|Windows Phone|BlackBerry|IEMobile|Opera Mini/i.test(e)}()?"touchstart":"mousedown"),[]),i=(0,r.useCallback)((({target:n})=>{const i=t.current;i&&!i.contains(n)&&e(i)}),[e]);return we(window.document,n,i),t}const me=(0,r.forwardRef)(((e,t)=>{var{as:n,children:r,callback:a}=e,s=o(e,["as","children","callback"]);const c=he(a);return(0,i.jsx)(n||"div",Object.assign({ref:ce(c,t)},s,{children:r}))}));(0,r.createContext)({parentPortalElement:null});const ve=({itemKey:e,items:t=[],separator:n,renderItem:o,separatorInterval:a=1,includeLastSeparator:s=!1})=>{const c=(0,r.useCallback)((e=>e===t.length-1?s:(e+1)%a==0),[s,a,t.length]);return(0,i.jsx)(be,{items:t,itemKey:e,renderItem:(e,t)=>(0,i.jsxs)(i.Fragment,{children:[o(e,t),c(t)&&n]})})},ge=({children:e,condition:t,fallback:n=null})=>{const o=(e=>"function"==typeof e?e():e)(t);return(0,i.jsx)(r.Fragment,o?{children:e}:{children:n})},xe=({condition:e,cases:t,defaultCaseComponent:n=null})=>{var o;return(0,i.jsx)(r.Fragment,null==e?{children:n}:{children:null!==(o=t[e])&&void 0!==o?o:n})};function ye(){const[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(!1);return{isLoading:e,blockMultipleClick:e=>a(this,void 0,void 0,(function*(){n.current||(n.current=!0,t(!0),yield e(),n.current=!1,t(!1))}))}}function Se(){const[e,t]=(0,r.useState)(null),[n,i]=(0,r.useState)(null);return{copiedData:e,readData:n,copyText:(0,r.useCallback)((e=>a(this,void 0,void 0,(function*(){try{const n=yield W(e);return t(n),!0}catch(e){return t(null),!1}}))),[]),copyImage:(0,r.useCallback)(((e,n)=>a(this,void 0,void 0,(function*(){var i;const r=null!==(i=null==n?void 0:n.toText)&&void 0!==i&&i;try{const n=yield function(e,t){var n;return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{if(!("clipboard"in window.navigator))return G(e);if(!("write"in window.navigator.clipboard))return G(e);if(null!==(n=null==t?void 0:t.toText)&&void 0!==n&&n)return G(e);const i=yield function(e,t="png"){return new Promise(((n,i)=>{const r=new Image;r.onload=()=>U(this,0,void 0,(function*(){const e=document.createElement("canvas");e.width=r.width,e.height=r.height;try{const i=e.getContext("2d");if(!i)throw new Error("Failed to get 2d context");i.drawImage(r,0,0);const o=yield V(e,X[t]);n(o)}catch(e){console.error(`Failed to load image. message: ${e.mesaage}`),i(e)}})),r.onerror=()=>{i(new Error("Failed to load image"))},r.src=e}))}(e,"png");return yield navigator.clipboard.write([new ClipboardItem({[i.type]:i})]),i}catch(e){throw console.error(`Failed to copy to clipboard. message: ${e.message}`),e}}))}(e,{toText:r});return t(n),!0}catch(e){return t(null),!1}}))),[]),readText:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.readText()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[]),readContents:(0,r.useCallback)((()=>a(this,void 0,void 0,(function*(){try{const e=yield function(){return U(this,0,void 0,(function*(){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{return yield navigator.clipboard.read()}catch(e){throw console.error(`Failed to read clipboard. message: ${e.message}`),e}}))}();return i(e),!0}catch(e){return i(null),!1}}))),[])}}function ke(e=0){const[t,n]=(0,r.useState)(e),i=(0,r.useCallback)((()=>{n((e=>e+1))}),[]),o=(0,r.useCallback)((()=>{n((e=>e-1))}),[]),a=(0,r.useCallback)((()=>{n(e)}),[e]);return{counter:t,setCounter:n,increment:i,decrement:o,reset:a}}function Ce({maxStep:e,initialStep:t=0,infinite:n=!1}){const[i,o]=(0,r.useState)(t),a=(0,r.useMemo)((()=>ii>0),[i]),c=(0,r.useCallback)(((t,n)=>{const r=Z(t)?t(i):t;if(r>=0&&r<=e)return n&&n({prev:i,next:r}),void o(t);throw new Error("Step not valid")}),[i,e]),l=(0,r.useCallback)(((t,n)=>{const r="nextStep"===t;return n?r?0:e:r?i+1:i-1}),[e,i]),u=(0,r.useCallback)(((e,t)=>{if(!n)return;const r=l(e,!0);t&&t({prev:i,next:r}),o(r)}),[n,i,l]),d=(0,r.useCallback)(((e,t)=>{const n=l(e,!1);t&&t({prev:i,next:n}),o(n)}),[i,l]),p=(0,r.useCallback)((e=>{a?d("nextStep",e):u("nextStep",e)}),[a,d,u]),b=(0,r.useCallback)((e=>{s?d("prevStep",e):u("prevStep",e)}),[s,d,u]),f=(0,r.useCallback)((e=>{e&&e({prev:i,next:t}),o(t)}),[i,t]);return{currentStep:i,hasNextStep:a,hasPrevStep:s,setStep:c,goToNextStep:p,goToPrevStep:b,resetStep:f}}function je(e,t=0){const{currentStep:n,goToNextStep:i,goToPrevStep:o,setStep:a}=Ce({maxStep:e.length-1,initialStep:t,infinite:!0}),s=(0,r.useCallback)(((e,t)=>{a(e,t)}),[a]);return{currentItem:e[n],nextIndex:i,prevIndex:o,setIndex:s}}function Ee(e,t,n={}){const[i,o]=(0,r.useState)(e);return[i,oe(o,t,n)]}function Te(e,t={}){const[n,i]=(0,r.useState)(""),[o,a]=Ee("",e,t);return{value:n,debouncedValue:o,onChange:(0,r.useCallback)((e=>{const{value:t}=e.target;i(t),a(t)}),[a]),onReset:(0,r.useCallback)((()=>{i(""),a("")}),[a])}}function Ne(e,{preserveTitleOnUnmount:t=!1}={}){fe((()=>{const n=document.title;return document.title=e,()=>{t||(document.title=n)}}),[e,t])}function Oe({onEnter:e=ee,onLeave:t=ee}={}){const[n,i]=(0,r.useState)(!1),o=(0,r.useRef)(null),a=ne((t=>{i(!0),e(t)})),s=ne((e=>{i(!1),t(e)}));return(0,r.useEffect)((()=>{const e=o.current;if(e)return e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",s),()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",s)}}),[a,s]),{ref:o,isHovered:n}}function $e(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=window.setInterval(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearInterval(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[l,c,s,a]),{set:c,reset:u,clear:l}}const Pe="modern-kit-local-storage",Re="modern-kit-session-storage",_e={localStorage:{key:Pe,subscribe:e=>{window.addEventListener(Pe,e)},unsubscribe:e=>{window.removeEventListener(Pe,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Pe))}},sessionStorage:{key:Re,subscribe:e=>{window.addEventListener(Re,e)},unsubscribe:e=>{window.removeEventListener(Re,e)},dispatchEvent:()=>{window.dispatchEvent(new StorageEvent(Re))}}},Ie=e=>_e[e],Me=Ie("localStorage"),ze=e=>window.localStorage.getItem(e),Ae=e=>(Me.subscribe(e),()=>{Me.unsubscribe(e)});function Le(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(Ae,(()=>ze(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=ze(t),r=n?te(n):i,o=Z(e)?e(r):e;window.localStorage.setItem(t,JSON.stringify(o)),Me.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in localStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.localStorage.removeItem(t),Me.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from localStorage: ${e}`)}}),[t])}}const Fe=(e,t)=>D()?window.matchMedia(e).matches:null!=t&&t;function Be(e,t){const[n,i]=(0,r.useState)(Fe(e,t)),o=(0,r.useCallback)((e=>i(e.matches)),[]);return we(window.matchMedia(e),"change",o),n}const qe={screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,elementRelativeX:null,elementRelativeY:null,elementPositionX:null,elementPositionY:null};function Ue(){const e=(0,r.useRef)(null),[t,n]=(0,r.useState)(qe),i=(0,r.useCallback)((t=>{const{screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c}=t;let l=null,u=null,d=null,p=null;if(e.current){const t=e.current.getBoundingClientRect();l=o-t.left,u=a-t.top,d=t.left+window.scrollX,p=t.top+window.scrollY}n({screenX:i,screenY:r,clientX:o,clientY:a,pageX:s,pageY:c,elementRelativeX:l,elementRelativeY:u,elementPositionX:d,elementPositionY:p})}),[]);return we(window.document,"mousemove",i),{ref:e,position:t}}const Xe=()=>navigator.onLine,Ve=()=>!0;function Ye({onlineCallback:e=ee,offlineCallback:t=ee}={}){const n=ne((n=>((e,t,n)=>{const i=n=>(t(n),e()),r=t=>(n(t),e());return window.addEventListener("online",i),window.addEventListener("offline",r),()=>{window.removeEventListener("online",i),window.removeEventListener("offline",r)}})(n,e,t)));return{isOnline:(0,r.useSyncExternalStore)(n,Xe,Ve)}}function De(){return Be("(prefers-color-scheme: dark)")?"dark":"light"}function We(e){const t=(0,r.useRef)(e);return(0,r.useEffect)((()=>{t.current=e}),[e]),t.current}function Ge(e){const[t,n]=(0,r.useState)({bottom:0,height:0,left:0,right:0,top:0,width:0,x:0,y:0}),i=(0,r.useRef)(null),o=ne(e),a=(0,r.useCallback)((([e])=>{e&&(o(e),n(e.contentRect))}),[o]);return(0,r.useEffect)((()=>{const e=i.current;if(!e)return;const t=new ResizeObserver(a);return t.observe(e),()=>{t.unobserve(e)}}),[a]),{ref:i,contentRect:t}}function He({autoLock:e=!0}={}){const t=(0,r.useRef)(null),n=(0,r.useRef)(null),i=(0,r.useCallback)((()=>{const e=t.current;n.current=window.getComputedStyle(e).overflow,e.style.overflow="hidden"}),[]),o=(0,r.useCallback)((()=>{n.current&&(t.current.style.overflow=n.current)}),[]);return fe((()=>(t.current||(t.current=document.body),e&&i(),()=>o())),[e,i,o]),{ref:t,lock:i,unlock:o}}const Je=(e,t,n)=>"start"===n?0:"center"===n?-e/2+t/2:-e+t,Ke=(e,t,n)=>{const i=t.getBoundingClientRect(),{offsetX:r=0,offsetY:o=0,alignY:a="start",alignX:s="start"}=n;if(e===window)return{top:i.top+window.scrollY+o+Je(window.innerHeight,i.height,a),left:i.left+window.scrollX+r+Je(window.innerWidth,i.width,s)};const c=e.getBoundingClientRect();return{top:i.top-c.top+e.scrollTop+o+Je(c.height,i.height,a),left:i.left-c.left+e.scrollLeft+r+Je(c.width,i.width,s)}};function Ze(){const e=(0,r.useRef)(null),t=(0,r.useCallback)(((t={})=>{if(!e.current)return;const{left:n=0,top:i=0,behavior:r="auto"}=t;e.current.scrollTo({left:n,top:i,behavior:r})}),[]),n=(0,r.useCallback)(((t,n={})=>{if(!t||!e.current)return;const i=e.current,{behavior:r="auto"}=n,{left:o,top:a}=Ke(i,t,n);i.scrollTo({top:a,left:o,behavior:r})}),[]);return(0,r.useEffect)((()=>{e.current||(e.current=window)}),[]),{containerRef:e,scrollToPosition:t,scrollToElement:n}}const Qe=Ie("sessionStorage"),et=e=>window.sessionStorage.getItem(e),tt=e=>(Qe.subscribe(e),()=>{Qe.unsubscribe(e)});function nt(e){const{key:t}=e,n="initialValue"in e?e.initialValue:null,i=re(Z(n)?n():n),o=(0,r.useSyncExternalStore)(tt,(()=>et(t)),(()=>(e=>JSON.stringify(e))(i)));return{state:(0,r.useMemo)((()=>o?te(o):i),[o,i]),setState:(0,r.useCallback)((e=>{try{const n=et(t),r=n?te(n):i,o=Z(e)?e(r):e;window.sessionStorage.setItem(t,JSON.stringify(o)),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to store data for key "${t}" in sessionStorage: ${e}`)}}),[t,i]),removeState:(0,r.useCallback)((()=>{try{window.sessionStorage.removeItem(t),Qe.dispatchEvent()}catch(e){throw new Error(`Failed to remove key "${t}" from sessionStorage: ${e}`)}}),[t])}}function it(e){const t="initialState"in e?e.initialState:null,n=re(e.storageOptions),i=re(t),[o,a]=(0,r.useState)(i),s=(0,r.useCallback)((e=>{a((t=>{const i=Z(e)?e(t):e;if(n){const{type:e,key:t}=n;!function(e,t,n){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{const i=window[e],r=Z(n)?n():n;i.setItem(t,JSON.stringify(r))}catch(n){throw new Error(`Failed to store data for key "${t}" in ${e}: ${n}`)}}(e,t,i)}return i}))}),[n]),c=(0,r.useCallback)((()=>{if(n){const{type:e,key:t}=n;!function(e,t){if(!D())throw new Error("Cannot be executed unless it is a client environment.");try{window[e].removeItem(t)}catch(n){throw new Error(`Failed to remove key "${t}" from ${e}: ${n}`)}}(e,t)}a(null)}),[n]);return Object.assign({state:o,setState:s,clearState:c},Ce(e))}function rt(e,t,n={}){const i=ne(e),o=re(n),a=(0,r.useMemo)((()=>function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError(q);return O(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),B(e,t,{leading:i,maxWait:t,trailing:r})}(i,t,o)),[i,t,o]);return ie((()=>a.cancel())),a}function ot(e,t){const n=(0,r.useRef)(),i=ne(e),o=re(t),{delay:a,enabled:s}=(e=>{var t;return Q(e)?{delay:e,enabled:!0}:{delay:e.delay,enabled:null===(t=null==e?void 0:e.enabled)||void 0===t||t}})(o),c=(0,r.useCallback)((()=>{n.current=setTimeout(i,a)}),[i,a]),l=(0,r.useCallback)((()=>{n.current&&(clearTimeout(n.current),n.current=null)}),[]),u=(0,r.useCallback)((()=>{l(),c()}),[l,c]);return(0,r.useEffect)((()=>{if(!(a<0)&&s)return c(),()=>l()}),[c,l,a,s]),{set:c,reset:u,clear:l}}var at={exports:{}};!function(e,t){!function(n,i){var r="function",o="undefined",a="object",s="string",c="major",l="model",u="name",d="type",p="vendor",b="version",f="architecture",w="console",h="mobile",m="tablet",v="smarttv",g="wearable",x="embedded",y="Amazon",S="Apple",k="ASUS",C="BlackBerry",j="Browser",E="Chrome",T="Firefox",N="Google",O="Huawei",$="LG",P="Microsoft",R="Motorola",_="Opera",I="Samsung",M="Sharp",z="Sony",A="Xiaomi",L="Zebra",F="Facebook",B="Chromium OS",q="Mac OS",U=function(e){for(var t={},n=0;n0?2===c.length?typeof c[1]==r?this[c[0]]=c[1].call(this,u):this[c[0]]=c[1]:3===c.length?typeof c[1]!==r||c[1].exec&&c[1].test?this[c[0]]=u?u.replace(c[1],c[2]):i:this[c[0]]=u?c[1].call(this,u,c[2]):i:4===c.length&&(this[c[0]]=u?c[3].call(this,u.replace(c[1],c[2])):i):this[c]=u||i;d+=2}},W=function(e,t){for(var n in t)if(typeof t[n]===a&&t[n].length>0){for(var r=0;r2&&(e[l]="iPad",e[d]=m),e},this.getEngine=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.engine),e},this.getOS=function(){var e={};return e[u]=i,e[b]=i,D.call(e,v,x.os),y&&!e[u]&&g&&g.platform&&"Unknown"!=g.platform&&(e[u]=g.platform.replace(/chrome os/i,B).replace(/macos/i,q)),e},this.getResult=function(){return{ua:this.getUA(),browser:this.getBrowser(),engine:this.getEngine(),os:this.getOS(),device:this.getDevice(),cpu:this.getCPU()}},this.getUA=function(){return v},this.setUA=function(e){return v=typeof e===s&&e.length>500?Y(e,500):e,this},this.setUA(v),this};J.VERSION="1.0.38",J.BROWSER=U([u,b,c]),J.CPU=U([f]),J.DEVICE=U([l,p,d,w,h,v,m,g,x]),J.ENGINE=J.OS=U([u,b]),e.exports&&(t=e.exports=J),t.UAParser=J;var K=typeof n!==o&&(n.jQuery||n.Zepto);if(K&&!K.ua){var Z=new J;K.ua=Z.getResult(),K.ua.get=function(){return Z.getUA()},K.ua.set=function(e){Z.setUA(e);var t=Z.getResult();for(var n in t)K.ua[n]=t[n]}}}("object"==typeof window?window:s)}(at,at.exports);var st=at.exports;function ct(){const[e,t]=(0,r.useState)(null);return fe((()=>{const e=new st.UAParser(window.navigator.userAgent);t(e.getResult())}),[]),e}function lt({name:e="vh",enabledResize:t=!1}={}){fe((()=>{const n=()=>{const t=.01*window.innerHeight;document.documentElement.style.setProperty(`--${e}`,`${t}px`)};return n(),t&&window.addEventListener("resize",n),()=>{t&&window.removeEventListener("resize",n)}}),[e,t])}const ut={width:null,height:null};function dt({debounceWait:e}={}){const[t,n]=(0,r.useState)((()=>Y()?ut:{width:window.innerWidth,height:window.innerHeight})),i=oe(n,e),o=(0,r.useCallback)((()=>{(e?i:n)({width:window.innerWidth,height:window.innerHeight})}),[e,i]);return we(window,"resize",o),t}}}]); \ No newline at end of file diff --git a/assets/js/fbe6690a.8b1d2b92.js.LICENSE.txt b/assets/js/fbe6690a.8b1d2b92.js.LICENSE.txt new file mode 100644 index 000000000..827f2732c --- /dev/null +++ b/assets/js/fbe6690a.8b1d2b92.js.LICENSE.txt @@ -0,0 +1,5 @@ +/*! + Copyright (c) 2018 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ diff --git a/assets/js/main.15beb769.js b/assets/js/main.15beb769.js new file mode 100644 index 000000000..613e57645 --- /dev/null +++ b/assets/js/main.15beb769.js @@ -0,0 +1,2 @@ +/*! For license information please see main.15beb769.js.LICENSE.txt */ +(self.webpackChunk_modern_kit_docs=self.webpackChunk_modern_kit_docs||[]).push([[179],{4200:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,t:()=>i});var r=n(7800),o=n(1986);const a=r.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{i(!0)}),[]),(0,o.jsx)(a.Provider,{value:n,children:t})}},7991:(e,t,n)=>{"use strict";var r=n(7800),o=n(4426),a=n(5598),i=n(3775),s=n(6809),l=n(5716);const c=[n(3931),n(7894),n(5592),n(9986)];var u=n(6729),d=n(1948),p=n(3018),f=n(1986);function m(e){let{children:t}=e;return(0,f.jsx)(f.Fragment,{children:t})}var h=n(3073),b=n(1715),g=n(2473),y=n(9028),v=n(6417),k=n(5428),w=n(8531);const S="default";var x=n(8549),_=n(5212);function E(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,b.Z)(),r=(0,k.l)(),o=n[e].htmlLang,a=e=>e.replace("-","_");return(0,f.jsxs)(h.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,f.jsx)("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,f.jsx)("meta",{property:"og:locale",content:a(o)}),Object.values(n).filter((e=>o!==e.htmlLang)).map((e=>(0,f.jsx)("meta",{property:"og:locale:alternate",content:a(e.htmlLang)},`meta-og-${e.htmlLang}`)))]})}function C(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,b.Z)(),r=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,b.Z)(),{pathname:r}=(0,d.TH)();return e+(0,x.Do)((0,g.ZP)(r),{trailingSlash:n,baseUrl:t})}(),o=t?`${n}${t}`:r;return(0,f.jsxs)(h.Z,{children:[(0,f.jsx)("meta",{property:"og:url",content:o}),(0,f.jsx)("link",{rel:"canonical",href:o})]})}function T(){const{i18n:{currentLocale:e}}=(0,b.Z)(),{metadata:t,image:n}=(0,y.L)();return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsxs)(h.Z,{children:[(0,f.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,f.jsx)("body",{className:w.h})]}),n&&(0,f.jsx)(v.d,{image:n}),(0,f.jsx)(C,{}),(0,f.jsx)(E,{}),(0,f.jsx)(_.Z,{tag:S,locale:e}),(0,f.jsx)(h.Z,{children:t.map(((e,t)=>(0,f.jsx)("meta",{...e},t)))})]})}const j=new Map;var P=n(4200),N=n(7902),A=n(3915);function L(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{const r=t.default?.[e]??t[e];return r?.(...n)}));return()=>o.forEach((e=>e?.()))}const R=function(e){let{children:t,location:n,previousLocation:r}=e;return(0,A.Z)((()=>{r!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,o=t.hash===n.hash,a=t.search===n.search;if(r&&o&&!a)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);t?.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:r}),L("onRouteDidUpdate",{previousLocation:r,location:n}))}),[r,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,p.f)(u.Z,e))).flat();return Promise.all(t.map((e=>e.route.component.preload?.())))}class I extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=l.Z.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,f.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,f.jsx)(d.AW,{location:t,render:()=>e})})}}const D=I,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return`\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '${M}';\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{let{route:t}=e;return!0===t.exact})))return j.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return j.set(e.pathname,t),{...e,pathname:t}}((0,d.TH)());return(0,f.jsx)(D,{location:e,children:W})}function K(){return(0,f.jsx)(H.Z,{children:(0,f.jsx)(N.M,{children:(0,f.jsxs)(P.t,{children:[(0,f.jsxs)(m,{children:[(0,f.jsx)(q,{}),(0,f.jsx)(T,{}),(0,f.jsx)($,{}),(0,f.jsx)(G,{})]}),(0,f.jsx)(Z,{})]})})})}var Q=n(6887);const Y=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const o=document.getElementsByTagName("head")[0]??document.getElementsByName("script")[0]?.parentNode;o?.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var X=n(6069);const J=new Set,ee=new Set,te=()=>navigator.connection?.effectiveType.includes("2g")||navigator.connection?.saveData,ne={prefetch:e=>{if(!(e=>!te()&&!ee.has(e)&&!J.has(e))(e))return!1;J.add(e);const t=(0,p.f)(u.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(Q).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,X.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?Y(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!te()&&!ee.has(e))(e)&&(ee.add(e),O(e))},re=Object.freeze(ne);function oe(e){let{children:t}=e;return"hash"===s.default.future.experimental_router?(0,f.jsx)(i.UT,{children:t}):(0,f.jsx)(i.VK,{children:t})}const ae=Boolean(!0);if(l.Z.canUseDOM){window.docusaurus=re;const e=document.getElementById("__docusaurus"),t=(0,f.jsx)(a.B6,{children:(0,f.jsx)(oe,{children:(0,f.jsx)(K,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},i=()=>{if(window.docusaurusRoot)window.docusaurusRoot.render(t);else if(ae)window.docusaurusRoot=o.hydrateRoot(e,t,{onRecoverableError:n});else{const r=o.createRoot(e,{onRecoverableError:n});r.render(t),window.docusaurusRoot=r}};O(window.location.pathname).then((()=>{(0,r.startTransition)(i)}))}},7902:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var r=n(7800),o=n(6809);const a=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/modern-kit/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/modern-kit/docs","mainDocId":"introduce/Introduce","docs":[{"id":"introduce/Introduce","path":"/modern-kit/docs/introduce/","sidebar":"tutorialSidebar"},{"id":"react/components/AspectRatio","path":"/modern-kit/docs/react/components/AspectRatio","sidebar":"tutorialSidebar"},{"id":"react/components/ClientOnly","path":"/modern-kit/docs/react/components/ClientOnly","sidebar":"tutorialSidebar"},{"id":"react/components/DebounceWrapper","path":"/modern-kit/docs/react/components/DebounceWrapper","sidebar":"tutorialSidebar"},{"id":"react/components/FallbackLazyImage","path":"/modern-kit/docs/react/components/FallbackLazyImage","sidebar":"tutorialSidebar"},{"id":"react/components/IfElse","path":"/modern-kit/docs/react/components/IfElse","sidebar":"tutorialSidebar"},{"id":"react/components/InView","path":"/modern-kit/docs/react/components/InView","sidebar":"tutorialSidebar"},{"id":"react/components/Iterator","path":"/modern-kit/docs/react/components/Iterator","sidebar":"tutorialSidebar"},{"id":"react/components/LazyImage","path":"/modern-kit/docs/react/components/LazyImage","sidebar":"tutorialSidebar"},{"id":"react/components/OutsideClick","path":"/modern-kit/docs/react/components/OutsideClick","sidebar":"tutorialSidebar"},{"id":"react/components/Portal","path":"/modern-kit/docs/react/components/Portal","sidebar":"tutorialSidebar"},{"id":"react/components/SeparatedIterator","path":"/modern-kit/docs/react/components/SeparatedIterator","sidebar":"tutorialSidebar"},{"id":"react/components/SwithCase","path":"/modern-kit/docs/react/components/SwithCase","sidebar":"tutorialSidebar"},{"id":"react/components/When","path":"/modern-kit/docs/react/components/When","sidebar":"tutorialSidebar"},{"id":"react/hooks/useAsyncPreservedCallback","path":"/modern-kit/docs/react/hooks/useAsyncPreservedCallback","sidebar":"tutorialSidebar"},{"id":"react/hooks/useBlockPromiseMultipleClick","path":"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","sidebar":"tutorialSidebar"},{"id":"react/hooks/useClipboard","path":"/modern-kit/docs/react/hooks/useClipboard","sidebar":"tutorialSidebar"},{"id":"react/hooks/useCounter","path":"/modern-kit/docs/react/hooks/useCounter","sidebar":"tutorialSidebar"},{"id":"react/hooks/useCycleList","path":"/modern-kit/docs/react/hooks/useCycleList","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebounce","path":"/modern-kit/docs/react/hooks/useDebounce","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebouncedInputValue","path":"/modern-kit/docs/react/hooks/useDebouncedInputValue","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDebouncedState","path":"/modern-kit/docs/react/hooks/useDebouncedState","sidebar":"tutorialSidebar"},{"id":"react/hooks/useDocumentTitle","path":"/modern-kit/docs/react/hooks/useDocumentTitle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useEventListener","path":"/modern-kit/docs/react/hooks/useEventListener","sidebar":"tutorialSidebar"},{"id":"react/hooks/useFileReader","path":"/modern-kit/docs/react/hooks/useFileReader","sidebar":"tutorialSidebar"},{"id":"react/hooks/useForceUpdate","path":"/modern-kit/docs/react/hooks/useForceUpdate","sidebar":"tutorialSidebar"},{"id":"react/hooks/useHover","path":"/modern-kit/docs/react/hooks/useHover","sidebar":"tutorialSidebar"},{"id":"react/hooks/useImageStatus","path":"/modern-kit/docs/react/hooks/useImageStatus","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIntersectionObserver","path":"/modern-kit/docs/react/hooks/useIntersectionObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useInterval","path":"/modern-kit/docs/react/hooks/useInterval","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsMounted","path":"/modern-kit/docs/react/hooks/useIsMounted","sidebar":"tutorialSidebar"},{"id":"react/hooks/useIsomorphicLayoutEffect","path":"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","sidebar":"tutorialSidebar"},{"id":"react/hooks/useKeyDown","path":"/modern-kit/docs/react/hooks/useKeyDown","sidebar":"tutorialSidebar"},{"id":"react/hooks/useLocalStorage","path":"/modern-kit/docs/react/hooks/useLocalStorage","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMediaQuery","path":"/modern-kit/docs/react/hooks/useMediaQuery","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMergeRefs","path":"/modern-kit/docs/react/hooks/useMergeRefs","sidebar":"tutorialSidebar"},{"id":"react/hooks/useMouse","path":"/modern-kit/docs/react/hooks/useMouse","sidebar":"tutorialSidebar"},{"id":"react/hooks/useNetwork","path":"/modern-kit/docs/react/hooks/useNetwork","sidebar":"tutorialSidebar"},{"id":"react/hooks/useOutsidePointerDown","path":"/modern-kit/docs/react/hooks/useOutsidePointerDown","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreferredColorScheme","path":"/modern-kit/docs/react/hooks/usePreferredColorScheme","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedCallback","path":"/modern-kit/docs/react/hooks/usePreservedCallback","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePreservedState","path":"/modern-kit/docs/react/hooks/usePreservedState","sidebar":"tutorialSidebar"},{"id":"react/hooks/usePrevious","path":"/modern-kit/docs/react/hooks/usePrevious","sidebar":"tutorialSidebar"},{"id":"react/hooks/useResizeObserver","path":"/modern-kit/docs/react/hooks/useResizeObserver","sidebar":"tutorialSidebar"},{"id":"react/hooks/useScrollLock","path":"/modern-kit/docs/react/hooks/useScrollLock","sidebar":"tutorialSidebar"},{"id":"react/hooks/useScrollTo","path":"/modern-kit/docs/react/hooks/useScrollTo","sidebar":"tutorialSidebar"},{"id":"react/hooks/useSessionStorage","path":"/modern-kit/docs/react/hooks/useSessionStorage","sidebar":"tutorialSidebar"},{"id":"react/hooks/useStep","path":"/modern-kit/docs/react/hooks/useStep","sidebar":"tutorialSidebar"},{"id":"react/hooks/useStepState","path":"/modern-kit/docs/react/hooks/useStepState","sidebar":"tutorialSidebar"},{"id":"react/hooks/useThrottle","path":"/modern-kit/docs/react/hooks/useThrottle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useTimeout","path":"/modern-kit/docs/react/hooks/useTimeout","sidebar":"tutorialSidebar"},{"id":"react/hooks/useToggle","path":"/modern-kit/docs/react/hooks/useToggle","sidebar":"tutorialSidebar"},{"id":"react/hooks/useUnmount","path":"/modern-kit/docs/react/hooks/useUnmount","sidebar":"tutorialSidebar"},{"id":"react/hooks/useUserAgent","path":"/modern-kit/docs/react/hooks/useUserAgent","sidebar":"tutorialSidebar"},{"id":"react/hooks/useVhProperty","path":"/modern-kit/docs/react/hooks/useVhProperty","sidebar":"tutorialSidebar"},{"id":"react/hooks/useVisibilityChange","path":"/modern-kit/docs/react/hooks/useVisibilityChange","sidebar":"tutorialSidebar"},{"id":"react/hooks/useWindowSize","path":"/modern-kit/docs/react/hooks/useWindowSize","sidebar":"tutorialSidebar"},{"id":"utils/array/chunk","path":"/modern-kit/docs/utils/array/chunk","sidebar":"tutorialSidebar"},{"id":"utils/array/compact","path":"/modern-kit/docs/utils/array/compact","sidebar":"tutorialSidebar"},{"id":"utils/array/contains","path":"/modern-kit/docs/utils/array/contains","sidebar":"tutorialSidebar"},{"id":"utils/array/countOccurrencesInArray","path":"/modern-kit/docs/utils/array/countOccurrencesInArray","sidebar":"tutorialSidebar"},{"id":"utils/array/difference","path":"/modern-kit/docs/utils/array/difference","sidebar":"tutorialSidebar"},{"id":"utils/array/drop","path":"/modern-kit/docs/utils/array/drop","sidebar":"tutorialSidebar"},{"id":"utils/array/excludeElements","path":"/modern-kit/docs/utils/array/excludeElements","sidebar":"tutorialSidebar"},{"id":"utils/array/fill","path":"/modern-kit/docs/utils/array/fill","sidebar":"tutorialSidebar"},{"id":"utils/array/flatMap","path":"/modern-kit/docs/utils/array/flatMap","sidebar":"tutorialSidebar"},{"id":"utils/array/flatMapDeep","path":"/modern-kit/docs/utils/array/flatMapDeep","sidebar":"tutorialSidebar"},{"id":"utils/array/flatten","path":"/modern-kit/docs/utils/array/flatten","sidebar":"tutorialSidebar"},{"id":"utils/array/flattenDeep","path":"/modern-kit/docs/utils/array/flattenDeep","sidebar":"tutorialSidebar"},{"id":"utils/array/flattenDeepThenMap","path":"/modern-kit/docs/utils/array/flattenDeepThenMap","sidebar":"tutorialSidebar"},{"id":"utils/array/forEachRight","path":"/modern-kit/docs/utils/array/forEachRight","sidebar":"tutorialSidebar"},{"id":"utils/array/intersection","path":"/modern-kit/docs/utils/array/intersection","sidebar":"tutorialSidebar"},{"id":"utils/array/intersectionWithDuplicates","path":"/modern-kit/docs/utils/array/intersectionWithDuplicates","sidebar":"tutorialSidebar"},{"id":"utils/array/mapRight","path":"/modern-kit/docs/utils/array/mapRight","sidebar":"tutorialSidebar"},{"id":"utils/array/partition","path":"/modern-kit/docs/utils/array/partition","sidebar":"tutorialSidebar"},{"id":"utils/array/shuffle","path":"/modern-kit/docs/utils/array/shuffle","sidebar":"tutorialSidebar"},{"id":"utils/array/swap","path":"/modern-kit/docs/utils/array/swap","sidebar":"tutorialSidebar"},{"id":"utils/array/take","path":"/modern-kit/docs/utils/array/take","sidebar":"tutorialSidebar"},{"id":"utils/array/union","path":"/modern-kit/docs/utils/array/union","sidebar":"tutorialSidebar"},{"id":"utils/array/uniq","path":"/modern-kit/docs/utils/array/uniq","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyClipboardImage","path":"/modern-kit/docs/utils/clipboard/copyClipboardImage","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyClipboardText","path":"/modern-kit/docs/utils/clipboard/copyClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/copyFallbackClipboardText","path":"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/readClipboardContents","path":"/modern-kit/docs/utils/clipboard/readClipboardContents","sidebar":"tutorialSidebar"},{"id":"utils/clipboard/readClipboardText","path":"/modern-kit/docs/utils/clipboard/readClipboardText","sidebar":"tutorialSidebar"},{"id":"utils/common/abRandom","path":"/modern-kit/docs/utils/common/abRandom","sidebar":"tutorialSidebar"},{"id":"utils/common/asyncNoop","path":"/modern-kit/docs/utils/common/asyncNoop","sidebar":"tutorialSidebar"},{"id":"utils/common/deepCopy","path":"/modern-kit/docs/utils/common/deepCopy","sidebar":"tutorialSidebar"},{"id":"utils/common/delay","path":"/modern-kit/docs/utils/common/delay","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqId","path":"/modern-kit/docs/utils/common/getUniqId","sidebar":"tutorialSidebar"},{"id":"utils/common/getUniqTime","path":"/modern-kit/docs/utils/common/getUniqTime","sidebar":"tutorialSidebar"},{"id":"utils/common/getViewportSize","path":"/modern-kit/docs/utils/common/getViewportSize","sidebar":"tutorialSidebar"},{"id":"utils/common/hexToRgba","path":"/modern-kit/docs/utils/common/hexToRgba","sidebar":"tutorialSidebar"},{"id":"utils/common/identity","path":"/modern-kit/docs/utils/common/identity","sidebar":"tutorialSidebar"},{"id":"utils/common/noop","path":"/modern-kit/docs/utils/common/noop","sidebar":"tutorialSidebar"},{"id":"utils/common/once","path":"/modern-kit/docs/utils/common/once","sidebar":"tutorialSidebar"},{"id":"utils/common/parseJSON","path":"/modern-kit/docs/utils/common/parseJSON","sidebar":"tutorialSidebar"},{"id":"utils/common/pickFalsy","path":"/modern-kit/docs/utils/common/pickFalsy","sidebar":"tutorialSidebar"},{"id":"utils/common/size","path":"/modern-kit/docs/utils/common/size","sidebar":"tutorialSidebar"},{"id":"utils/common/wrapInArray","path":"/modern-kit/docs/utils/common/wrapInArray","sidebar":"tutorialSidebar"},{"id":"utils/device/getOS","path":"/modern-kit/docs/utils/device/getOS","sidebar":"tutorialSidebar"},{"id":"utils/device/isClient","path":"/modern-kit/docs/utils/device/isClient","sidebar":"tutorialSidebar"},{"id":"utils/device/isMobile","path":"/modern-kit/docs/utils/device/isMobile","sidebar":"tutorialSidebar"},{"id":"utils/device/isSever","path":"/modern-kit/docs/utils/device/isSever","sidebar":"tutorialSidebar"},{"id":"utils/file/convertImageToBase64","path":"/modern-kit/docs/utils/file/convertImageToBase64","sidebar":"tutorialSidebar"},{"id":"utils/file/convertImageToBlob","path":"/modern-kit/docs/utils/file/convertImageToBlob","sidebar":"tutorialSidebar"},{"id":"utils/file/getBlobFromUrl","path":"/modern-kit/docs/utils/file/getBlobFromUrl","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMEType","path":"/modern-kit/docs/utils/file/getMIMEType","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromFile","path":"/modern-kit/docs/utils/file/getMIMETypeFromFile","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromResponse","path":"/modern-kit/docs/utils/file/getMIMETypeFromResponse","sidebar":"tutorialSidebar"},{"id":"utils/file/getMIMETypeFromUrl","path":"/modern-kit/docs/utils/file/getMIMETypeFromUrl","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatNumberByUnits","path":"/modern-kit/docs/utils/formatter/formatNumberByUnits","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatNumberCurrency","path":"/modern-kit/docs/utils/formatter/formatNumberCurrency","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatNumberWithCommas","path":"/modern-kit/docs/utils/formatter/formatNumberWithCommas","sidebar":"tutorialSidebar"},{"id":"utils/formatter/formatPhoneNumber","path":"/modern-kit/docs/utils/formatter/formatPhoneNumber","sidebar":"tutorialSidebar"},{"id":"utils/math/average","path":"/modern-kit/docs/utils/math/average","sidebar":"tutorialSidebar"},{"id":"utils/math/max","path":"/modern-kit/docs/utils/math/max","sidebar":"tutorialSidebar"},{"id":"utils/math/min","path":"/modern-kit/docs/utils/math/min","sidebar":"tutorialSidebar"},{"id":"utils/math/range","path":"/modern-kit/docs/utils/math/range","sidebar":"tutorialSidebar"},{"id":"utils/math/sum","path":"/modern-kit/docs/utils/math/sum","sidebar":"tutorialSidebar"},{"id":"utils/object/deleteEmptyProperties","path":"/modern-kit/docs/utils/object/deleteEmptyProperties","sidebar":"tutorialSidebar"},{"id":"utils/object/groupBy","path":"/modern-kit/docs/utils/object/groupBy","sidebar":"tutorialSidebar"},{"id":"utils/object/invert","path":"/modern-kit/docs/utils/object/invert","sidebar":"tutorialSidebar"},{"id":"utils/object/mapKeys","path":"/modern-kit/docs/utils/object/mapKeys","sidebar":"tutorialSidebar"},{"id":"utils/object/mapValues","path":"/modern-kit/docs/utils/object/mapValues","sidebar":"tutorialSidebar"},{"id":"utils/object/mergeProperties","path":"/modern-kit/docs/utils/object/mergeProperties","sidebar":"tutorialSidebar"},{"id":"utils/object/objectEntries","path":"/modern-kit/docs/utils/object/objectEntries","sidebar":"tutorialSidebar"},{"id":"utils/object/objectKeys","path":"/modern-kit/docs/utils/object/objectKeys","sidebar":"tutorialSidebar"},{"id":"utils/object/objectValues","path":"/modern-kit/docs/utils/object/objectValues","sidebar":"tutorialSidebar"},{"id":"utils/object/omit","path":"/modern-kit/docs/utils/object/omit","sidebar":"tutorialSidebar"},{"id":"utils/object/pick","path":"/modern-kit/docs/utils/object/pick","sidebar":"tutorialSidebar"},{"id":"utils/string/countSubstringOccurrences","path":"/modern-kit/docs/utils/string/countSubstringOccurrences","sidebar":"tutorialSidebar"},{"id":"utils/string/extractLetters","path":"/modern-kit/docs/utils/string/extractLetters","sidebar":"tutorialSidebar"},{"id":"utils/string/extractNumber","path":"/modern-kit/docs/utils/string/extractNumber","sidebar":"tutorialSidebar"},{"id":"utils/string/removeSpecialCharacters","path":"/modern-kit/docs/utils/string/removeSpecialCharacters","sidebar":"tutorialSidebar"},{"id":"utils/string/repeatCharacters","path":"/modern-kit/docs/utils/string/repeatCharacters","sidebar":"tutorialSidebar"},{"id":"utils/string/reverseString","path":"/modern-kit/docs/utils/string/reverseString","sidebar":"tutorialSidebar"},{"id":"utils/string/serialize","path":"/modern-kit/docs/utils/string/serialize","sidebar":"tutorialSidebar"},{"id":"utils/style/rem","path":"/modern-kit/docs/utils/style/rem","sidebar":"tutorialSidebar"},{"id":"utils/validator/hasProperty","path":"/modern-kit/docs/utils/validator/hasProperty","sidebar":"tutorialSidebar"},{"id":"utils/validator/isArray","path":"/modern-kit/docs/utils/validator/isArray","sidebar":"tutorialSidebar"},{"id":"utils/validator/isBoolean","path":"/modern-kit/docs/utils/validator/isBoolean","sidebar":"tutorialSidebar"},{"id":"utils/validator/isEqual","path":"/modern-kit/docs/utils/validator/isEqual","sidebar":"tutorialSidebar"},{"id":"utils/validator/isFloat","path":"/modern-kit/docs/utils/validator/isFloat","sidebar":"tutorialSidebar"},{"id":"utils/validator/isFuntion","path":"/modern-kit/docs/utils/validator/isFuntion","sidebar":"tutorialSidebar"},{"id":"utils/validator/isInRange","path":"/modern-kit/docs/utils/validator/isInRange","sidebar":"tutorialSidebar"},{"id":"utils/validator/isMIMEType","path":"/modern-kit/docs/utils/validator/isMIMEType","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNil","path":"/modern-kit/docs/utils/validator/isNil","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNotNil","path":"/modern-kit/docs/utils/validator/isNotNil","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNumber","path":"/modern-kit/docs/utils/validator/isNumber","sidebar":"tutorialSidebar"},{"id":"utils/validator/isNumericString","path":"/modern-kit/docs/utils/validator/isNumericString","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPlainObject","path":"/modern-kit/docs/utils/validator/isPlainObject","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPrimitive","path":"/modern-kit/docs/utils/validator/isPrimitive","sidebar":"tutorialSidebar"},{"id":"utils/validator/isPromise","path":"/modern-kit/docs/utils/validator/isPromise","sidebar":"tutorialSidebar"},{"id":"utils/validator/isReference","path":"/modern-kit/docs/utils/validator/isReference","sidebar":"tutorialSidebar"},{"id":"utils/validator/isString","path":"/modern-kit/docs/utils/validator/isString","sidebar":"tutorialSidebar"},{"id":"utils/validator/isSubset","path":"/modern-kit/docs/utils/validator/isSubset","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidEmail","path":"/modern-kit/docs/utils/validator/isValidEmail","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidPassword","path":"/modern-kit/docs/utils/validator/isValidPassword","sidebar":"tutorialSidebar"},{"id":"utils/validator/isValidPhoneNumberFormat","path":"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","sidebar":"tutorialSidebar"},{"id":"utils/validator/isWindow","path":"/modern-kit/docs/utils/validator/isWindow","sidebar":"tutorialSidebar"}],"draftIds":[],"sidebars":{"tutorialSidebar":{"link":{"path":"/modern-kit/docs/introduce/","label":"Introduce"}}}}],"breadcrumbs":true}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(7529);const l=JSON.parse('{"docusaurusVersion":"3.5.2","siteVersion":"0.0.14","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.5.2"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.5.2"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.5.2"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.5.2"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.5.2"}}}');var c=n(1986);const u={siteConfig:o.default,siteMetadata:l,globalData:a,i18n:i,codeTranslations:s},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},1044:(e,t,n)=>{"use strict";n.d(t,{Z:()=>h});var r=n(7800),o=n(5716),a=n(3073),i=n(414),s=n(3021),l=n(6758),c=n(1986);function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(d,{error:t})]})}function d(e){let{error:t}=e;const n=(0,i.BN)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function p(e){let{children:t}=e;return(0,c.jsx)(l.z,{value:{plugin:{name:"docusaurus-core-error-boundary",id:"default"}},children:t})}function f(e){let{error:t,tryAgain:n}=e;return(0,c.jsx)(p,{children:(0,c.jsxs)(h,{fallback:()=>(0,c.jsx)(u,{error:t,tryAgain:n}),children:[(0,c.jsx)(a.Z,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.Z,{children:(0,c.jsx)(u,{error:t,tryAgain:n})})]})})}const m=e=>(0,c.jsx)(f,{...e});class h extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){o.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??m)(e)}return e??null}}},5716:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,o={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},3073:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);var r=n(5598),o=n(1986);function a(e){return(0,o.jsx)(r.ql,{...e})}},2532:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(7800),o=n(3775),a=n(414),i=n(1715),s=n(9455),l=n(5716),c=n(2903),u=n(2473),d=n(1986);function p(e,t){let{isNavLink:n,to:p,href:f,activeClassName:m,isActive:h,"data-noBrokenLinkCheck":b,autoAddBaseUrl:g=!0,...y}=e;const{siteConfig:v}=(0,i.Z)(),{trailingSlash:k,baseUrl:w}=v,S=v.future.experimental_router,{withBaseUrl:x}=(0,u.Cg)(),_=(0,c.Z)(),E=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>E.current));const C=p||f;const T=(0,s.Z)(C),j=C?.replace("pathname://","");let P=void 0!==j?(N=j,g&&(e=>e.startsWith("/"))(N)?x(N):N):void 0;var N;"hash"===S&&P?.startsWith("./")&&(P=P?.slice(1)),P&&T&&(P=(0,a.Do)(P,{trailingSlash:k,baseUrl:w}));const A=(0,r.useRef)(!1),L=n?o.OL:o.rU,R=l.Z.canUseIntersectionObserver,O=(0,r.useRef)(),I=()=>{A.current||null==P||(window.docusaurus.preload(P),A.current=!0)};(0,r.useEffect)((()=>(!R&&T&&l.Z.canUseDOM&&null!=P&&window.docusaurus.prefetch(P),()=>{R&&O.current&&O.current.disconnect()})),[O,P,R,T]);const D=P?.startsWith("#")??!1,M=!y.target||"_self"===y.target,F=!P||!T||!M||D&&"hash"!==S;b||!D&&F||_.collectLink(P),y.id&&_.collectAnchor(y.id);const z={};return F?(0,d.jsx)("a",{ref:E,href:P,...C&&!T&&{target:"_blank",rel:"noopener noreferrer"},...y,...z}):(0,d.jsx)(L,{...y,onMouseEnter:I,onTouchStart:I,innerRef:e=>{E.current=e,R&&e&&T&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=P&&window.docusaurus.prefetch(P))}))})),O.current.observe(e))},to:P,...n&&{isActive:h,activeClassName:m},...z})}const f=r.forwardRef(p)},9706:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});const r=()=>null},1783:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c,I:()=>l});var r=n(7800),o=n(1986);function a(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=t?.[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(7529);function s(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return i[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return a(s({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=s({message:t,id:n});return(0,o.jsx)(o.Fragment,{children:a(i,r)})}},9719:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},9455:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function o(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>o,b:()=>r})},2473:(e,t,n)=>{"use strict";n.d(t,{Cg:()=>i,ZP:()=>s});var r=n(7800),o=n(1715),a=n(9455);function i(){const{siteConfig:e}=(0,o.Z)(),{baseUrl:t,url:n}=e,i=e.future.experimental_router,s=(0,r.useCallback)(((e,r)=>function(e){let{siteUrl:t,baseUrl:n,url:r,options:{forcePrependBaseUrl:o=!1,absolute:i=!1}={},router:s}=e;if(!r||r.startsWith("#")||(0,a.b)(r))return r;if("hash"===s)return r.startsWith("/")?`.${r}`:`./${r}`;if(o)return n+r.replace(/^\//,"");if(r===n.replace(/\/$/,""))return n;const l=r.startsWith(n)?r:n+r.replace(/^\//,"");return i?t+l:l}({siteUrl:n,baseUrl:t,url:e,options:r,router:i})),[n,t,i]);return{withBaseUrl:s}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},2903:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7800);n(1986);const o=r.createContext({collectAnchor:()=>{},collectLink:()=>{}}),a=()=>(0,r.useContext)(o);function i(){return a()}},1715:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7800),o=n(7902);function a(){return(0,r.useContext)(o._)}},4798:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7800),o=n(4200);function a(){return(0,r.useContext)(o._)}},3915:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});var r=n(7800);const o=n(5716).Z.canUseDOM?r.useLayoutEffect:r.useEffect},6069:(e,t,n)=>{"use strict";n.d(t,{Z:()=>o});const r=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function o(e){const t={};return function e(n,o){Object.entries(n).forEach((n=>{let[a,i]=n;const s=o?`${o}.${a}`:a;r(i)?e(i,s):t[s]=i}))}(e),t}},6758:(e,t,n)=>{"use strict";n.d(t,{_:()=>a,z:()=>i});var r=n(7800),o=n(1986);const a=r.createContext(null);function i(e){let{children:t,value:n}=e;const i=r.useContext(a),s=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...n?.data};return{plugin:t.plugin,data:r}}({parent:i,value:n})),[i,n]);return(0,o.jsx)(a.Provider,{value:s,children:t})}},1775:(e,t,n)=>{"use strict";n.d(t,{J:()=>y,L5:()=>b});var r=n(7800),o=n(7953),a=n(9719),i=n(9028),s=n(5194),l=n(6728),c=n(1986);const u=e=>`docs-preferred-version-${e}`,d={save:(e,t,n)=>{(0,s.WA)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,s.WA)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,s.WA)(u(e),{persistence:t}).del()}},p=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const f=r.createContext(null);function m(){const e=(0,o._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[a,s]=(0,r.useState)((()=>p(n)));(0,r.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function o(e){const t=d.read(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(d.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,o(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[a,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){d.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=m();return(0,c.jsx)(f.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return(0,c.jsx)(h,{children:t})}function g(){const e=(0,r.useContext)(f);if(!e)throw new l.i6("DocsPreferredVersionContextProvider");return e}function y(e){void 0===e&&(e=a.m);const t=(0,o.zh)(e),[n,i]=g(),{preferredVersionName:s}=n[e];return{preferredVersion:t.versions.find((e=>e.name===s))??null,savePreferredVersionName:(0,r.useCallback)((t=>{i.savePreferredVersion(e,t)}),[i,e])}}},7797:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>l});var r=n(7800),o=n(6728),a=n(1986);const i=Symbol("EmptyContext"),s=r.createContext(i);function l(e){let{children:t,name:n,items:o}=e;const i=(0,r.useMemo)((()=>n&&o?{name:n,items:o}:null),[n,o]);return(0,a.jsx)(s.Provider,{value:i,children:t})}function c(){const e=(0,r.useContext)(s);if(e===i)throw new o.i6("DocsSidebarProvider");return e}},7557:(e,t,n)=>{"use strict";n.d(t,{LM:()=>p,_F:()=>h,SN:()=>x,lO:()=>k,vY:()=>S,oz:()=>w,s1:()=>v,f:()=>g});var r=n(7800),o=n(1948),a=n(3018),i=n(7953),s=n(2205);function l(e){return Array.from(new Set(e))}var c=n(1775),u=n(5872),d=n(7797);function p(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=p(t);if(e)return e}}(e):void 0:e.href}const f=(e,t)=>void 0!==e&&(0,s.Mg)(e,t),m=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?f(e.href,t):"category"===e.type&&(f(e.href,t)||m(e.items,t))}function b(e,t){switch(e.type){case"category":return h(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||h(e,t);default:return!0}}function g(e,t){return(0,r.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function y(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const o=[];return function e(t){for(const a of t)if("category"===a.type&&((0,s.Mg)(a.href,n)||e(a.items))||"link"===a.type&&(0,s.Mg)(a.href,n)){return r&&"category"!==a.type||o.unshift(a),!0}return!1}(t),o}function v(){const e=(0,d.V)(),{pathname:t}=(0,o.TH)(),n=(0,i.gA)()?.pluginData.breadcrumbs;return!1!==n&&e?y({sidebarItems:e.items,pathname:t}):null}function k(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,c.J)(e),o=(0,i.yW)(e);return(0,r.useMemo)((()=>l([t,n,o].filter(Boolean))),[t,n,o])}function w(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable sidebar ids are:\n- ${t.map((e=>e[0])).join("\n- ")}`);return r[1]}),[e,n])}function S(e,t){const n=k(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`Couldn't find any doc with id "${e}" in version${n.length>1?"s":""} "${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${l(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function x(e){let{route:t}=e;const n=(0,o.TH)(),r=(0,u.E)(),i=t.routes,s=i.find((e=>(0,o.LX)(n.pathname,e)));if(!s)return null;const l=s.sidebar,c=l?r.docsSidebars[l]:void 0;return{docElement:(0,a.H)(i),sidebarName:l,sidebarItems:c}}},5872:(e,t,n)=>{"use strict";n.d(t,{E:()=>l,q:()=>s});var r=n(7800),o=n(6728),a=n(1986);const i=r.createContext(null);function s(e){let{children:t,version:n}=e;return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(null===e)throw new o.i6("DocsVersionProvider");return e}},7953:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>p,_r:()=>u,Jo:()=>b,zh:()=>d,yW:()=>m,gB:()=>f});var r=n(1948),o=n(1715),a=n(9719);function i(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const s=e=>e.versions.find((e=>e.isLast));function l(e,t){const n=function(e,t){return[...e.versions].sort(((e,t)=>e.path===t.path?0:e.path.includes(t.path)?-1:t.path.includes(e.path)?1:0)).find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),o=n?.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:o,alternateDocVersions:o?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(o.id):{}}}const c={},u=()=>i("docusaurus-plugin-content-docs")??c,d=e=>{try{return function(e,t,n){void 0===t&&(t=a.m),void 0===n&&(n={});const r=i(e),o=r?.[t];if(!o&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return o}("docusaurus-plugin-content-docs",e,{failfast:!0})}catch(t){throw new Error("You are using a feature of the Docusaurus docs plugin, but this plugin does not seem to be enabled"+("Default"===e?"":` (pluginId=${e}`),{cause:t})}};function p(e){void 0===e&&(e={});const t=u(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const o=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),a=o?{pluginId:o[0],pluginData:o[1]}:void 0;if(!a&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return a}(t,n,e)}function f(e){return d(e).versions}function m(e){const t=d(e);return s(t)}function h(e){const t=d(e),{pathname:n}=(0,r.TH)();return l(t,n)}function b(e){const t=d(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=s(e);return{latestDocSuggestion:l(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},2633:(e,t,n)=>{"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}function o(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(){return i=Object.assign||function(e){for(var t=1;t{"use strict";n.r(t),n.d(t,{default:()=>a});var r=n(2602),o=n.n(r);o().configure({showSpinner:!1});const a={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{o().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){o().done()}}},7894:(e,t,n)=>{"use strict";n.r(t);var r=n(3055),o=n(6809);!function(e){const{themeConfig:{prism:t}}=o.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{"php"===e&&n(8624),n(9932)(`./prism-${e}`)})),delete globalThis.Prism}(r.p1)},2352:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7800);var r=n(605),o=n(1783),a=n(9028),i=n(2532),s=n(2903);const l={anchorWithStickyNavbar:"anchorWithStickyNavbar_G2Kh",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_pUNg"};var c=n(1986);function u(e){let{as:t,id:n,...u}=e;const d=(0,s.Z)(),{navbar:{hideOnScroll:p}}=(0,a.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...u,id:void 0});d.collectAnchor(n);const f=(0,o.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof u.children?u.children:n});return(0,c.jsxs)(t,{...u,className:(0,r.Z)("anchor",p?l.anchorWithHideOnScrollNavbar:l.anchorWithStickyNavbar,u.className),id:n,children:[u.children,(0,c.jsx)(i.Z,{className:"hash-link",to:`#${n}`,"aria-label":f,title:f,children:"\u200b"})]})}},8766:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);const r={iconExternalLink:"iconExternalLink_wCY4"};var o=n(1986);function a(e){let{width:t=13.5,height:n=13.5}=e;return(0,o.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink,children:(0,o.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},3021:(e,t,n)=>{"use strict";n.d(t,{Z:()=>ft});var r=n(7800),o=n(605),a=n(1044),i=n(6417),s=n(1948),l=n(1783),c=n(8302),u=n(1986);const d="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,r.useRef)(null),{action:t}=(0,s.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,l.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??m,{containerRef:n,onClick:r}=f();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":m,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var b=n(4130),g=n(8531);const y={skipToContent:"skipToContent_YYjh"};function v(){return(0,u.jsx)(h,{className:y.skipToContent})}var k=n(9028),w=n(213);function S(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:o=1.2,className:a,...i}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,u.jsx)("g",{stroke:r,strokeWidth:o,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const x={closeButton:"closeButton__JNN"};function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,o.Z)("clean-btn close",x.closeButton,e.className),children:(0,u.jsx)(S,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_D3VZ"};function C(e){const{announcementBar:t}=(0,k.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,o.Z)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_dCGP",announcementBarPlaceholder:"announcementBarPlaceholder_rrsK",announcementBarClose:"announcementBarClose_h87j",announcementBarContent:"announcementBarContent_RE1J"};function j(){const{announcementBar:e}=(0,k.L)(),{isActive:t,close:n}=(0,w.n)();if(!t)return null;const{backgroundColor:r,textColor:o,isCloseable:a}=e;return(0,u.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:r,color:o},role:"banner",children:[a&&(0,u.jsx)("div",{className:T.announcementBarPlaceholder}),(0,u.jsx)(C,{className:T.announcementBarContent}),a&&(0,u.jsx)(_,{onClick:n,className:T.announcementBarClose})]})}var P=n(6216),N=n(4691);var A=n(6728),L=n(2783);const R=r.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,P.e)(),t=(0,L.HY)(),[n,o]=(0,r.useState)(!1),a=null!==t.component,i=(0,A.D9)(a);return(0,r.useEffect)((()=>{a&&!i&&o(!0)}),[a,i]),(0,r.useEffect)((()=>{a?e.shown||o(!0):o(!1)}),[e.shown,a]),(0,r.useMemo)((()=>[n,o]),[n])}();return(0,u.jsx)(R.Provider,{value:n,children:t})}function I(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function D(){const e=(0,r.useContext)(R);if(!e)throw new A.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,o=(0,r.useCallback)((()=>n(!1)),[n]),a=(0,L.HY)();return(0,r.useMemo)((()=>({shown:t,hide:o,content:I(a)})),[o,a,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:a}=D();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,o.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var F=n(3935),z=n(4798);function B(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_HWGX",toggleButton:"toggleButton_T8ze",darkToggleIcon:"darkToggleIcon_HgOO",lightToggleIcon:"lightToggleIcon_ei5l",toggleButtonDisabled:"toggleButtonDisabled_sJEf"};function q(e){let{className:t,buttonClassName:n,value:r,onChange:a}=e;const i=(0,z.Z)(),s=(0,l.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===r?(0,l.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,o.Z)($.toggle,t),children:(0,u.jsxs)("button",{className:(0,o.Z)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>a("dark"===r?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,u.jsx)(B,{className:(0,o.Z)($.toggleIcon,$.lightToggleIcon)}),(0,u.jsx)(U,{className:(0,o.Z)($.toggleIcon,$.darkToggleIcon)})]})})}const H=r.memo(q),V={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_GJ4r"};function Z(e){let{className:t}=e;const n=(0,k.L)().navbar.style,r=(0,k.L)().colorMode.disableSwitch,{colorMode:o,setColorMode:a}=(0,F.I)();return r?null:(0,u.jsx)(H,{className:t,buttonClassName:"dark"===n?V.darkNavbarColorModeToggle:void 0,value:o,onChange:a})}var W=n(4358);function G(){return(0,u.jsx)(W.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,P.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(S,{color:"var(--ifm-color-emphasis-600)"})})}function Q(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(G,{}),(0,u.jsx)(Z,{className:"margin-right--md"}),(0,u.jsx)(K,{})]})}var Y=n(2532),X=n(2473),J=n(9455);function ee(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var te=n(8766);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:o,label:a,html:i,isDropdownLink:s,prependBaseUrlToHref:l,...c}=e;const d=(0,X.ZP)(r),p=(0,X.ZP)(t),f=(0,X.ZP)(o,{forcePrependBaseUrl:!0}),m=a&&o&&!(0,J.Z)(o),h=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,u.jsxs)(u.Fragment,{children:[a,m&&(0,u.jsx)(te.Z,{...s&&{width:12,height:12}})]})};return o?(0,u.jsx)(Y.Z,{href:l?f:o,...c,...h}):(0,u.jsx)(Y.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ee(n,t.pathname):t.pathname.startsWith(p)},...c,...h})}function re(e){let{className:t,isDropdownItem:n=!1,...r}=e;const a=(0,u.jsx)(ne,{className:(0,o.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:a}):a}function oe(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ne,{className:(0,o.Z)("menu__link",t),...r})})}function ae(e){let{mobile:t=!1,position:n,...r}=e;const o=t?oe:re;return(0,u.jsx)(o,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var ie=n(1376),se=n(2205),le=n(1715);const ce={dropdownNavbarItemMobile:"dropdownNavbarItemMobile_j7JL"};function ue(e,t){return e.some((e=>function(e,t){return!!(0,se.Mg)(e.to,t)||!!ee(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function de(e){let{items:t,position:n,className:a,onClick:i,...s}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,o.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ne,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:s.to?void 0:"#",className:(0,o.Z)("navbar__link",a),...s,onClick:s.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:s.children??s.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,t)=>(0,r.createElement)(Ee,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function pe(e){let{items:t,className:n,position:a,onClick:i,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,le.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),d=ue(t,c),{collapsed:p,toggleCollapsed:f,setCollapsed:m}=(0,ie.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&m(!d)}),[c,d,m]),(0,u.jsxs)("li",{className:(0,o.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ne,{role:"button",className:(0,o.Z)(ce.dropdownNavbarItemMobile,"menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),f()},children:l.children??l.label}),(0,u.jsx)(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(Ee,{mobile:!0,isDropdownItem:!0,onClick:i,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?pe:de;return(0,u.jsx)(r,{...n})}var me=n(5428);function he(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const be="iconLanguage_T646";var ge=n(9706);const ye={navbarSearchContainer:"navbarSearchContainer_JnLm"};function ve(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,o.Z)(n,ye.navbarSearchContainer),children:t})}var ke=n(7953),we=n(7557);var Se=n(1775);function xe(e,t){return t.alternateDocVersions[e.name]??function(e){return e.docs.find((t=>t.id===e.mainDocId))}(e)}const _e={default:ae,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,queryString:o="",...a}=e;const{i18n:{currentLocale:i,locales:c,localeConfigs:d}}=(0,le.Z)(),p=(0,me.l)(),{search:f,hash:m}=(0,s.TH)(),h=[...n,...c.map((e=>{const n=`${`pathname://${p.createUrl({locale:e,fullyQualified:!1})}`}${f}${m}${o}`;return{label:d[e].label,lang:d[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],b=t?(0,l.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):d[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(he,{className:be}),b]}),items:h})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(ve,{className:n,children:(0,u.jsx)(ge.Z,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:a=!1}=e;const i=a?"li":"div";return(0,u.jsx)(i,{className:(0,o.Z)({navbar__item:!r&&!a,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.Iw)(r),i=(0,we.vY)(t,r),s=a?.path===i?.path;return null===i||i.unlisted&&!s?null:(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>s||!!a?.sidebar&&a.sidebar===i.sidebar,label:n??i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...o}=e;const{activeDoc:a}=(0,ke.Iw)(r),i=(0,we.oz)(t,r).link;if(!i)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(ae,{exact:!0,...o,isActive:()=>a?.sidebar===t,label:n??i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...o}=e;const a=(0,we.lO)(r)[0],i=t??a.label,s=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(a).path;return(0,u.jsx)(ae,{...o,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:o,dropdownItemsAfter:a,...i}=e;const{search:c,hash:d}=(0,s.TH)(),p=(0,ke.Iw)(n),f=(0,ke.gB)(n),{savePreferredVersionName:m}=(0,Se.J)(n),h=[...o,...f.map((function(e){const t=xe(e,p);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...a],b=(0,we.lO)(n)[0],g=t&&h.length>1?(0,l.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):b.label,y=t&&h.length>1?void 0:xe(b,p).path;return h.length<=1?(0,u.jsx)(ae,{...i,mobile:t,label:g,to:y,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...i,mobile:t,label:g,to:y,items:h,isActive:r?()=>!1:void 0})}};function Ee(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),o=_e[r];if(!o)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(o,{...n})}function Ce(){const e=(0,P.e)(),t=(0,k.L)().navbar.items;return(0,u.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,r.createElement)(Ee,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Te(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function je(){const e=0===(0,k.L)().navbar.items.length,t=D();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(Te,{onClick:()=>t.hide()}),t.content]})}function Pe(){const e=(0,P.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(M,{header:(0,u.jsx)(Q,{}),primaryMenu:(0,u.jsx)(Ce,{}),secondaryMenu:(0,u.jsx)(je,{})}):null}const Ne={navbarHideable:"navbarHideable_HwCW",navbarHidden:"navbarHidden_KMyh"};function Ae(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,o.Z)("navbar-sidebar__backdrop",e.className)})}function Le(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:a}}=(0,k.L)(),i=(0,P.e)(),{navbarRef:s,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),o=(0,r.useRef)(!1),a=(0,r.useRef)(0),i=(0,r.useCallback)((e=>{null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,N.RF)(((t,r)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return o.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:s,"aria-label":(0,l.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,o.Z)("navbar","navbar--fixed-top",n&&[Ne.navbarHideable,!d&&Ne.navbarHidden],{"navbar--dark":"dark"===a,"navbar--primary":"primary"===a,"navbar-sidebar--show":i.shown}),children:[t,(0,u.jsx)(Ae,{onClick:i.toggle}),(0,u.jsx)(Pe,{})]})}var Re=n(414);const Oe={errorBoundaryError:"errorBoundaryError_iD_F",errorBoundaryFallback:"errorBoundaryFallback_IyFF"};function Ie(e){return(0,u.jsx)("button",{type:"button",...e,children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function De(e){let{error:t}=e;const n=(0,Re.BN)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,u.jsx)("p",{className:Oe.errorBoundaryError,children:n})}class Me extends r.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const Fe="right";function ze(e){let{width:t=30,height:n=30,className:r,...o}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...o,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function Be(){const{toggle:e,shown:t}=(0,P.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(ze,{})})}const Ue={colorModeToggle:"colorModeToggle_E8t8"};function $e(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,u.jsx)(Me,{onError:t=>new Error(`A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n${JSON.stringify(e,null,2)}`,{cause:t}),children:(0,u.jsx)(Ee,{...e})},t)))})}function qe(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function He(){const e=(0,P.e)(),t=(0,k.L)().navbar.items,[n,r]=function(e){function t(e){return"left"===(e.position??Fe)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),o=t.find((e=>"search"===e.type));return(0,u.jsx)(qe,{left:(0,u.jsxs)(u.Fragment,{children:[!e.disabled&&(0,u.jsx)(Be,{}),(0,u.jsx)(G,{}),(0,u.jsx)($e,{items:n})]}),right:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)($e,{items:r}),(0,u.jsx)(Z,{className:Ue.colorModeToggle}),!o&&(0,u.jsx)(ve,{children:(0,u.jsx)(ge.Z,{})})]})})}function Ve(){return(0,u.jsx)(Le,{children:(0,u.jsx)(He,{})})}function Ze(e){let{item:t}=e;const{to:n,href:r,label:o,prependBaseUrlToHref:a,...i}=t,s=(0,X.ZP)(n),l=(0,X.ZP)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(Y.Z,{className:"footer__link-item",...r?{href:a?l:r}:{to:s},...i,children:[o,r&&!(0,J.Z)(r)&&(0,u.jsx)(te.Z,{})]})}function We(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Ze,{item:t})},t.href??t.to)}function Ge(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(We,{item:e},t)))})]})}function Ke(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(Ge,{column:e},t)))})}function Qe(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Ye(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Ze,{item:t})}function Xe(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Ye,{item:e}),t.length!==n+1&&(0,u.jsx)(Qe,{})]},n)))})})}function Je(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Ke,{columns:t}):(0,u.jsx)(Xe,{links:t})}var et=n(178);const tt={footerLogoLink:"footerLogoLink_DtdP"};function nt(e){let{logo:t}=e;const{withBaseUrl:n}=(0,X.Cg)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(et.Z,{className:(0,o.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function rt(e){let{logo:t}=e;return t.href?(0,u.jsx)(Y.Z,{href:t.href,className:tt.footerLogoLink,target:t.target,children:(0,u.jsx)(nt,{logo:t})}):(0,u.jsx)(nt,{logo:t})}function ot(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function at(e){let{style:t,links:n,logo:r,copyright:a}=e;return(0,u.jsx)("footer",{className:(0,o.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||a)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),a]})]})})}function it(){const{footer:e}=(0,k.L)();if(!e)return null;const{copyright:t,links:n,logo:r,style:o}=e;return(0,u.jsx)(at,{style:o,links:n&&n.length>0&&(0,u.jsx)(Je,{links:n}),logo:r&&(0,u.jsx)(rt,{logo:r}),copyright:t&&(0,u.jsx)(ot,{copyright:t})})}const st=r.memo(it),lt=(0,A.Qc)([F.S,w.p,N.OC,Se.L5,i.VC,function(e){let{children:t}=e;return(0,u.jsx)(L.n2,{children:(0,u.jsx)(P.M,{children:(0,u.jsx)(O,{children:t})})})}]);function ct(e){let{children:t}=e;return(0,u.jsx)(lt,{children:t})}var ut=n(2352);function dt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)(ut.Z,{as:"h1",className:"hero__title",children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("div",{className:"margin-vert--lg",children:(0,u.jsx)(Ie,{onClick:n,className:"button button--primary shadow--lw"})}),(0,u.jsx)("hr",{}),(0,u.jsx)("div",{className:"margin-vert--md",children:(0,u.jsx)(De,{error:t})})]})})})}const pt={mainWrapper:"mainWrapper_ylc1"};function ft(e){const{children:t,noFooter:n,wrapperClassName:r,title:s,description:l}=e;return(0,g.t)(),(0,u.jsxs)(ct,{children:[(0,u.jsx)(i.d,{title:s,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(j,{}),(0,u.jsx)(Ve,{}),(0,u.jsx)("div",{id:d,className:(0,o.Z)(b.k.wrapper.main,pt.mainWrapper,r),children:(0,u.jsx)(a.Z,{fallback:e=>(0,u.jsx)(dt,{...e}),children:t})}),!n&&(0,u.jsx)(st,{})]})}},4358:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7800);var r=n(2532),o=n(2473),a=n(1715),i=n(9028),s=n(178),l=n(1986);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const a={light:(0,o.ZP)(t.src),dark:(0,o.ZP)(t.srcDark||t.src)},i=(0,l.jsx)(s.Z,{className:t.className,sources:a,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:i}):i}function u(e){const{siteConfig:{title:t}}=(0,a.Z)(),{navbar:{title:n,logo:s}}=(0,i.L)(),{imageClassName:u,titleClassName:d,...p}=e,f=(0,o.ZP)(s?.href||"/"),m=n?"":t,h=s?.alt??m;return(0,l.jsxs)(r.Z,{to:f,...p,...s?.target&&{target:s.target},children:[s&&(0,l.jsx)(c,{logo:s,alt:h,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},5212:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});n(7800);var r=n(3073),o=n(1986);function a(e){let{locale:t,version:n,tag:a}=e;const i=t;return(0,o.jsxs)(r.Z,{children:[t&&(0,o.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,o.jsx)("meta",{name:"docusaurus_version",content:n}),a&&(0,o.jsx)("meta",{name:"docusaurus_tag",content:a}),i&&(0,o.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,o.jsx)("meta",{name:"docsearch:version",content:n}),a&&(0,o.jsx)("meta",{name:"docsearch:docusaurus_tag",content:a})]})}},178:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});var r=n(7800),o=n(605),a=n(4798),i=n(3935);const s={themedComponent:"themedComponent_xYyO","themedComponent--light":"themedComponent--light__M5j","themedComponent--dark":"themedComponent--dark_eHrp"};var l=n(1986);function c(e){let{className:t,children:n}=e;const c=(0,a.Z)(),{colorMode:u}=(0,i.I)();return(0,l.jsx)(l.Fragment,{children:(c?"dark"===u?["dark"]:["light"]:["light","dark"]).map((e=>{const a=n({theme:e,className:(0,o.Z)(t,s.themedComponent,s[`themedComponent--${e}`])});return(0,l.jsx)(r.Fragment,{children:a},e)}))})}function u(e){const{sources:t,className:n,alt:r,...o}=e;return(0,l.jsx)(c,{className:n,children:e=>{let{theme:n,className:a}=e;return(0,l.jsx)("img",{src:t[n],alt:r,className:a,...o})}})}},1376:(e,t,n)=>{"use strict";n.d(t,{u:()=>c,z:()=>g});var r=n(7800),o=n(5716),a=n(3915),i=n(8995),s=n(1986);const l="ease-in-out";function c(e){let{initialState:t}=e;const[n,o]=(0,r.useState)(t??!1),a=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return{collapsed:n,setCollapsed:o,toggleCollapsed:a}}const u={display:"none",overflow:"hidden",height:"0px"},d={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?u:d;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:o}=e;const a=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=o?.duration??function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${o?.easing??l}`,height:`${t}px`}}function s(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!a.current)return p(e,n),void(a.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=u.height,e.style.overflow=u.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,o])}function m(e){if(!o.Z.canUseDOM)return e?u:d}function h(e){let{as:t="div",collapsed:n,children:o,animation:a,onCollapseTransitionEnd:i,className:l,disableSSRStyle:c}=e;const u=(0,r.useRef)(null);return f({collapsibleRef:u,collapsed:n,animation:a}),(0,s.jsx)(t,{ref:u,style:c?void 0:m(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(u.current,n),i?.(n))},className:l,children:o})}function b(e){let{collapsed:t,...n}=e;const[o,i]=(0,r.useState)(!t),[l,c]=(0,r.useState)(t);return(0,a.Z)((()=>{t||i(!0)}),[t]),(0,a.Z)((()=>{o&&c(t)}),[o,t]),o?(0,s.jsx)(h,{...n,collapsed:l}):null}function g(e){let{lazy:t,...n}=e;const r=t?b:h;return(0,s.jsx)(r,{...n})}},213:(e,t,n)=>{"use strict";n.d(t,{n:()=>h,p:()=>m});var r=n(7800),o=n(4798),a=n(5194),i=n(6728),s=n(9028),l=n(1986);const c=(0,a.WA)("docusaurus.announcement.dismiss"),u=(0,a.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),f=r.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.L)(),t=(0,o.Z)(),[n,a]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{a(d())}),[]);const i=(0,r.useCallback)((()=>{p(!0),a(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||a(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,l.jsx)(f.Provider,{value:n,children:t})}function h(){const e=(0,r.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},3935:(e,t,n)=>{"use strict";n.d(t,{I:()=>g,S:()=>b});var r=n(7800),o=n(5716),a=n(6728),i=n(5194),s=n(9028),l=n(1986);const c=r.createContext(void 0),u="theme",d=(0,i.WA)(u),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>o.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),h=e=>{d.set(f(e))};function b(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.L)(),[o,a]=(0,r.useState)(m(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const i=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:o=!0}=r;t?(a(t),o&&h(t)):(a(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(o))}),[o]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const l=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||l.current?l.current=window.matchMedia("print").matches:i(null)};return e.addListener(r),()=>e.removeListener(r)}),[i,t,n]),(0,r.useMemo)((()=>({colorMode:o,setColorMode:i,get isDarkTheme(){return o===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[o,i])}();return(0,l.jsx)(c.Provider,{value:n,children:t})}function g(){const e=(0,r.useContext)(c);if(null==e)throw new a.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},6216:(e,t,n)=>{"use strict";n.d(t,{M:()=>f,e:()=>m});var r=n(7800),o=n(2783),a=n(2724),i=n(1948),s=n(6728);function l(e){!function(e){const t=(0,i.k6)(),n=(0,s.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(9028),u=n(1986);const d=r.createContext(void 0);function p(){const e=function(){const e=(0,o.HY)(),{items:t}=(0,c.L)().navbar;return 0===t.length&&!e.component}(),t=(0,a.i)(),n=!e&&"mobile"===t,[i,s]=(0,r.useState)(!1);l((()=>{if(i)return s(!1),!1}));const u=(0,r.useCallback)((()=>{s((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&s(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:i})),[e,n,u,i])}function f(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function m(){const e=r.useContext(d);if(void 0===e)throw new s.i6("NavbarMobileSidebarProvider");return e}},2783:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>c,n2:()=>s});var r=n(7800),o=n(6728),a=n(1986);const i=r.createContext(null);function s(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,a.jsx)(i.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(i);if(!e)throw new o.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const a=(0,r.useContext)(i);if(!a)throw new o.i6("NavbarSecondaryMenuContentProvider");const[,s]=a,l=(0,o.Ql)(n);return(0,r.useEffect)((()=>{s({component:t,props:l})}),[s,t,l]),(0,r.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},8531:(e,t,n)=>{"use strict";n.d(t,{h:()=>o,t:()=>a});var r=n(7800);const o="navigation-with-keyboard";function a(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(o),"mousedown"===e.type&&document.body.classList.remove(o)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(o),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},2724:(e,t,n)=>{"use strict";n.d(t,{i:()=>s});var r=n(7800),o=n(5716);const a={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(e){let{desktopBreakpoint:t=i}=void 0===e?{}:e;const[n,s]=(0,r.useState)((()=>"ssr"));return(0,r.useEffect)((()=>{function e(){s(function(e){if(!o.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>e?a.desktop:a.mobile}(t))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[t]),n}},4130:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",blogAuthorsListPage:"blog-authors-list-page",blogAuthorsPostsPage:"blog-authors-posts-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",draftBanner:"theme-draft-banner",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{blogFooterTagsRow:"theme-blog-footer-tags-row",blogFooterEditMetaRow:"theme-blog-footer-edit-meta-row"},pages:{pageFooterEditMetaRow:"theme-pages-footer-edit-meta-row"}}},8995:(e,t,n)=>{"use strict";function r(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>r})},6417:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>d,VC:()=>m});var r=n(7800),o=n(605),a=n(3073),i=n(6758);function s(){const e=r.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(2473),c=n(1715);var u=n(1986);function d(e){let{title:t,description:n,keywords:r,image:o,children:i}=e;const s=function(e){const{siteConfig:t}=(0,c.Z)(),{title:n,titleDelimiter:r}=t;return e?.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,l.Cg)(),p=o?d(o,{absolute:!0}):void 0;return(0,u.jsxs)(a.Z,{children:[t&&(0,u.jsx)("title",{children:s}),t&&(0,u.jsx)("meta",{property:"og:title",content:s}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=r.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=r.useContext(p),s=(0,o.Z)(i,t);return(0,u.jsxs)(p.Provider,{value:s,children:[(0,u.jsx)(a.Z,{children:(0,u.jsx)("html",{className:s})}),n]})}function m(e){let{children:t}=e;const n=s(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const a=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(f,{className:(0,o.Z)(r,a),children:t})}},6728:(e,t,n)=>{"use strict";n.d(t,{D9:()=>s,Qc:()=>u,Ql:()=>c,i6:()=>l,zX:()=>i});var r=n(7800),o=n(3915),a=n(1986);function i(e){const t=(0,r.useRef)(e);return(0,o.Z)((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,r.useRef)();return(0,o.Z)((()=>{t.current=e})),t.current}class l extends Error{constructor(e,t){super(),this.name="ReactContextError",this.message=`Hook ${this.stack?.split("\n")[1]?.match(/at (?:\w+\.)?(?\w+)/)?.groups.name??""} is called outside the <${e}>. ${t??""}`}}function c(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function u(e){return t=>{let{children:n}=t;return(0,a.jsx)(a.Fragment,{children:e.reduceRight(((e,t)=>(0,a.jsx)(t,{children:e})),n)})}}},2205:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>s});var r=n(7800),o=n(6729),a=n(1715);function i(e,t){const n=e=>(!e||e.endsWith("/")?e:`${e}/`)?.toLowerCase();return n(e)===n(t)}function s(){const{baseUrl:e}=(0,a.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(o).flatMap((e=>e.routes??[])))}(n)}({routes:o.Z,baseUrl:e})),[e])}},4691:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>f,OC:()=>c,RF:()=>p});var r=n(7800),o=n(5716),a=n(4798),i=(n(3915),n(6728)),s=n(1986);const l=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,s.jsx)(l.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(l);if(null==e)throw new i.i6("ScrollControllerProvider");return e}const d=()=>o.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),o=(0,r.useRef)(d()),a=(0,i.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();a(e,o.current),o.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[a,n,...t])}function f(){const e=(0,r.useRef)(null),t=(0,a.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const o=document.documentElement.scrollTop;(n&&o>e||!n&&ot&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>e.current?.()}}},5194:(e,t,n)=>{"use strict";n.d(t,{WA:()=>c});n(7800);const r=JSON.parse('{"d":"localStorage","u":""}'),o=r.d;function a(e){let{key:t,oldValue:n,newValue:r,storage:o}=e;if(n===r)return;const a=document.createEvent("StorageEvent");a.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,o),window.dispatchEvent(a)}function i(e){if(void 0===e&&(e=o),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const l={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function c(e,t){const n=`${e}${r.u}`;if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(n);const o=i(t?.persistence);return null===o?l:{get:()=>{try{return o.getItem(n)}catch(e){return console.error(`Docusaurus storage error, can't get key=${n}`,e),null}},set:e=>{try{const t=o.getItem(n);o.setItem(n,e),a({key:n,oldValue:t,newValue:e,storage:o})}catch(t){console.error(`Docusaurus storage error, can't set ${n}=${e}`,t)}},del:()=>{try{const e=o.getItem(n);o.removeItem(n),a({key:n,oldValue:e,newValue:null,storage:o})}catch(e){console.error(`Docusaurus storage error, can't delete key=${n}`,e)}},listen:e=>{try{const t=t=>{t.storageArea===o&&t.key===n&&e(t)};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)}catch(t){return console.error(`Docusaurus storage error, can't listen for changes of key=${n}`,t),()=>{}}}}}},5428:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(1715),o=n(1948),a=n(414);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,r.Z)(),{pathname:l}=(0,o.TH)(),c=(0,a.Do)(l,{trailingSlash:n,baseUrl:e}),u=s===i?e:e.replace(`/${s}/`,"/"),d=c.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:r}=e;return`${r?t:""}${function(e){return e===i?`${u}`:`${u}${e}/`}(n)}${d}`}}}},8302:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var r=n(7800),o=n(1948),a=n(6728);function i(e){const t=(0,o.TH)(),n=(0,a.D9)(t),i=(0,a.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},9028:(e,t,n)=>{"use strict";n.d(t,{L:()=>o});var r=n(1715);function o(){return(0,r.Z)().siteConfig.themeConfig}},1990:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===r?i:(l=i,c=n,c?o(l):a(l));var l,c;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(3844);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},3247:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},414:(e,t,n)=>{"use strict";t.BN=t.Do=void 0;const r=n(8408);var o=n(1990);Object.defineProperty(t,"Do",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(3844);var i=n(3247);Object.defineProperty(t,"BN",{enumerable:!0,get:function(){return i.getErrorCausalChain}})},3844:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},5508:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addTrailingSlash=o,t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[i]=e.split(/[#?]/),s="/"===i||i===r?i:(l=i,c=n,c?o(l):a(l));var l,c;return e.replace(i,s)},t.addLeadingSlash=function(e){return(0,r.addPrefix)(e,"/")},t.removeTrailingSlash=a;const r=n(3087);function o(e){return e.endsWith("/")?e:`${e}/`}function a(e){return(0,r.removeSuffix)(e,"/")}},922:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=function e(t){if(t.cause)return[t,...e(t.cause)];return[t]}},8549:(e,t,n)=>{"use strict";t.Do=void 0;const r=n(8408);var o=n(5508);Object.defineProperty(t,"Do",{enumerable:!0,get:function(){return r.__importDefault(o).default}});var a=n(3087);var i=n(922)},3087:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addPrefix=function(e,t){return e.startsWith(t)?e:`${t}${e}`},t.removeSuffix=function(e,t){if(""===t)return e;return e.endsWith(t)?e.slice(0,-t.length):e},t.addSuffix=function(e,t){return e.endsWith(t)?e:`${e}${t}`},t.removePrefix=function(e,t){return e.startsWith(t)?e.slice(t.length):e}},6729:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7800);var r=n(2633),o=n.n(r),a=n(6887);const i={"0145a656":[()=>n.e(3881).then(n.bind(n,2951)),"@site/docs/react/hooks/useImageStatus.mdx",2951],"055c623c":[()=>n.e(782).then(n.bind(n,7851)),"@site/docs/utils/common/delay.md",7851],"087cca41":[()=>n.e(4947).then(n.bind(n,5189)),"@site/docs/react/hooks/useLocalStorage.mdx",5189],"0ac9f023":[()=>n.e(7672).then(n.bind(n,4673)),"@site/docs/utils/validator/isNumber.md",4673],"0d5e1e85":[()=>n.e(9073).then(n.bind(n,7629)),"@site/docs/utils/array/contains.md",7629],"0d7f7655":[()=>n.e(2321).then(n.bind(n,3116)),"@site/docs/utils/clipboard/copyClipboardImage.md",3116],"0ed4549e":[()=>n.e(7567).then(n.bind(n,3424)),"@site/docs/react/hooks/useSessionStorage.mdx",3424],"10b17783":[()=>n.e(5352).then(n.bind(n,7107)),"@site/docs/utils/string/serialize.md",7107],"114d5267":[()=>n.e(8828).then(n.bind(n,1549)),"@site/docs/utils/object/omit.md",1549],"11738f66":[()=>n.e(4949).then(n.bind(n,1937)),"@site/docs/react/hooks/useResizeObserver.mdx",1937],"11aa0540":[()=>n.e(8556).then(n.bind(n,5351)),"@site/docs/utils/array/fill.md",5351],"13c37bf4":[()=>n.e(6656).then(n.bind(n,7230)),"@site/docs/react/components/ClientOnly.mdx",7230],"13eb7aa0":[()=>n.e(8913).then(n.bind(n,6108)),"@site/docs/utils/validator/isValidEmail.md",6108],17896441:[()=>Promise.all([n.e(532),n.e(7918)]).then(n.bind(n,7603)),"@theme/DocItem",7603],"1b715083":[()=>n.e(6644).then(n.bind(n,7777)),"@site/docs/utils/array/swap.md",7777],"1c14d10f":[()=>n.e(6350).then(n.bind(n,5013)),"@site/docs/utils/clipboard/copyClipboardText.md",5013],"1c2388cf":[()=>n.e(7840).then(n.bind(n,8154)),"@site/docs/react/components/SeparatedIterator.mdx",8154],"1c24dc38":[()=>n.e(3899).then(n.bind(n,4386)),"@site/docs/utils/validator/isValidPhoneNumberFormat.md",4386],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,2326)),"@site/src/pages/index.tsx",2326],"1ebcacad":[()=>n.e(6088).then(n.bind(n,2056)),"@site/docs/react/hooks/useStepState.mdx",2056],"219c5550":[()=>n.e(4291).then(n.bind(n,6808)),"@site/docs/utils/object/objectValues.md",6808],"225c6dfe":[()=>n.e(9287).then(n.bind(n,2870)),"@site/docs/react/hooks/useMouse.mdx",2870],"24c74d07":[()=>n.e(39).then(n.bind(n,172)),"@site/docs/react/components/FallbackLazyImage.mdx",172],"295f1714":[()=>n.e(4549).then(n.bind(n,7543)),"@site/docs/react/hooks/useHover.mdx",7543],"2eff3e5b":[()=>n.e(4753).then(n.bind(n,7586)),"@site/docs/react/hooks/useToggle.mdx",7586],"308b5f81":[()=>n.e(4580).then(n.bind(n,1956)),"@site/docs/react/hooks/useIntersectionObserver.mdx",1956],"3209f55a":[()=>n.e(4870).then(n.bind(n,1268)),"@site/docs/react/hooks/useAsyncPreservedCallback.mdx",1268],"3309a2a7":[()=>n.e(7959).then(n.bind(n,4779)),"@site/docs/utils/object/groupBy.md",4779],"3354f11f":[()=>n.e(1058).then(n.bind(n,3269)),"@site/docs/utils/array/forEachRight.md",3269],"3842c52b":[()=>n.e(8852).then(n.bind(n,8021)),"@site/docs/react/hooks/usePreservedCallback.mdx",8021],"393b1e48":[()=>n.e(5399).then(n.bind(n,1399)),"@site/docs/utils/array/take.md",1399],"3a913ae5":[()=>n.e(6357).then(n.bind(n,4946)),"@site/docs/utils/array/flattenDeep.md",4946],"3bdef6d7":[()=>n.e(8090).then(n.bind(n,7201)),"@site/docs/react/hooks/useDebouncedState.mdx",7201],"3c17568f":[()=>n.e(8911).then(n.bind(n,8873)),"@site/docs/react/hooks/useIsMounted.mdx",8873],"3c9c350b":[()=>n.e(3443).then(n.bind(n,1739)),"@site/docs/utils/file/getMIMETypeFromFile.md",1739],"40a66591":[()=>n.e(1925).then(n.bind(n,1957)),"@site/docs/utils/clipboard/copyFallbackClipboardText.md",1957],"429e0383":[()=>n.e(1861).then(n.bind(n,6583)),"@site/docs/utils/validator/isPromise.md",6583],"42a77533":[()=>n.e(3142).then(n.bind(n,4601)),"@site/docs/react/hooks/useOutsidePointerDown.mdx",4601],"42f2960f":[()=>n.e(8469).then(n.bind(n,4959)),"@site/docs/react/hooks/useFileReader.mdx",4959],47707012:[()=>n.e(5917).then(n.bind(n,8324)),"@site/docs/utils/object/objectEntries.md",8324],"47a95eb2":[()=>n.e(410).then(n.bind(n,183)),"@site/docs/react/components/DebounceWrapper.mdx",183],"48bf7dd7":[()=>n.e(1921).then(n.bind(n,9518)),"@site/docs/utils/file/convertImageToBlob.md",9518],"4bcec4df":[()=>n.e(8117).then(n.bind(n,1302)),"@site/docs/utils/object/mapKeys.md",1302],"4ef284f1":[()=>n.e(6801).then(n.bind(n,6510)),"@site/docs/utils/validator/isValidPassword.md",6510],"4fcbd706":[()=>n.e(1698).then(n.bind(n,3227)),"@site/docs/utils/string/repeatCharacters.md",3227],"52083c08":[()=>n.e(259).then(n.bind(n,5670)),"@site/docs/utils/common/deepCopy.md",5670],"525bfb2e":[()=>n.e(2917).then(n.bind(n,6514)),"@site/docs/utils/common/getViewportSize.md",6514],"53f54fd5":[()=>n.e(3883).then(n.bind(n,1431)),"@site/docs/utils/common/abRandom.md",1431],"54102c04":[()=>n.e(2269).then(n.bind(n,4871)),"@site/docs/react/components/LazyImage.mdx",4871],"5755dd50":[()=>n.e(7180).then(n.bind(n,9629)),"@site/docs/utils/math/range.md",9629],"58c97aa0":[()=>n.e(3993).then(n.bind(n,2333)),"@site/docs/utils/formatter/formatNumberCurrency.md",2333],"5ba0edd1":[()=>n.e(6999).then(n.bind(n,1573)),"@site/docs/utils/clipboard/readClipboardText.md",1573],"5c9b0204":[()=>n.e(6331).then(n.bind(n,2651)),"@site/docs/utils/object/pick.md",2651],"5cdabd8b":[()=>n.e(8640).then(n.bind(n,4479)),"@site/docs/utils/string/removeSpecialCharacters.md",4479],"5d610355":[()=>n.e(1958).then(n.bind(n,4126)),"@site/docs/react/hooks/useInterval.mdx",4126],"5e95c892":[()=>n.e(9661).then(n.bind(n,9418)),"@theme/DocsRoot",9418],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"602e080a":[()=>n.e(1339).then(n.bind(n,9409)),"@site/docs/utils/common/once.md",9409],"607b29e9":[()=>n.e(6004).then(n.bind(n,9859)),"@site/docs/utils/validator/isNotNil.md",9859],"61a35b61":[()=>n.e(9034).then(n.bind(n,1982)),"@site/docs/react/hooks/useMediaQuery.mdx",1982],"63b1b2d9":[()=>n.e(6938).then(n.bind(n,9956)),"@site/docs/utils/array/flattenDeepThenMap.md",9956],"63f47a7c":[()=>n.e(7539).then(n.bind(n,7972)),"@site/docs/react/hooks/useEventListener.mdx",7972],"67c089fb":[()=>n.e(3776).then(n.bind(n,2280)),"@site/docs/react/hooks/useDebounce.mdx",2280],"67c0cc0e":[()=>n.e(6439).then(n.bind(n,5745)),"@site/docs/react/hooks/useScrollTo.mdx",5745],"696f779e":[()=>n.e(8906).then(n.bind(n,9444)),"@site/docs/utils/array/intersection.md",9444],"6b7ba1c1":[()=>n.e(4583).then(n.bind(n,1002)),"@site/docs/utils/common/hexToRgba.md",1002],"6bd54dd6":[()=>n.e(4168).then(n.bind(n,5630)),"@site/docs/react/hooks/useVisibilityChange.mdx",5630],"6be53428":[()=>n.e(3447).then(n.bind(n,8768)),"@site/docs/utils/common/parseJSON.md",8768],"6ca9d65c":[()=>n.e(8022).then(n.bind(n,4181)),"@site/docs/utils/validator/isInRange.md",4181],"6dde689d":[()=>n.e(3030).then(n.bind(n,9865)),"@site/docs/react/hooks/useTimeout.mdx",9865],"6ff934e9":[()=>n.e(5900).then(n.bind(n,9909)),"@site/docs/utils/validator/isFloat.md",9909],"764f42b2":[()=>n.e(5497).then(n.bind(n,1895)),"@site/docs/react/hooks/useMergeRefs.mdx",1895],"771be322":[()=>n.e(984).then(n.bind(n,2931)),"@site/docs/react/hooks/useDebouncedInputValue.mdx",2931],"787b166d":[()=>n.e(6661).then(n.bind(n,4114)),"@site/docs/utils/file/convertImageToBase64.md",4114],"78bcb238":[()=>n.e(856).then(n.bind(n,3570)),"@site/docs/react/components/IfElse.mdx",3570],"79b124e2":[()=>n.e(8633).then(n.bind(n,3187)),"@site/docs/utils/clipboard/readClipboardContents.md",3187],"7b7be0e1":[()=>n.e(8535).then(n.bind(n,9570)),"@site/docs/utils/validator/isEqual.md",9570],"7c664e86":[()=>n.e(1986).then(n.bind(n,3345)),"@site/docs/utils/style/rem.md",3345],"7d279fec":[()=>n.e(7647).then(n.bind(n,3079)),"@site/docs/react/hooks/useForceUpdate.mdx",3079],"8053496e":[()=>n.e(7363).then(n.bind(n,5778)),"@site/docs/react/components/AspectRatio.mdx",5778],"8079f804":[()=>n.e(9643).then(n.bind(n,4033)),"@site/docs/react/hooks/useCounter.mdx",4033],"80d874f9":[()=>n.e(6302).then(n.bind(n,2901)),"@site/docs/utils/file/getMIMETypeFromUrl.md",2901],"80edd989":[()=>n.e(6349).then(n.bind(n,2302)),"@site/docs/utils/string/extractLetters.md",2302],"81f2ad2e":[()=>n.e(6599).then(n.bind(n,7415)),"@site/docs/utils/array/difference.md",7415],84604114:[()=>n.e(2311).then(n.bind(n,2441)),"@site/docs/utils/validator/hasProperty.md",2441],"851080f9":[()=>n.e(4095).then(n.bind(n,3483)),"@site/docs/utils/validator/isWindow.md",3483],"8797c936":[()=>n.e(9247).then(n.bind(n,470)),"@site/docs/utils/device/isMobile.md",470],"8a0a0e72":[()=>n.e(5122).then(n.bind(n,7051)),"@site/docs/utils/array/chunk.md",7051],"8a16b8e9":[()=>n.e(8866).then(n.bind(n,142)),"@site/docs/react/hooks/useDocumentTitle.mdx",142],"8b9d18ba":[()=>n.e(6646).then(n.bind(n,1765)),"@site/docs/react/components/OutsideClick.mdx",1765],"8c7c483d":[()=>n.e(6606).then(n.bind(n,3027)),"@site/docs/utils/math/min.md",3027],"8df16441":[()=>n.e(4821).then(n.bind(n,5032)),"@site/docs/utils/array/intersectionWithDuplicates.md",5032],"90aeac69":[()=>n.e(4017).then(n.bind(n,7646)),"@site/docs/react/hooks/usePreservedState.mdx",7646],"90f5246c":[()=>n.e(2386).then(n.bind(n,3863)),"@site/docs/utils/object/deleteEmptyProperties.md",3863],"932ca9ec":[()=>n.e(6300).then(n.bind(n,2076)),"@site/docs/react/hooks/useScrollLock.mdx",2076],"9577a7f6":[()=>n.e(7303).then(n.bind(n,5707)),"@site/docs/utils/math/sum.md",5707],"98f9954c":[()=>n.e(6149).then(n.bind(n,8691)),"@site/docs/utils/string/reverseString.md",8691],"993de3e1":[()=>n.e(3385).then(n.bind(n,1207)),"@site/docs/introduce/Introduce.md",1207],"9be130a4":[()=>n.e(5337).then(n.bind(n,6297)),"@site/docs/react/hooks/usePrevious.mdx",6297],"9e9c0b32":[()=>n.e(7167).then(n.bind(n,9624)),"@site/docs/utils/validator/isFuntion.md",9624],a02492b2:[()=>n.e(8727).then(n.bind(n,5563)),"@site/docs/utils/array/partition.md",5563],a1e26520:[()=>n.e(178).then(n.bind(n,801)),"@site/docs/utils/array/flatMap.md",801],a3058236:[()=>n.e(5590).then(n.bind(n,4351)),"@site/docs/utils/validator/isBoolean.md",4351],a45fe377:[()=>n.e(59).then(n.bind(n,7474)),"@site/docs/react/hooks/useCycleList.mdx",7474],a7456010:[()=>n.e(5980).then(n.t.bind(n,9365,19)),"@generated/docusaurus-plugin-content-pages/default/__plugin.json",9365],a7bd4aaa:[()=>n.e(8518).then(n.bind(n,1782)),"@theme/DocVersionRoot",1782],a878cfb6:[()=>n.e(1774).then(n.bind(n,1057)),"@site/docs/utils/common/identity.md",1057],a94703ab:[()=>Promise.all([n.e(532),n.e(4368)]).then(n.bind(n,1769)),"@theme/DocRoot",1769],aa089504:[()=>n.e(3238).then(n.bind(n,5488)),"@site/docs/react/hooks/usePreferredColorScheme.mdx",5488],aba21aa0:[()=>n.e(3629).then(n.t.bind(n,8420,19)),"@generated/docusaurus-plugin-content-docs/default/__plugin.json",8420],abd7e418:[()=>n.e(5554).then(n.bind(n,4077)),"@site/docs/utils/array/compact.md",4077],ad000c78:[()=>n.e(9128).then(n.bind(n,7640)),"@site/docs/utils/device/isClient.md",7640],ad8813a3:[()=>n.e(1874).then(n.bind(n,7168)),"@site/docs/react/hooks/useUserAgent.mdx",7168],b1051e9c:[()=>n.e(2911).then(n.bind(n,377)),"@site/docs/utils/math/average.md",377],b279b717:[()=>n.e(3137).then(n.bind(n,3972)),"@site/docs/utils/file/getMIMEType.md",3972],b35b1276:[()=>n.e(1813).then(n.bind(n,8288)),"@site/docs/react/components/When.mdx",8288],b3bf5b56:[()=>n.e(1175).then(n.bind(n,1285)),"@site/docs/react/hooks/useWindowSize.mdx",1285],b7504c90:[()=>n.e(6911).then(n.bind(n,4364)),"@site/docs/utils/string/countSubstringOccurrences.md",4364],b862475b:[()=>n.e(811).then(n.bind(n,3755)),"@site/docs/react/hooks/useClipboard.mdx",3755],b8848313:[()=>n.e(9135).then(n.bind(n,1676)),"@site/docs/utils/validator/isPrimitive.md",1676],b9060d98:[()=>n.e(450).then(n.bind(n,6487)),"@site/docs/utils/array/excludeElements.md",6487],bac0f70c:[()=>n.e(7893).then(n.bind(n,9702)),"@site/docs/utils/string/extractNumber.md",9702],be1b9454:[()=>n.e(7652).then(n.bind(n,5505)),"@site/docs/utils/validator/isNil.md",5505],bf0dbc92:[()=>n.e(8067).then(n.bind(n,3284)),"@site/docs/react/components/InView.mdx",3284],bfd49d7f:[()=>n.e(8240).then(n.bind(n,1539)),"@site/docs/utils/validator/isMIMEType.md",1539],bfe77232:[()=>n.e(7820).then(n.bind(n,8305)),"@site/docs/utils/common/size.md",8305],c55bf516:[()=>n.e(35).then(n.bind(n,8697)),"@site/docs/react/hooks/useKeyDown.mdx",8697],c55c9b0f:[()=>n.e(6152).then(n.bind(n,5346)),"@site/docs/react/components/SwithCase.mdx",5346],c79d4cee:[()=>n.e(4399).then(n.bind(n,7467)),"@site/docs/utils/array/shuffle.md",7467],c97d1ae8:[()=>n.e(3152).then(n.bind(n,2512)),"@site/docs/utils/object/invert.md",2512],cb3f6f96:[()=>n.e(4217).then(n.bind(n,4430)),"@site/docs/react/components/Iterator.mdx",4430],cbca3a13:[()=>n.e(2777).then(n.bind(n,8895)),"@site/docs/utils/common/getUniqTime.md",8895],cc0ca23c:[()=>n.e(4123).then(n.bind(n,1027)),"@site/docs/react/hooks/useThrottle.mdx",1027],cc788f09:[()=>n.e(4077).then(n.bind(n,2594)),"@site/docs/utils/validator/isString.md",2594],cdc73f16:[()=>n.e(2101).then(n.bind(n,8576)),"@site/docs/utils/object/mapValues.md",8576],cdcab0ad:[()=>n.e(3470).then(n.bind(n,5932)),"@site/docs/react/components/Portal.mdx",5932],cea48cda:[()=>n.e(6908).then(n.bind(n,2497)),"@site/docs/utils/array/flatten.md",2497],d1eeb7e1:[()=>n.e(4703).then(n.bind(n,9155)),"@site/docs/utils/validator/isArray.md",9155],d272ecc5:[()=>n.e(5380).then(n.bind(n,7568)),"@site/docs/utils/object/objectKeys.md",7568],d5af7a66:[()=>n.e(6002).then(n.bind(n,4766)),"@site/docs/utils/device/isSever.md",4766],d6a5e8fc:[()=>n.e(6776).then(n.bind(n,9450)),"@site/docs/utils/array/mapRight.md",9450],d6ba6004:[()=>n.e(1650).then(n.bind(n,4054)),"@site/docs/utils/array/countOccurrencesInArray.md",4054],d909d062:[()=>n.e(4277).then(n.bind(n,8203)),"@site/docs/utils/array/union.md",8203],db388e02:[()=>n.e(9576).then(n.bind(n,5028)),"@site/docs/react/hooks/useBlockPromiseMultipleClick.mdx",5028],dbd15680:[()=>n.e(7515).then(n.bind(n,1497)),"@site/docs/utils/common/noop.md",1497],dbf68f77:[()=>n.e(8862).then(n.bind(n,5763)),"@site/docs/react/hooks/useIsomorphicLayoutEffect.mdx",5763],dd6be58e:[()=>n.e(4475).then(n.bind(n,1226)),"@site/docs/utils/array/flatMapDeep.md",1226],de5848ef:[()=>n.e(4129).then(n.bind(n,4534)),"@site/docs/utils/formatter/formatPhoneNumber.md",4534],e1570e80:[()=>n.e(2355).then(n.bind(n,5054)),"@site/docs/utils/validator/isNumericString.md",5054],e16a0351:[()=>n.e(9404).then(n.bind(n,6056)),"@site/docs/utils/array/drop.md",6056],e3446db6:[()=>n.e(4660).then(n.bind(n,1386)),"@site/docs/react/hooks/useVhProperty.mdx",1386],e5994cbd:[()=>n.e(6909).then(n.bind(n,8989)),"@site/docs/utils/formatter/formatNumberWithCommas.md",8989],e5e192df:[()=>n.e(5431).then(n.bind(n,5142)),"@site/docs/utils/common/pickFalsy.md",5142],e72e489d:[()=>n.e(5418).then(n.bind(n,8221)),"@site/docs/utils/common/asyncNoop.md",8221],e80051d9:[()=>n.e(7212).then(n.bind(n,8958)),"@site/docs/utils/validator/isSubset.md",8958],e886aeee:[()=>n.e(8848).then(n.bind(n,460)),"@site/docs/utils/file/getBlobFromUrl.md",460],eabfdb13:[()=>n.e(2627).then(n.bind(n,1409)),"@site/docs/react/hooks/useUnmount.mdx",1409],eb0f0f4b:[()=>n.e(1165).then(n.bind(n,919)),"@site/docs/react/hooks/useNetwork.mdx",919],ec8014fa:[()=>n.e(5784).then(n.bind(n,9885)),"@site/docs/utils/file/getMIMETypeFromResponse.md",9885],ee1f2119:[()=>n.e(7932).then(n.t.bind(n,2601,19)),"@generated/docusaurus-plugin-content-docs/default/p/modern-kit-docs-6ff.json",2601],ee418e94:[()=>n.e(4142).then(n.bind(n,7867)),"@site/docs/utils/device/getOS.md",7867],eea24eaa:[()=>n.e(3231).then(n.bind(n,2686)),"@site/docs/utils/validator/isPlainObject.md",2686],f4aa30a8:[()=>n.e(5964).then(n.bind(n,8080)),"@site/docs/utils/validator/isReference.md",8080],f6dc8c23:[()=>n.e(324).then(n.bind(n,5595)),"@site/docs/utils/object/mergeProperties.md",5595],f717749c:[()=>n.e(8442).then(n.bind(n,5146)),"@site/docs/utils/common/getUniqId.md",5146],f9c93bdc:[()=>n.e(9674).then(n.bind(n,3550)),"@site/docs/utils/array/uniq.md",3550],f9f2812b:[()=>n.e(1402).then(n.bind(n,6527)),"@site/docs/utils/math/max.md",6527],fa68d07c:[()=>n.e(8254).then(n.bind(n,5317)),"@site/docs/utils/formatter/formatNumberByUnits.md",5317],fa6a5d39:[()=>n.e(1900).then(n.bind(n,3426)),"@site/docs/utils/common/wrapInArray.md",3426],fbe6690a:[()=>n.e(7049).then(n.bind(n,8643)),"@site/docs/react/hooks/useStep.mdx",8643]};var s=n(1986);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(6069),u=n(6758);function d(e,t){if("*"===e)return o()({loading:l,loader:()=>n.e(6130).then(n.bind(n,6130)),modules:["@theme/NotFound"],webpack:()=>[6130],render(e,t){const n=e.default;return(0,s.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const r=a[`${e}-${t}`],d={},p=[],f=[],m=(0,c.Z)(r);return Object.entries(m).forEach((e=>{let[t,n]=e;const r=i[n];r&&(d[t]=r[0],p.push(r[1]),f.push(r[2]))})),o().Map({loading:l,loader:d,modules:p,webpack:()=>f,render(t,n){const o=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const a=r.default;if(!a)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof a&&"function"!=typeof a||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{a[e]=r[e]}));let i=o;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=a}));const a=o.__comp;delete o.__comp;const i=o.__context;delete o.__context;const l=o.__props;return delete o.__props,(0,s.jsx)(u.z,{value:i,children:(0,s.jsx)(a,{...o,...l,...n})})}})}const p=[{path:"/modern-kit/docs",component:d("/modern-kit/docs","32c"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","3a1"),routes:[{path:"/modern-kit/docs",component:d("/modern-kit/docs","065"),routes:[{path:"/modern-kit/docs/introduce/",component:d("/modern-kit/docs/introduce/","975"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/AspectRatio",component:d("/modern-kit/docs/react/components/AspectRatio","5f2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/ClientOnly",component:d("/modern-kit/docs/react/components/ClientOnly","182"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/DebounceWrapper",component:d("/modern-kit/docs/react/components/DebounceWrapper","4f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/FallbackLazyImage",component:d("/modern-kit/docs/react/components/FallbackLazyImage","dc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/IfElse",component:d("/modern-kit/docs/react/components/IfElse","489"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/InView",component:d("/modern-kit/docs/react/components/InView","ed4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Iterator",component:d("/modern-kit/docs/react/components/Iterator","af8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/LazyImage",component:d("/modern-kit/docs/react/components/LazyImage","001"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/OutsideClick",component:d("/modern-kit/docs/react/components/OutsideClick","f84"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/Portal",component:d("/modern-kit/docs/react/components/Portal","356"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/SeparatedIterator",component:d("/modern-kit/docs/react/components/SeparatedIterator","282"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/SwithCase",component:d("/modern-kit/docs/react/components/SwithCase","99e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/components/When",component:d("/modern-kit/docs/react/components/When","ae9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useAsyncPreservedCallback",component:d("/modern-kit/docs/react/hooks/useAsyncPreservedCallback","183"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick",component:d("/modern-kit/docs/react/hooks/useBlockPromiseMultipleClick","fd1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useClipboard",component:d("/modern-kit/docs/react/hooks/useClipboard","560"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useCounter",component:d("/modern-kit/docs/react/hooks/useCounter","46b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useCycleList",component:d("/modern-kit/docs/react/hooks/useCycleList","7f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebounce",component:d("/modern-kit/docs/react/hooks/useDebounce","fab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebouncedInputValue",component:d("/modern-kit/docs/react/hooks/useDebouncedInputValue","8a9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDebouncedState",component:d("/modern-kit/docs/react/hooks/useDebouncedState","93f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useDocumentTitle",component:d("/modern-kit/docs/react/hooks/useDocumentTitle","d74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useEventListener",component:d("/modern-kit/docs/react/hooks/useEventListener","e2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useFileReader",component:d("/modern-kit/docs/react/hooks/useFileReader","a18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useForceUpdate",component:d("/modern-kit/docs/react/hooks/useForceUpdate","b44"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useHover",component:d("/modern-kit/docs/react/hooks/useHover","3c2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useImageStatus",component:d("/modern-kit/docs/react/hooks/useImageStatus","934"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIntersectionObserver",component:d("/modern-kit/docs/react/hooks/useIntersectionObserver","9c5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useInterval",component:d("/modern-kit/docs/react/hooks/useInterval","05b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsMounted",component:d("/modern-kit/docs/react/hooks/useIsMounted","4b3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect",component:d("/modern-kit/docs/react/hooks/useIsomorphicLayoutEffect","6cd"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useKeyDown",component:d("/modern-kit/docs/react/hooks/useKeyDown","51b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useLocalStorage",component:d("/modern-kit/docs/react/hooks/useLocalStorage","057"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMediaQuery",component:d("/modern-kit/docs/react/hooks/useMediaQuery","9ec"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMergeRefs",component:d("/modern-kit/docs/react/hooks/useMergeRefs","059"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useMouse",component:d("/modern-kit/docs/react/hooks/useMouse","11d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useNetwork",component:d("/modern-kit/docs/react/hooks/useNetwork","08e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useOutsidePointerDown",component:d("/modern-kit/docs/react/hooks/useOutsidePointerDown","b57"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreferredColorScheme",component:d("/modern-kit/docs/react/hooks/usePreferredColorScheme","51a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedCallback",component:d("/modern-kit/docs/react/hooks/usePreservedCallback","d50"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePreservedState",component:d("/modern-kit/docs/react/hooks/usePreservedState","a46"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/usePrevious",component:d("/modern-kit/docs/react/hooks/usePrevious","eee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useResizeObserver",component:d("/modern-kit/docs/react/hooks/useResizeObserver","b26"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useScrollLock",component:d("/modern-kit/docs/react/hooks/useScrollLock","7f5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useScrollTo",component:d("/modern-kit/docs/react/hooks/useScrollTo","5c0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useSessionStorage",component:d("/modern-kit/docs/react/hooks/useSessionStorage","aab"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useStep",component:d("/modern-kit/docs/react/hooks/useStep","aba"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useStepState",component:d("/modern-kit/docs/react/hooks/useStepState","cf7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useThrottle",component:d("/modern-kit/docs/react/hooks/useThrottle","a74"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useTimeout",component:d("/modern-kit/docs/react/hooks/useTimeout","9e7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useToggle",component:d("/modern-kit/docs/react/hooks/useToggle","f90"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useUnmount",component:d("/modern-kit/docs/react/hooks/useUnmount","bb7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useUserAgent",component:d("/modern-kit/docs/react/hooks/useUserAgent","ae5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useVhProperty",component:d("/modern-kit/docs/react/hooks/useVhProperty","4fb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useVisibilityChange",component:d("/modern-kit/docs/react/hooks/useVisibilityChange","ca7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/react/hooks/useWindowSize",component:d("/modern-kit/docs/react/hooks/useWindowSize","fb2"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/chunk",component:d("/modern-kit/docs/utils/array/chunk","ba7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/compact",component:d("/modern-kit/docs/utils/array/compact","e03"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/contains",component:d("/modern-kit/docs/utils/array/contains","56f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/countOccurrencesInArray",component:d("/modern-kit/docs/utils/array/countOccurrencesInArray","823"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/difference",component:d("/modern-kit/docs/utils/array/difference","7b0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/drop",component:d("/modern-kit/docs/utils/array/drop","8f0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/excludeElements",component:d("/modern-kit/docs/utils/array/excludeElements","b9e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/fill",component:d("/modern-kit/docs/utils/array/fill","57f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatMap",component:d("/modern-kit/docs/utils/array/flatMap","67b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatMapDeep",component:d("/modern-kit/docs/utils/array/flatMapDeep","306"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flatten",component:d("/modern-kit/docs/utils/array/flatten","27c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flattenDeep",component:d("/modern-kit/docs/utils/array/flattenDeep","71c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/flattenDeepThenMap",component:d("/modern-kit/docs/utils/array/flattenDeepThenMap","da6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/forEachRight",component:d("/modern-kit/docs/utils/array/forEachRight","014"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/intersection",component:d("/modern-kit/docs/utils/array/intersection","176"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/intersectionWithDuplicates",component:d("/modern-kit/docs/utils/array/intersectionWithDuplicates","55b"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/mapRight",component:d("/modern-kit/docs/utils/array/mapRight","cb5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/partition",component:d("/modern-kit/docs/utils/array/partition","70e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/shuffle",component:d("/modern-kit/docs/utils/array/shuffle","505"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/swap",component:d("/modern-kit/docs/utils/array/swap","dc8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/take",component:d("/modern-kit/docs/utils/array/take","2fb"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/union",component:d("/modern-kit/docs/utils/array/union","d05"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/array/uniq",component:d("/modern-kit/docs/utils/array/uniq","bba"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyClipboardImage",component:d("/modern-kit/docs/utils/clipboard/copyClipboardImage","d02"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyClipboardText",component:d("/modern-kit/docs/utils/clipboard/copyClipboardText","465"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/copyFallbackClipboardText",component:d("/modern-kit/docs/utils/clipboard/copyFallbackClipboardText","b59"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/readClipboardContents",component:d("/modern-kit/docs/utils/clipboard/readClipboardContents","8bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/clipboard/readClipboardText",component:d("/modern-kit/docs/utils/clipboard/readClipboardText","ac9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/abRandom",component:d("/modern-kit/docs/utils/common/abRandom","3dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/asyncNoop",component:d("/modern-kit/docs/utils/common/asyncNoop","9e5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/deepCopy",component:d("/modern-kit/docs/utils/common/deepCopy","56d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/delay",component:d("/modern-kit/docs/utils/common/delay","b3f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqId",component:d("/modern-kit/docs/utils/common/getUniqId","a6f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getUniqTime",component:d("/modern-kit/docs/utils/common/getUniqTime","a82"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/getViewportSize",component:d("/modern-kit/docs/utils/common/getViewportSize","8b4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/hexToRgba",component:d("/modern-kit/docs/utils/common/hexToRgba","0e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/identity",component:d("/modern-kit/docs/utils/common/identity","c03"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/noop",component:d("/modern-kit/docs/utils/common/noop","4e6"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/once",component:d("/modern-kit/docs/utils/common/once","66a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/parseJSON",component:d("/modern-kit/docs/utils/common/parseJSON","db1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/pickFalsy",component:d("/modern-kit/docs/utils/common/pickFalsy","e8e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/size",component:d("/modern-kit/docs/utils/common/size","af1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/common/wrapInArray",component:d("/modern-kit/docs/utils/common/wrapInArray","345"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/getOS",component:d("/modern-kit/docs/utils/device/getOS","552"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isClient",component:d("/modern-kit/docs/utils/device/isClient","a60"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isMobile",component:d("/modern-kit/docs/utils/device/isMobile","8dc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/device/isSever",component:d("/modern-kit/docs/utils/device/isSever","b65"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/convertImageToBase64",component:d("/modern-kit/docs/utils/file/convertImageToBase64","623"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/convertImageToBlob",component:d("/modern-kit/docs/utils/file/convertImageToBlob","84c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getBlobFromUrl",component:d("/modern-kit/docs/utils/file/getBlobFromUrl","fc3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMEType",component:d("/modern-kit/docs/utils/file/getMIMEType","625"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromFile",component:d("/modern-kit/docs/utils/file/getMIMETypeFromFile","ae3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromResponse",component:d("/modern-kit/docs/utils/file/getMIMETypeFromResponse","b72"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/file/getMIMETypeFromUrl",component:d("/modern-kit/docs/utils/file/getMIMETypeFromUrl","a29"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatNumberByUnits",component:d("/modern-kit/docs/utils/formatter/formatNumberByUnits","7f3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatNumberCurrency",component:d("/modern-kit/docs/utils/formatter/formatNumberCurrency","738"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatNumberWithCommas",component:d("/modern-kit/docs/utils/formatter/formatNumberWithCommas","1ff"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/formatter/formatPhoneNumber",component:d("/modern-kit/docs/utils/formatter/formatPhoneNumber","260"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/average",component:d("/modern-kit/docs/utils/math/average","0b8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/max",component:d("/modern-kit/docs/utils/math/max","ff1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/min",component:d("/modern-kit/docs/utils/math/min","f53"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/range",component:d("/modern-kit/docs/utils/math/range","ca5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/math/sum",component:d("/modern-kit/docs/utils/math/sum","a1f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/deleteEmptyProperties",component:d("/modern-kit/docs/utils/object/deleteEmptyProperties","884"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/groupBy",component:d("/modern-kit/docs/utils/object/groupBy","7e8"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/invert",component:d("/modern-kit/docs/utils/object/invert","cbc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mapKeys",component:d("/modern-kit/docs/utils/object/mapKeys","960"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mapValues",component:d("/modern-kit/docs/utils/object/mapValues","919"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/mergeProperties",component:d("/modern-kit/docs/utils/object/mergeProperties","533"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectEntries",component:d("/modern-kit/docs/utils/object/objectEntries","87d"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectKeys",component:d("/modern-kit/docs/utils/object/objectKeys","34e"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/objectValues",component:d("/modern-kit/docs/utils/object/objectValues","e18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/omit",component:d("/modern-kit/docs/utils/object/omit","6fc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/object/pick",component:d("/modern-kit/docs/utils/object/pick","8b7"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/countSubstringOccurrences",component:d("/modern-kit/docs/utils/string/countSubstringOccurrences","c18"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/extractLetters",component:d("/modern-kit/docs/utils/string/extractLetters","c2f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/extractNumber",component:d("/modern-kit/docs/utils/string/extractNumber","df0"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/removeSpecialCharacters",component:d("/modern-kit/docs/utils/string/removeSpecialCharacters","e42"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/repeatCharacters",component:d("/modern-kit/docs/utils/string/repeatCharacters","f0a"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/reverseString",component:d("/modern-kit/docs/utils/string/reverseString","af9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/string/serialize",component:d("/modern-kit/docs/utils/string/serialize","089"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/style/rem",component:d("/modern-kit/docs/utils/style/rem","444"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/hasProperty",component:d("/modern-kit/docs/utils/validator/hasProperty","cd4"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isArray",component:d("/modern-kit/docs/utils/validator/isArray","41c"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isBoolean",component:d("/modern-kit/docs/utils/validator/isBoolean","280"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isEqual",component:d("/modern-kit/docs/utils/validator/isEqual","87f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isFloat",component:d("/modern-kit/docs/utils/validator/isFloat","0bc"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isFuntion",component:d("/modern-kit/docs/utils/validator/isFuntion","5bf"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isInRange",component:d("/modern-kit/docs/utils/validator/isInRange","eca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isMIMEType",component:d("/modern-kit/docs/utils/validator/isMIMEType","ac3"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNil",component:d("/modern-kit/docs/utils/validator/isNil","c53"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNotNil",component:d("/modern-kit/docs/utils/validator/isNotNil","b4f"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNumber",component:d("/modern-kit/docs/utils/validator/isNumber","291"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isNumericString",component:d("/modern-kit/docs/utils/validator/isNumericString","0d1"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPlainObject",component:d("/modern-kit/docs/utils/validator/isPlainObject","5ca"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPrimitive",component:d("/modern-kit/docs/utils/validator/isPrimitive","6fe"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isPromise",component:d("/modern-kit/docs/utils/validator/isPromise","9ee"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isReference",component:d("/modern-kit/docs/utils/validator/isReference","388"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isString",component:d("/modern-kit/docs/utils/validator/isString","060"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isSubset",component:d("/modern-kit/docs/utils/validator/isSubset","a49"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidEmail",component:d("/modern-kit/docs/utils/validator/isValidEmail","6ac"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidPassword",component:d("/modern-kit/docs/utils/validator/isValidPassword","1e9"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isValidPhoneNumberFormat",component:d("/modern-kit/docs/utils/validator/isValidPhoneNumberFormat","9a5"),exact:!0,sidebar:"tutorialSidebar"},{path:"/modern-kit/docs/utils/validator/isWindow",component:d("/modern-kit/docs/utils/validator/isWindow","834"),exact:!0,sidebar:"tutorialSidebar"}]}]}]},{path:"/modern-kit/",component:d("/modern-kit/","b6d"),exact:!0},{path:"*",component:d("*")}]},3931:(e,t,n)=>{"use strict";n.r(t)},9986:(e,t,n)=>{"use strict";n.r(t)},1444:(e,t,n)=>{"use strict";var r=n(7800),o=n(3061);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n