@machinerd/js-module 0.4.0 → 0.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 React용 공용 UI·훅·유틸·API 클라이언트 패키지입니다.
 
-**현재 버전:** `0.4` (`package.json`의 `version` 필드와 동일합니다. 배포 전에는 해당 값을 확인하세요.)
+**현재 버전:** `0.5` (`package.json`의 `version` 필드와 동일합니다. 배포 전에는 해당 값을 확인하세요.)
 
 **Peer dependency:** `react`, `react-dom` — `^18.3.1` 또는 `^19.0.0`
 
@@ -41,7 +41,37 @@ await client.login(/* ... */);
 client.cdnMedia('path/to/key');
 ```
 
-일부 UI·훅은 **`ApiClient` 인스턴스**를 인자로 받습니다. 앱 구조에 맞게 한 번 생성해 전달하면 됩니다.
+로그인·CDN URL 빌드 등에는 위처럼 직접 인스턴스를 만들어 쓸 수 있습니다.
+
+---
+
+## Providers
+
+Export 경로: `@machinerd/js-module/providers`
+
+**`Image`·`useSubsetImage` 등 CDN 경로를 다루는 UI·훅**은 내부에서 `useApiClient()`로 **`ApiClient` 인스턴스**에 접근합니다. 사용하는 쪽에서 매번 `ApiClient`를 만들어 props로 넘기지 않도록, **앱(또는 라우트 트리) 최상단**을 `ApiClientProvider`로 감싸고 `config`만 넘기면 됩니다.
+
+```tsx
+import { ApiClientProvider } from '@machinerd/js-module/providers';
+
+export function App({ children }: { children: React.ReactNode }) {
+  return (
+    <ApiClientProvider
+      config={{
+        apiEndpoint: 'https://api.example.com',
+        cdnEndpoint: 'https://cdn.example.com',
+      }}
+    >
+      {children}
+    </ApiClientProvider>
+  );
+}
+```
+
+- Next.js App Router라면 `app/layout.tsx` 등 **루트 레이아웃**에 두는 것을 권장합니다.
+- Provider 밖에서 `Image` / `useSubsetImage`를 쓰면 런타임에 `ApiClient not found` 오류가 납니다.
+
+`useApiClient`는 같은 패키지의 `./providers`에서 export 됩니다.
 
 ---
 
@@ -73,7 +103,7 @@ import { Carousel, CarouselItem, Image, Tooltip /* … */ } from '@machinerd/js-
 import '@machinerd/js-module/styles/index.css';
 ```
 
-`Image` 등은 `ApiClient` 인스턴스·CDN 상대 경로 등 앱 설정이 필요합니다. 자세한 props는 타입 정의와 Storybook 문서를 참고하세요.
+**`Image`를 쓰려면** 위 [Providers](#providers)의 **`ApiClientProvider`를 최상위에 두는 것**이 필요합니다. CDN·API 엔드포인트는 `config`로 한 번만 넘기면 되며, `Image`에 `ApiClient`를 props로 넘길 필요는 없습니다. props·Storybook 문서는 타입 정의와 Storybook을 참고하세요.
 
 > **참고:** export 경로는 `ui/client`가 아니라 **`ui-client`** 입니다 (`package.json`의 `exports`와 일치).
 
@@ -87,6 +117,8 @@ import { useOutsideClick, useWindowSize } from '@machinerd/js-module/hooks';
 
 `useOutsideClick`은 타입 `UseOutsideClickProps`도 함께 export 합니다.
 
+`useSubsetImage`는 **`ApiClientProvider` 안**에서만 사용할 수 있습니다 ([Providers](#providers)).
+
 ---
 
 ## 유틸 (`@machinerd/js-module/util`)
@@ -119,7 +151,7 @@ pnpm build
 pnpm pack
 ```
 
-현재 버전 기준으로 예: `machinerd-js-module-0.4.0.tgz` 형태의 파일이 상위 디렉터리(또는 현재 디렉터리)에 생성됩니다. 정확한 파일명은 명령 출력을 따르세요.
+현재 버전 기준으로 예: `machinerd-js-module-0.5.0.tgz` 형태의 파일이 상위 디렉터리(또는 현재 디렉터리)에 생성됩니다. 정확한 파일명은 명령 출력을 따르세요.
 
 소비하는 프로젝트에서:
 

package/dist/hooks/index.cjs

@@ -1 +1 @@
-require(`../util-BMnQ9hLK.cjs`);const e=require(`../hooks-B6OJ8mCP.cjs`);exports.SUBSETS=e.n,exports.useDelayUnmount=e.c,exports.useDragScroll=e.s,exports.useOutsideClick=e.o,exports.useScrollLock=e.a,exports.useScrollTop=e.i,exports.useSubsetImage=e.r,exports.useWindowSize=e.t;
+require(`../src-CjpmdVyv.cjs`),require(`../util-o7fjt7iK.cjs`);const e=require(`../hooks-DqgWx1Fa.cjs`);require(`../providers-BNK8Fisc.cjs`),exports.SUBSETS=e.n,exports.useDelayUnmount=e.c,exports.useDragScroll=e.s,exports.useOutsideClick=e.o,exports.useScrollLock=e.a,exports.useScrollTop=e.i,exports.useSubsetImage=e.r,exports.useWindowSize=e.t;

package/dist/hooks/index.d.cts

@@ -1,3 +1,2 @@
-import { a as UseSubsetImageProps, c as UseScrollTopProps, d as useScrollLock, f as UseOutsideClickProps, h as useDelayUnmount, i as SUBSETS, l as useScrollTop, m as useDragScroll, n as BaseProps, o as UseSubsetImagePropsWithoutApiClient, p as useOutsideClick, r as Folder, s as useSubsetImage, t as useWindowSize, u as UseScrollLockProps } from "../index-CWgr7lXX.cjs";
-import "../index-OjfbEYpE.cjs";
-export { BaseProps, Folder, SUBSETS, UseOutsideClickProps, UseScrollLockProps, UseScrollTopProps, UseSubsetImageProps, UseSubsetImagePropsWithoutApiClient, useDelayUnmount, useDragScroll, useOutsideClick, useScrollLock, useScrollTop, useSubsetImage, useWindowSize };
+import { a as UseSubsetImageProps, c as useScrollTop, d as UseOutsideClickProps, f as useOutsideClick, i as SUBSETS, l as UseScrollLockProps, m as useDelayUnmount, n as BaseProps, o as useSubsetImage, p as useDragScroll, r as Folder, s as UseScrollTopProps, t as useWindowSize, u as useScrollLock } from "../index-ComhjQ-q.cjs";
+export { BaseProps, Folder, SUBSETS, UseOutsideClickProps, UseScrollLockProps, UseScrollTopProps, UseSubsetImageProps, useDelayUnmount, useDragScroll, useOutsideClick, useScrollLock, useScrollTop, useSubsetImage, useWindowSize };

package/dist/hooks/index.d.mts

@@ -1,3 +1,2 @@
-import { a as UseSubsetImageProps, c as UseScrollTopProps, d as useScrollLock, f as UseOutsideClickProps, h as useDelayUnmount, i as SUBSETS, l as useScrollTop, m as useDragScroll, n as BaseProps, o as UseSubsetImagePropsWithoutApiClient, p as useOutsideClick, r as Folder, s as useSubsetImage, t as useWindowSize, u as UseScrollLockProps } from "../index-CfKO4Lbp.mjs";
-import "../index-DiZ4xS_f.mjs";
-export { BaseProps, Folder, SUBSETS, UseOutsideClickProps, UseScrollLockProps, UseScrollTopProps, UseSubsetImageProps, UseSubsetImagePropsWithoutApiClient, useDelayUnmount, useDragScroll, useOutsideClick, useScrollLock, useScrollTop, useSubsetImage, useWindowSize };
+import { a as UseSubsetImageProps, c as useScrollTop, d as UseOutsideClickProps, f as useOutsideClick, i as SUBSETS, l as UseScrollLockProps, m as useDelayUnmount, n as BaseProps, o as useSubsetImage, p as useDragScroll, r as Folder, s as UseScrollTopProps, t as useWindowSize, u as useScrollLock } from "../index-ByfkW7VU.mjs";
+export { BaseProps, Folder, SUBSETS, UseOutsideClickProps, UseScrollLockProps, UseScrollTopProps, UseSubsetImageProps, useDelayUnmount, useDragScroll, useOutsideClick, useScrollLock, useScrollTop, useSubsetImage, useWindowSize };

package/dist/hooks/index.mjs

@@ -1 +1 @@
-import"../util-BNSPNLzy.mjs";import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"../hooks-Dr3L4nS9.mjs";export{r as SUBSETS,t as useDelayUnmount,o as useDragScroll,i as useOutsideClick,e as useScrollLock,n as useScrollTop,a as useSubsetImage,s as useWindowSize};
+import"../src-C_FmOyer.mjs";import"../util-zXJA6Gnc.mjs";import{a as e,c as t,i as n,n as r,o as i,r as a,s as o,t as s}from"../hooks-DBo6LQrH.mjs";import"../providers-5JCPezAS.mjs";export{r as SUBSETS,t as useDelayUnmount,o as useDragScroll,i as useOutsideClick,e as useScrollLock,n as useScrollTop,a as useSubsetImage,s as useWindowSize};

package/dist/hooks-DBo6LQrH.mjs

@@ -0,0 +1 @@
+import{g as e,h as t,m as n}from"./util-zXJA6Gnc.mjs";import{n as r}from"./providers-5JCPezAS.mjs";import{throttle as i}from"lodash-es";import{useCallback as a,useEffect as o,useMemo as s,useRef as c,useState as l}from"react";function u(e,t){let[n,r]=l(!1);return o(()=>{let i;return e&&!n?r(!0):!e&&n&&(i=setTimeout(()=>r(!1),t)),()=>clearTimeout(i)},[e,t,n]),n}function d(e=1){let t=c(null),[n,r]=l(!1),[i,a]=l(0),[o,s]=l(0),u=c(!1);return{ref:t,onMouseDown:e=>{t.current&&(r(!0),u.current=!1,a(e.pageX-t.current.offsetLeft),s(t.current.scrollLeft))},onMouseLeave:()=>r(!1),onMouseUp:()=>r(!1),onMouseMove:r=>{if(!n||!t.current)return;r.preventDefault();let a=(r.pageX-t.current.offsetLeft-i)*e;Math.abs(a)>10&&(u.current=!0),t.current.scrollLeft=o-a},onClickCapture:e=>{u.current&&(e.stopPropagation(),e.preventDefault())}}}function f({ref:e,setOpen:t}){let n=a(n=>{e.current?.contains(n.target)||t(!1)},[e,t]);o(()=>(document.addEventListener(`mousedown`,n),document.addEventListener(`touchstart`,n),()=>{document.removeEventListener(`mousedown`,n),document.removeEventListener(`touchstart`,n)}),[n])}const p=[`mouse`,`touch`];function m({open:e,type:t=p}){let n=a(e=>{e.preventDefault()},[]),r=a(e=>{e.preventDefault()},[]);o(()=>{let i=e&&t.includes(`mouse`),a=e&&t.includes(`touch`);return i?(document.body.classList.add(`overflow-hidden`),document.addEventListener(`wheel`,r,{passive:!1})):(document.body.classList.remove(`overflow-hidden`),document.removeEventListener(`wheel`,r)),a?document.addEventListener(`touchmove`,n,{passive:!1}):document.removeEventListener(`touchmove`,n),()=>{document.body.classList.remove(`overflow-hidden`),document.removeEventListener(`touchmove`,n),document.removeEventListener(`wheel`,r)}},[e,t,n,r])}function h({enabled:e=!0,behavior:t=`smooth`}={}){let[n,r]=l(!1),i=c(null),s=a(()=>{window.scrollTo({top:0,behavior:t})},[t]);return o(()=>{let t=i.current;if(!t||!e){r(!1);return}let n=new IntersectionObserver(e=>{let t=e[0];t&&r(!t.isIntersecting)},{root:null,rootMargin:`0px`,threshold:0});return n.observe(t),()=>n.disconnect()},[e]),{isVisible:n,handleScrolToTop:s,ref:i}}const g=[12,120,240,300,406,512,612,768,960,1024,1280,1440,1560,1920,2560,3840];function _({ref:i,src:u,forceLoad:d=!1,folder:f=`media`,fallbackSrc:p,origin:m,originalWidth:h,loading:_=`lazy`,...v}){let y=r(),[b,x]=l(0),[S,C]=l(d||!u),[w,T]=l(!u),E=c(null),D=c(null),O=a(e=>{E.current=e,typeof i==`function`?i(e):i&&(i.current=e)},[i]),k=a((e,t)=>{let n=e.startsWith(`/`)?e.slice(1):e;return t===`static`?y.cdnStatic(n):y.cdnMedia(n)},[y]),A=s(()=>g.filter(e=>e<=h),[h]),j=s(()=>n(u)?u:k(u,f),[k,u,f]),M=s(()=>{if(m||!t(u)||A.length===0)return;let{filenameWithoutExtension:n,directory:r}=e(u,f);if(v.width){let e=A.find(e=>e>=v.width)??A[A.length-1],t=e*2,i=A.find(e=>e>=t)??A[A.length-1];return`${k(`${r}/subsets/w${e}/${n}.webp`,f)} 1x,${k(`${r}/subsets/w${i}/${n}.webp`,f)} 2x`}let i=``;for(let e of A)i+=`${k(`${r}/subsets/w${e}/${n}.webp`,f)} ${e}w, `;return i.trim()},[A,k,f,m,u,v.width]),N=a((t,n)=>{let{filenameWithoutExtension:r,directory:i}=e(t,n);return`${k(`${i}/subsets/origin/${r}.webp`,n)}`},[k]),P=s(()=>{if(u)return`${N(u,f)} 1x`},[u,f,N]),F=a(e=>{x(t=>t>=2?(e&&(D.current=e),3):t+1)},[]),I=(()=>{if(b===0)return M;if(b===1)return P}),L=b>=3?p:j,R=b===0?v.sizes:void 0,z=b>0?`eager`:_;o(()=>{b<3||T(!0)},[b]),o(()=>{let e=E.current;if(!e||w)return;if(e.complete&&e.naturalWidth===0&&e.getAttribute(`src`)){F();return}if(e.complete&&e.naturalWidth>0){C(!0);return}let t=()=>{e.naturalWidth>0&&C(!0)};return e.addEventListener(`load`,t),()=>e.removeEventListener(`load`,t)},[w,b,F]);let{fill:B,...V}=v;return{ref:O,isLoad:S,isError:w,imageProps:{...V,src:L,srcSet:I(),sizes:R,loading:z,onError:w?void 0:F}}}function v(e=1280){let[t,n]=l(e);return o(()=>{let e=i(()=>{let e=window.innerWidth;n(e)},200);return window.addEventListener(`resize`,e),e(),()=>window.removeEventListener(`resize`,e)},[]),{windowSize:t}}export{m as a,u as c,h as i,g as n,f as o,_ as r,d as s,v as t};

package/dist/hooks-DqgWx1Fa.cjs

@@ -0,0 +1 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./util-o7fjt7iK.cjs`),n=require(`./providers-BNK8Fisc.cjs`);let r=require(`lodash-es`),i=require(`react`);function a(e,t){let[n,r]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let i;return e&&!n?r(!0):!e&&n&&(i=setTimeout(()=>r(!1),t)),()=>clearTimeout(i)},[e,t,n]),n}function o(e=1){let t=(0,i.useRef)(null),[n,r]=(0,i.useState)(!1),[a,o]=(0,i.useState)(0),[s,c]=(0,i.useState)(0),l=(0,i.useRef)(!1);return{ref:t,onMouseDown:e=>{t.current&&(r(!0),l.current=!1,o(e.pageX-t.current.offsetLeft),c(t.current.scrollLeft))},onMouseLeave:()=>r(!1),onMouseUp:()=>r(!1),onMouseMove:r=>{if(!n||!t.current)return;r.preventDefault();let i=(r.pageX-t.current.offsetLeft-a)*e;Math.abs(i)>10&&(l.current=!0),t.current.scrollLeft=s-i},onClickCapture:e=>{l.current&&(e.stopPropagation(),e.preventDefault())}}}function s({ref:e,setOpen:t}){let n=(0,i.useCallback)(n=>{e.current?.contains(n.target)||t(!1)},[e,t]);(0,i.useEffect)(()=>(document.addEventListener(`mousedown`,n),document.addEventListener(`touchstart`,n),()=>{document.removeEventListener(`mousedown`,n),document.removeEventListener(`touchstart`,n)}),[n])}const c=[`mouse`,`touch`];function l({open:e,type:t=c}){let n=(0,i.useCallback)(e=>{e.preventDefault()},[]),r=(0,i.useCallback)(e=>{e.preventDefault()},[]);(0,i.useEffect)(()=>{let i=e&&t.includes(`mouse`),a=e&&t.includes(`touch`);return i?(document.body.classList.add(`overflow-hidden`),document.addEventListener(`wheel`,r,{passive:!1})):(document.body.classList.remove(`overflow-hidden`),document.removeEventListener(`wheel`,r)),a?document.addEventListener(`touchmove`,n,{passive:!1}):document.removeEventListener(`touchmove`,n),()=>{document.body.classList.remove(`overflow-hidden`),document.removeEventListener(`touchmove`,n),document.removeEventListener(`wheel`,r)}},[e,t,n,r])}function u({enabled:e=!0,behavior:t=`smooth`}={}){let[n,r]=(0,i.useState)(!1),a=(0,i.useRef)(null),o=(0,i.useCallback)(()=>{window.scrollTo({top:0,behavior:t})},[t]);return(0,i.useEffect)(()=>{let t=a.current;if(!t||!e){r(!1);return}let n=new IntersectionObserver(e=>{let t=e[0];t&&r(!t.isIntersecting)},{root:null,rootMargin:`0px`,threshold:0});return n.observe(t),()=>n.disconnect()},[e]),{isVisible:n,handleScrolToTop:o,ref:a}}const d=[12,120,240,300,406,512,612,768,960,1024,1280,1440,1560,1920,2560,3840];function f({ref:e,src:r,forceLoad:a=!1,folder:o=`media`,fallbackSrc:s,origin:c,originalWidth:l,loading:u=`lazy`,...f}){let p=n.n(),[m,h]=(0,i.useState)(0),[g,_]=(0,i.useState)(a||!r),[v,y]=(0,i.useState)(!r),b=(0,i.useRef)(null),x=(0,i.useRef)(null),S=(0,i.useCallback)(t=>{b.current=t,typeof e==`function`?e(t):e&&(e.current=t)},[e]),C=(0,i.useCallback)((e,t)=>{let n=e.startsWith(`/`)?e.slice(1):e;return t===`static`?p.cdnStatic(n):p.cdnMedia(n)},[p]),w=(0,i.useMemo)(()=>d.filter(e=>e<=l),[l]),T=(0,i.useMemo)(()=>t.m(r)?r:C(r,o),[C,r,o]),E=(0,i.useMemo)(()=>{if(c||!t.h(r)||w.length===0)return;let{filenameWithoutExtension:e,directory:n}=t.g(r,o);if(f.width){let t=w.find(e=>e>=f.width)??w[w.length-1],r=t*2,i=w.find(e=>e>=r)??w[w.length-1];return`${C(`${n}/subsets/w${t}/${e}.webp`,o)} 1x,${C(`${n}/subsets/w${i}/${e}.webp`,o)} 2x`}let i=``;for(let t of w)i+=`${C(`${n}/subsets/w${t}/${e}.webp`,o)} ${t}w, `;return i.trim()},[w,C,o,c,r,f.width]),D=(0,i.useCallback)((e,n)=>{let{filenameWithoutExtension:r,directory:i}=t.g(e,n);return`${C(`${i}/subsets/origin/${r}.webp`,n)}`},[C]),O=(0,i.useMemo)(()=>{if(r)return`${D(r,o)} 1x`},[r,o,D]),k=(0,i.useCallback)(e=>{h(t=>t>=2?(e&&(x.current=e),3):t+1)},[]),A=(()=>{if(m===0)return E;if(m===1)return O}),j=m>=3?s:T,M=m===0?f.sizes:void 0,N=m>0?`eager`:u;(0,i.useEffect)(()=>{m<3||y(!0)},[m]),(0,i.useEffect)(()=>{let e=b.current;if(!e||v)return;if(e.complete&&e.naturalWidth===0&&e.getAttribute(`src`)){k();return}if(e.complete&&e.naturalWidth>0){_(!0);return}let t=()=>{e.naturalWidth>0&&_(!0)};return e.addEventListener(`load`,t),()=>e.removeEventListener(`load`,t)},[v,m,k]);let{fill:P,...F}=f;return{ref:S,isLoad:g,isError:v,imageProps:{...F,src:j,srcSet:A(),sizes:M,loading:N,onError:v?void 0:k}}}function p(e=1280){let[t,n]=(0,i.useState)(e);return(0,i.useEffect)(()=>{let e=(0,r.throttle)(()=>{let e=window.innerWidth;n(e)},200);return window.addEventListener(`resize`,e),e(),()=>window.removeEventListener(`resize`,e)},[]),{windowSize:t}}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});

package/dist/{index-CWgr7lXX.d.cts → index-ByfkW7VU.d.mts}

@@ -1,4 +1,3 @@
-import { t as ApiClient } from "./index-OjfbEYpE.cjs";
 import * as react0 from "react";
 import React$1, { Dispatch, RefObject, SetStateAction } from "react";
 
@@ -61,9 +60,8 @@ interface BaseProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
   originalWidth: number;
   fallbackSrc?: string;
   folder?: Folder;
-  apiClient: ApiClient;
 }
-type UseSubsetImagePropsWithoutApiClient = Omit<BaseProps, 'apiClient'> & ({
+type UseSubsetImageProps = BaseProps & ({
   fill: true;
   sizes: string;
   width?: never;
@@ -74,9 +72,6 @@ type UseSubsetImagePropsWithoutApiClient = Omit<BaseProps, 'apiClient'> & ({
   width: number;
   height: number;
 });
-type UseSubsetImageProps = UseSubsetImagePropsWithoutApiClient & {
-  apiClient: ApiClient;
-};
 declare function useSubsetImage({
   ref,
   src,
@@ -86,7 +81,6 @@ declare function useSubsetImage({
   origin,
   originalWidth,
   loading,
-  apiClient,
   ...rest
 }: UseSubsetImageProps): {
   ref: (node: HTMLImageElement | null) => void;
@@ -98,122 +92,122 @@ declare function useSubsetImage({
     sizes: string | undefined;
     loading: "eager" | "lazy";
     onError: ((event?: React$1.SyntheticEvent<HTMLImageElement, Event>) => void) | undefined;
-    alt?: string | undefined | undefined;
+    alt?: string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    decoding?: "async" | "auto" | "sync" | undefined | undefined;
-    fetchPriority?: "high" | "low" | "auto" | undefined;
-    height?: never;
+    decoding?: "async" | "auto" | "sync" | undefined;
+    fetchPriority?: "high" | "low" | "auto";
+    height?: undefined;
     referrerPolicy?: React$1.HTMLAttributeReferrerPolicy | undefined;
-    useMap?: string | undefined | undefined;
-    width?: never;
-    defaultChecked?: boolean | undefined | undefined;
+    useMap?: string | undefined;
+    width?: undefined;
+    defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     style?: React$1.CSSProperties | undefined;
-    tabIndex?: number | undefined | undefined;
-    title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
     role?: React$1.AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
+    "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    children?: React$1.ReactNode;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: React$1.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
       __html: string | TrustedHTML;
-    } | undefined | undefined;
+    } | undefined;
     onCopy?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
     onCopyCapture?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
     onCut?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
@@ -377,122 +371,122 @@ declare function useSubsetImage({
     sizes: string | undefined;
     loading: "eager" | "lazy";
     onError: ((event?: React$1.SyntheticEvent<HTMLImageElement, Event>) => void) | undefined;
-    alt?: string | undefined | undefined;
+    alt?: string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    decoding?: "async" | "auto" | "sync" | undefined | undefined;
-    fetchPriority?: "high" | "low" | "auto" | undefined;
+    decoding?: "async" | "auto" | "sync" | undefined;
+    fetchPriority?: "high" | "low" | "auto";
     height: number;
     referrerPolicy?: React$1.HTMLAttributeReferrerPolicy | undefined;
-    useMap?: string | undefined | undefined;
+    useMap?: string | undefined;
     width: number;
-    defaultChecked?: boolean | undefined | undefined;
+    defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     style?: React$1.CSSProperties | undefined;
-    tabIndex?: number | undefined | undefined;
-    title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
     role?: React$1.AriaRole | undefined;
-    about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    color?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
+    "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    children?: React$1.ReactNode;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: React$1.ReactNode | undefined;
     dangerouslySetInnerHTML?: {
       __html: string | TrustedHTML;
-    } | undefined | undefined;
+    } | undefined;
     onCopy?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
     onCopyCapture?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
     onCut?: React$1.ClipboardEventHandler<HTMLImageElement> | undefined;
@@ -658,4 +652,4 @@ declare function useWindowSize(defaultWidth?: number): {
   windowSize: number;
 };
 //#endregion
-export { UseSubsetImageProps as a, UseScrollTopProps as c, useScrollLock as d, UseOutsideClickProps as f, useDelayUnmount as h, SUBSETS as i, useScrollTop as l, useDragScroll as m, BaseProps as n, UseSubsetImagePropsWithoutApiClient as o, useOutsideClick as p, Folder as r, useSubsetImage as s, useWindowSize as t, UseScrollLockProps as u };
+export { UseSubsetImageProps as a, useScrollTop as c, UseOutsideClickProps as d, useOutsideClick as f, SUBSETS as i, UseScrollLockProps as l, useDelayUnmount as m, BaseProps as n, useSubsetImage as o, useDragScroll as p, Folder as r, UseScrollTopProps as s, useWindowSize as t, useScrollLock as u };