@epam/ai-dial-react-pdf-highlighter 0.2.0-dev.24 → 0.2.0-dev.27

package/dist/ai-dial-react-pdf-highlighter.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@epam/ai-dial-ui-kit"),F=require("@epam/pdf-highlighter-kit"),t=require("react"),z=require("@tabler/icons-react"),R="auto",L="page-fit",V=[{value:R,label:"Auto"},{value:L,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],X={maxWidth:104,format:"image/jpeg",quality:.85},$=15,le="application/pdf",oe=".pdf",Y=({pdf:s,highlights:r,selectedHighlightId:u,autoFocusFirstHighlight:l=!1,selectedPageNumber:m,zoom:i,containerClassName:h,onTotalPagesChange:v,onViewerReady:N,selectedPages:d,viewerOptions:w})=>{const f=t.useRef(null),n=t.useRef(null),[b,E]=t.useState(!1),[y,D]=t.useState(!1),T=t.useRef(v),O=t.useRef(N),I=t.useRef(w);t.useEffect(()=>{T.current=v},[v]),t.useEffect(()=>{O.current=N},[N]),t.useEffect(()=>{I.current=w},[w]);const j=t.useCallback(a=>n.current?.goToHighlight(a),[]);return t.useEffect(()=>{if(!f.current)return;E(!1),D(!1),n.current&&(n.current.destroy(),n.current=null);let a=null,x=!0;const p=()=>{x&&D(!0)};return(async()=>{try{if(a=new F.PDFHighlightViewer,await a.init(f.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left",...I.current}),!x){a.destroy();return}if(a.addEventListener("zoomChanged",p),await a.loadPDF(s,{selectedPages:d}),!x){a.destroy();return}const C=a.getTotalPages?.();typeof C=="number"&&C>0&&T.current?.(C),x&&(n.current=a,E(!0))}catch(C){if(!x)return;console.error("Error in initViewer:",C)}})(),()=>{x=!1,a&&(a.removeEventListener("zoomChanged",p),a.destroy())}},[s,d]),t.useEffect(()=>{!b||!n.current||(n.current.loadHighlights(r),l&&r&&r[0]&&j(r[0].id))},[l,j,r,b]),t.useEffect(()=>{b&&y&&u&&j(u)},[j,b,y,u]),t.useEffect(()=>{if(!(!b||!i))if(i===R)n.current?.setZoom?.(F.ZoomMode.AUTO);else if(i===L)n.current?.setZoom?.(F.ZoomMode.PAGE_FIT);else{const a=parseFloat(i);!Number.isNaN(a)&&a>0&&n.current?.setZoom?.(a)}},[b,i]),t.useEffect(()=>{b&&m&&n.current?.setPage?.(m)},[b,m]),t.useEffect(()=>{if(!b||!n.current)return;const a=n.current;O.current?.({getThumbnailsDataUrl:(x,p)=>a.getThumbnailsDataUrl(x,p),zoomIn:()=>a.zoomIn(),zoomOut:()=>a.zoomOut(),getZoom:()=>a.getZoom(),navigateToPage:x=>a.setPage?.(x),setPageDisplayRotation:(x,p,S)=>a.setPageDisplayRotation(x,p,S),getPageDisplayRotation:x=>a.getPageDisplayRotation(x)})},[b]),e.jsx("div",{ref:f,className:c.mergeClasses("grow min-w-0 overflow-auto bg-layer-3",h)})},P="h-4 rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave",J=({className:s,ariaLabel:r="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":r,"aria-live":"polite",className:c.mergeClasses("h-full w-full bg-layer-3",s),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:c.mergeClasses(P,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:c.mergeClasses(P,"w-[58%] max-w-[520px]")})]})]})}),Q=t.createContext(null),ee=()=>t.useContext(Q),_=V.filter(({value:s})=>{const r=Number.parseFloat(s);return!Number.isNaN(r)&&r>0}),ie=[..._].reverse(),te=(s,r,u)=>{if(_.length===0)return s;const l=Number.parseFloat(s),m=!Number.isNaN(l)&&l>0?l:u,i=typeof m=="number"&&m>0?m:Number.parseFloat(_[0].value);return r===1?(_.find(({value:h})=>Number.parseFloat(h)>i)??_[_.length-1]).value:(ie.find(({value:h})=>Number.parseFloat(h)<i)??_[0]).value};function q(s,r){const u=(s??"").toLowerCase();return(r??"").toLowerCase()===le||u.endsWith(oe)}const W=V.map(s=>({value:s.value,label:s.label})),se=({fileUrl:s,fileName:r,loadFileCb:u,highlights:l,selectedPageNumber:m,onTotalPagesChange:i,thumbnailPageNumbers:h,onThumbnailsLoaded:v,onViewerReady:N,showLoaderOverlay:d=!1,selectedPages:w})=>{const f=ee(),n=t.useRef(null),[b,E]=t.useState(!1),[y,D]=t.useState(0),[T,O]=t.useState(!1),[I,j]=t.useState(null),[a,x]=t.useState(null),[p,S]=t.useState(R),C=t.useMemo(()=>{if(r)return q(r.toLowerCase());let o;try{o=new URL(s).pathname}catch{o=s.split("?")[0].split("#")[0]}const g=o.split("/").pop()??"";return!g.includes(".")||q(g.toLowerCase())},[r,s]),B=t.useCallback(o=>{D((y+o+l.length)%l.length)},[y,l.length]),U=t.useCallback(o=>{const g=n.current;!g?.getZoom||!o||S(te(p,o,g.getZoom()))},[p]),k=t.useMemo(()=>{if(!(p===R||p===L||V.some(g=>g.value===p))){const g=parseFloat(p);if(!Number.isNaN(g)&&g>0)return[...W,{value:p,label:`${Math.round(g*100)}%`}]}return W},[p]);t.useEffect(()=>{let o=!1;if(j(!0),O(!1),x(null),E(!1),n.current=null,!C){O(!0),j(!1);return}return(async()=>{try{const Z=await(f?f.getFile(s,()=>u(s)):u(s));o||x(Z)}catch{o||(O(!0),x(null))}finally{o||j(!1)}})(),()=>{o=!0}},[s,f,u,C]);const M=t.useCallback(o=>{n.current=o,E(!0),N?.(o)},[N]);return t.useEffect(()=>{const o=h??[],g=n.current?.getThumbnailsDataUrl;if(!o.length||!g||!a||!v||!b)return;let Z=!1;return(async()=>{const K=new Map;for(let A=0;A<o.length&&!Z;A+=$){const ae=o.slice(A,A+$);try{const H=await g(ae,X);if(Z)break;H.forEach((re,ne)=>K.set(ne,re)),v(new Map(K))}catch(H){console.warn("Thumbnail batch load failed:",H);break}}})(),()=>{Z=!0}},[h,a,v,b]),{file:a,isLoading:I,isError:T,isSupportedFile:C,activeHighlightIndex:y,zoom:p,setZoom:S,zoomSelectOptions:k,viewerApiRef:n,showLoader:!T&&(!!I||d),changeIndex:B,handleZoomChange:U,handleViewerReady:M}},ce=({fileUrl:s,fileName:r,errorLabel:u,occurrencesLabel:l,unsupportedLabel:m,highlights:i,loadFileCb:h,showOccurrences:v=!0,selectedPageNumber:N,containerClassName:d,pdfViewerClassName:w,onTotalPagesChange:f,title:n,thumbnailPageNumbers:b,onThumbnailsLoaded:E,onViewerReady:y,showLoaderOverlay:D=!1,selectedPages:T,selectedHighlightId:O,viewerOptions:I})=>{const{file:j,isError:a,isSupportedFile:x,activeHighlightIndex:p,zoom:S,setZoom:C,zoomSelectOptions:B,showLoader:U,changeIndex:k,handleZoomChange:M,handleViewerReady:G}=se({fileUrl:s,fileName:r,loadFileCb:h,highlights:i,selectedPageNumber:N,onTotalPagesChange:f,thumbnailPageNumbers:b,onThumbnailsLoaded:E,onViewerReady:y,showLoaderOverlay:D,selectedPages:T});return e.jsxs("div",{className:c.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-2",d),children:[r&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(c.DialEllipsisTooltip,{className:"dial-tiny-text text-secondary",text:r})}),e.jsxs("div",{className:c.mergeClasses("flex w-full justify-between items-center",v&&n?"gap-2":""),children:[e.jsx("div",{children:v?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[l??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:i.length>0?`${p+1}/${i.length}`:"0"})]}),i.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(c.DialButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,iconAfter:e.jsx(z.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>k(1)}),e.jsx(c.DialButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,iconAfter:e.jsx(z.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>k(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:c.mergeClasses("flex flex-1 items-center gap-4 min-w-0",n!=null&&n!==""?"justify-between":"justify-end"),children:[n!=null&&n!==""&&e.jsx(c.DialEllipsisTooltip,{text:n,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(c.DialSelect,{size:c.SelectSize.Sm,className:"bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",options:B,value:S,onChange:o=>C(o)})}),e.jsx(c.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconMinus,{size:16}),"aria-label":"Zoom out",size:c.ElementSize.Small,onClick:()=>M(-1)}),e.jsx(c.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconPlus,{size:16}),"aria-label":"Zoom in",size:c.ElementSize.Small,onClick:()=>M(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[j&&e.jsx(Y,{pdf:j,highlights:i,selectedHighlightId:v?i[p]?.id:O,selectedPageNumber:N,zoom:S,onTotalPagesChange:f,onViewerReady:G,containerClassName:w,selectedPages:T,viewerOptions:I}),U&&e.jsx(J,{className:"absolute inset-0 z-10"}),a&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-3",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(z.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!x&&m?m:u??"Failed to load document."})]})})]})]})},ue=1200*1e3,me=20,de=({children:s,ttlMs:r=ue,maxEntries:u=me})=>{const l=t.useRef(new Map),m=t.useCallback((d,w)=>{l.current.delete(d),l.current.set(d,w)},[]),i=t.useCallback(()=>{const d=Date.now();for(const[w,f]of l.current.entries())f.file&&d-f.timestamp>r&&l.current.delete(w)},[r]),h=t.useCallback(()=>{for(;l.current.size>u;){const d=l.current.keys().next().value;d&&l.current.delete(d)}},[u]),v=t.useCallback(()=>{l.current.clear()},[]),N=t.useCallback(async(d,w)=>{i();const f=l.current.get(d);if(f){if(m(d,{...f,timestamp:Date.now()}),f.file)return f.file;if(f.promise)return f.promise}const n=Date.now(),b=w().then(y=>{const D={file:y,timestamp:Date.now()};return m(d,D),h(),y}).catch(y=>{throw l.current.delete(d),y});return m(d,{promise:b,timestamp:n}),h(),b},[h,i,m]);return t.useEffect(()=>()=>v(),[v]),e.jsx(Q.Provider,{value:{getFile:N,clearCache:v},children:s})},fe=({pageNum:s,onSelectPage:r,isSelected:u,isLoading:l,isMultiselect:m,thumbnailUrl:i,className:h})=>e.jsxs("button",{type:"button","aria-label":`Page ${s}`,"aria-pressed":u,onClick:v=>{m&&v.target.closest("[data-checkbox-wrapper]")||r(s)},className:c.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",u&&(m?"border border-accent-primary bg-accent-primary-alpha":"border border-primary"),h),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden",children:[i?e.jsx("img",{src:i,alt:`Page ${s} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,m&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(c.DialCheckbox,{id:`page-thumbnail-${s}`,checked:u,onChange:()=>r(s),className:"before:border-primary before:bg-model-icon bg-model-icon"})}),l&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-blackout rounded-sm",children:e.jsx(c.DialLoader,{size:24,fullWidth:!1,ariaLabel:`Loading page ${s}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:s})]});Object.defineProperty(exports,"RotationDirection",{enumerable:!0,get:()=>F.RotationDirection});exports.AUTO_ZOOM_ID=R;exports.DocumentPreview=ce;exports.DocumentPreviewCacheProvider=de;exports.FIT_ZOOM_ID=L;exports.PDFViewer=Y;exports.PageThumbnail=fe;exports.PdfPreviewLoader=J;exports.THUMBNAIL_BATCH_SIZE=$;exports.THUMBNAIL_IMAGE_OPTIONS=X;exports.ZOOM_OPTIONS=V;exports.getStepZoomOptionValue=te;exports.isPdfFile=q;exports.useDocumentPreview=se;exports.useDocumentPreviewCache=ee;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@epam/ai-dial-ui-kit"),F=require("@epam/pdf-highlighter-kit"),t=require("react"),z=require("@tabler/icons-react"),R="auto",L="page-fit",V=[{value:R,label:"Auto"},{value:L,label:"Page Fit"},{value:"0.5",label:"50%"},{value:"0.75",label:"75%"},{value:"1",label:"100%"},{value:"1.25",label:"125%"},{value:"1.5",label:"150%"},{value:"2",label:"200%"},{value:"3",label:"300%"}],X={maxWidth:104,format:"image/jpeg",quality:.85},$=15,le="application/pdf",oe=".pdf",Y=({pdf:s,highlights:r,selectedHighlightId:u,autoFocusFirstHighlight:l=!1,selectedPageNumber:m,zoom:i,containerClassName:h,onTotalPagesChange:b,onViewerReady:N,selectedPages:d,viewerOptions:w})=>{const f=t.useRef(null),n=t.useRef(null),[v,E]=t.useState(!1),[y,S]=t.useState(!1),T=t.useRef(b),D=t.useRef(N),I=t.useRef(w);t.useEffect(()=>{T.current=b},[b]),t.useEffect(()=>{D.current=N},[N]),t.useEffect(()=>{I.current=w},[w]);const j=t.useCallback(a=>n.current?.goToHighlight(a),[]);return t.useEffect(()=>{if(!f.current)return;E(!1),S(!1),n.current&&(n.current.destroy(),n.current=null);let a=null,x=!0;const p=()=>{x&&S(!0)};return(async()=>{try{if(a=new F.PDFHighlightViewer,await a.init(f.current,{enableTextSelection:!0,enableVirtualScrolling:!0,bboxOrigin:"top-left",...I.current}),!x){a.destroy();return}if(a.addEventListener("zoomChanged",p),await a.loadPDF(s,{selectedPages:d}),!x){a.destroy();return}const C=a.getTotalPages?.();typeof C=="number"&&C>0&&T.current?.(C),x&&(n.current=a,E(!0))}catch(C){if(!x)return;console.error("Error in initViewer:",C)}})(),()=>{x=!1,a&&(a.removeEventListener("zoomChanged",p),a.destroy())}},[s,d]),t.useEffect(()=>{!v||!n.current||(n.current.loadHighlights(r),l&&r&&r[0]&&j(r[0].id))},[l,j,r,v]),t.useEffect(()=>{v&&y&&u&&j(u)},[j,v,y,u]),t.useEffect(()=>{if(!(!v||!i))if(i===R)n.current?.setZoom?.(F.ZoomMode.AUTO);else if(i===L)n.current?.setZoom?.(F.ZoomMode.PAGE_FIT);else{const a=parseFloat(i);!Number.isNaN(a)&&a>0&&n.current?.setZoom?.(a)}},[v,i]),t.useEffect(()=>{v&&m&&n.current?.setPage?.(m)},[v,m]),t.useEffect(()=>{if(!v||!n.current)return;const a=n.current;D.current?.({getThumbnailsDataUrl:(x,p)=>a.getThumbnailsDataUrl(x,p),zoomIn:()=>a.zoomIn(),zoomOut:()=>a.zoomOut(),getZoom:()=>a.getZoom(),navigateToPage:x=>a.setPage?.(x),setPageDisplayRotation:(x,p,O)=>a.setPageDisplayRotation(x,p,O),getPageDisplayRotation:x=>a.getPageDisplayRotation(x)})},[v]),e.jsx("div",{ref:f,className:c.mergeClasses("grow min-w-0 overflow-auto bg-layer-3",h)})},P="h-4 rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave",J=({className:s,ariaLabel:r="pdf preview loading"})=>e.jsx("div",{role:"status","aria-label":r,"aria-live":"polite",className:c.mergeClasses("h-full w-full bg-layer-3",s),children:e.jsxs("div",{className:"flex h-full w-full flex-col gap-10 px-[60px] pt-10",children:[e.jsx("div",{className:"mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave"}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:c.mergeClasses(P,"w-[28%] max-w-[320px]")})]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:P}),e.jsx("div",{className:c.mergeClasses(P,"w-[58%] max-w-[520px]")})]})]})}),Q=t.createContext(null),ee=()=>t.useContext(Q),_=V.filter(({value:s})=>{const r=Number.parseFloat(s);return!Number.isNaN(r)&&r>0}),ie=[..._].reverse(),te=(s,r,u)=>{if(_.length===0)return s;const l=Number.parseFloat(s),m=!Number.isNaN(l)&&l>0?l:u,i=typeof m=="number"&&m>0?m:Number.parseFloat(_[0].value);return r===1?(_.find(({value:h})=>Number.parseFloat(h)>i)??_[_.length-1]).value:(ie.find(({value:h})=>Number.parseFloat(h)<i)??_[0]).value};function q(s,r){const u=(s??"").toLowerCase();return(r??"").toLowerCase()===le||u.endsWith(oe)}const W=V.map(s=>({value:s.value,label:s.label})),se=({fileUrl:s,fileName:r,loadFileCb:u,highlights:l,selectedPageNumber:m,onTotalPagesChange:i,thumbnailPageNumbers:h,onThumbnailsLoaded:b,onViewerReady:N,showLoaderOverlay:d=!1,selectedPages:w})=>{const f=ee(),n=t.useRef(null),[v,E]=t.useState(!1),[y,S]=t.useState(0),[T,D]=t.useState(!1),[I,j]=t.useState(null),[a,x]=t.useState(null),[p,O]=t.useState(R),C=t.useMemo(()=>{if(r)return q(r.toLowerCase());let o;try{o=new URL(s).pathname}catch{o=s.split("?")[0].split("#")[0]}const g=o.split("/").pop()??"";return!g.includes(".")||q(g.toLowerCase())},[r,s]),B=t.useCallback(o=>{S((y+o+l.length)%l.length)},[y,l.length]),U=t.useCallback(o=>{const g=n.current;!g?.getZoom||!o||O(te(p,o,g.getZoom()))},[p]),k=t.useMemo(()=>{if(!(p===R||p===L||V.some(g=>g.value===p))){const g=parseFloat(p);if(!Number.isNaN(g)&&g>0)return[...W,{value:p,label:`${Math.round(g*100)}%`}]}return W},[p]);t.useEffect(()=>{let o=!1;if(j(!0),D(!1),x(null),E(!1),n.current=null,!C){D(!0),j(!1);return}return(async()=>{try{const Z=await(f?f.getFile(s,()=>u(s)):u(s));o||x(Z)}catch{o||(D(!0),x(null))}finally{o||j(!1)}})(),()=>{o=!0}},[s,f,u,C]);const M=t.useCallback(o=>{n.current=o,E(!0),N?.(o)},[N]);return t.useEffect(()=>{const o=h??[],g=n.current?.getThumbnailsDataUrl;if(!o.length||!g||!a||!b||!v)return;let Z=!1;return(async()=>{const K=new Map;for(let A=0;A<o.length&&!Z;A+=$){const ae=o.slice(A,A+$);try{const H=await g(ae,X);if(Z)break;H.forEach((re,ne)=>K.set(ne,re)),b(new Map(K))}catch(H){console.warn("Thumbnail batch load failed:",H);break}}})(),()=>{Z=!0}},[h,a,b,v]),{file:a,isLoading:I,isError:T,isSupportedFile:C,activeHighlightIndex:y,zoom:p,setZoom:O,zoomSelectOptions:k,viewerApiRef:n,showLoader:!T&&(!!I||d),changeIndex:B,handleZoomChange:U,handleViewerReady:M}},ce=({fileUrl:s,fileName:r,errorLabel:u,occurrencesLabel:l,unsupportedLabel:m,highlights:i,loadFileCb:h,showOccurrences:b=!0,selectedPageNumber:N,containerClassName:d,pdfViewerClassName:w,onTotalPagesChange:f,title:n,thumbnailPageNumbers:v,onThumbnailsLoaded:E,onViewerReady:y,showLoaderOverlay:S=!1,selectedPages:T,selectedHighlightId:D,viewerOptions:I})=>{const{file:j,isError:a,isSupportedFile:x,activeHighlightIndex:p,zoom:O,setZoom:C,zoomSelectOptions:B,showLoader:U,changeIndex:k,handleZoomChange:M,handleViewerReady:G}=se({fileUrl:s,fileName:r,loadFileCb:h,highlights:i,selectedPageNumber:N,onTotalPagesChange:f,thumbnailPageNumbers:v,onThumbnailsLoaded:E,onViewerReady:y,showLoaderOverlay:S,selectedPages:T});return e.jsxs("div",{className:c.mergeClasses("flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-2",d),children:[r&&e.jsx("div",{className:"shrink-0 min-h-0 w-full",children:e.jsx(c.DialEllipsisTooltip,{className:"dial-tiny-text text-secondary",text:r})}),e.jsxs("div",{className:c.mergeClasses("flex w-full justify-between items-center",b&&n?"gap-2":""),children:[e.jsx("div",{children:b?e.jsxs("div",{className:"flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit",children:[e.jsxs("span",{className:"dial-small-text",children:[l??"Occurrences",":",e.jsx("span",{className:"pl-0.5 min-w-3 inline-block text-right",children:i.length>0?`${p+1}/${i.length}`:"0"})]}),i.length>0&&e.jsxs(e.Fragment,{children:[e.jsx(c.DialButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,iconAfter:e.jsx(z.IconChevronDown,{size:16}),"aria-label":"Next occurrence",onClick:()=>k(1)}),e.jsx(c.DialButton,{className:"p-0 text-primary !h-6.5",size:c.ElementSize.Small,iconAfter:e.jsx(z.IconChevronUp,{size:16}),"aria-label":"Previous occurrence",onClick:()=>k(-1)})]})]}):e.jsx("div",{})}),e.jsxs("div",{className:c.mergeClasses("flex flex-1 items-center gap-4 min-w-0",n!=null&&n!==""?"justify-between":"justify-end"),children:[n!=null&&n!==""&&e.jsx(c.DialEllipsisTooltip,{text:n,className:"dial-body-semi-text text-primary min-w-0"}),e.jsxs("div",{className:"flex gap-0.5 items-center shrink-0",children:[e.jsx("div",{className:"h-6",children:e.jsx(c.DialSelect,{size:c.SelectSize.Sm,className:"bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",options:B,value:O,onChange:o=>C(o)})}),e.jsx(c.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconMinus,{size:16}),"aria-label":"Zoom out",size:c.ElementSize.Small,onClick:()=>M(-1)}),e.jsx(c.DialButton,{className:"py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",iconAfter:e.jsx(z.IconPlus,{size:16}),"aria-label":"Zoom in",size:c.ElementSize.Small,onClick:()=>M(1)})]})]})]}),e.jsxs("div",{className:"relative flex min-h-0 flex-1",children:[j&&e.jsx(Y,{pdf:j,highlights:i,selectedHighlightId:b?i[p]?.id:D,selectedPageNumber:N,zoom:O,onTotalPagesChange:f,onViewerReady:G,containerClassName:w,selectedPages:T,viewerOptions:I}),U&&e.jsx(J,{className:"absolute inset-0 z-10"}),a&&e.jsx("div",{className:"absolute inset-0 z-20 flex items-center justify-center bg-layer-3",children:e.jsxs("div",{className:"flex flex-col items-center gap-6 p-10",children:[e.jsx(z.IconAlertTriangle,{size:60,stroke:2,className:"text-secondary"}),e.jsx("div",{className:"text-center dial-small-text whitespace-pre-wrap",children:!x&&m?m:u??"Failed to load document."})]})})]})]})},ue=1200*1e3,me=20,de=({children:s,ttlMs:r=ue,maxEntries:u=me})=>{const l=t.useRef(new Map),m=t.useCallback((d,w)=>{l.current.delete(d),l.current.set(d,w)},[]),i=t.useCallback(()=>{const d=Date.now();for(const[w,f]of l.current.entries())f.file&&d-f.timestamp>r&&l.current.delete(w)},[r]),h=t.useCallback(()=>{for(;l.current.size>u;){const d=l.current.keys().next().value;d&&l.current.delete(d)}},[u]),b=t.useCallback(()=>{l.current.clear()},[]),N=t.useCallback(async(d,w)=>{i();const f=l.current.get(d);if(f){if(m(d,{...f,timestamp:Date.now()}),f.file)return f.file;if(f.promise)return f.promise}const n=Date.now(),v=w().then(y=>{const S={file:y,timestamp:Date.now()};return m(d,S),h(),y}).catch(y=>{throw l.current.delete(d),y});return m(d,{promise:v,timestamp:n}),h(),v},[h,i,m]);return t.useEffect(()=>()=>b(),[b]),e.jsx(Q.Provider,{value:{getFile:N,clearCache:b},children:s})},fe=({pageNum:s,onSelectPage:r,isSelected:u,isLoading:l,isMultiselect:m,thumbnailUrl:i,className:h})=>e.jsxs("button",{type:"button","aria-label":`Page ${s}`,"aria-pressed":u,onClick:b=>{m&&b.target.closest("[data-checkbox-wrapper]")||r(s)},className:c.mergeClasses("flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",u&&(m?"border border-accent-primary bg-accent-primary-alpha":"border border-primary"),h),children:[e.jsxs("div",{className:"relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden",children:[i?e.jsx("img",{src:i,alt:`Page ${s} thumbnail`,className:"w-full h-full object-cover rounded-sm"}):null,m&&e.jsx("div",{className:"absolute left-1 top-1 z-10","data-checkbox-wrapper":!0,children:e.jsx(c.Checkbox,{id:`page-thumbnail-${s}`,isSelected:u,onChange:()=>r(s),"aria-label":`Select page ${s}`})}),l&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-blackout rounded-sm",children:e.jsx(c.Spinner,{size:24,fullWidth:!1,ariaLabel:`Loading page ${s}`})})]}),e.jsx("span",{className:"dial-tiny-text text-primary",children:s})]});Object.defineProperty(exports,"RotationDirection",{enumerable:!0,get:()=>F.RotationDirection});exports.AUTO_ZOOM_ID=R;exports.DocumentPreview=ce;exports.DocumentPreviewCacheProvider=de;exports.FIT_ZOOM_ID=L;exports.PDFViewer=Y;exports.PageThumbnail=fe;exports.PdfPreviewLoader=J;exports.THUMBNAIL_BATCH_SIZE=$;exports.THUMBNAIL_IMAGE_OPTIONS=X;exports.ZOOM_OPTIONS=V;exports.getStepZoomOptionValue=te;exports.isPdfFile=q;exports.useDocumentPreview=se;exports.useDocumentPreviewCache=ee;

package/dist/ai-dial-react-pdf-highlighter.es.js

@@ -1,11 +1,11 @@
 import { jsx as e, jsxs as x, Fragment as se } from "react/jsx-runtime";
-import { mergeClasses as Z, DialEllipsisTooltip as Y, DialButton as j, ElementSize as B, DialSelect as ie, SelectSize as ce, DialCheckbox as ue, DialLoader as me } from "@epam/ai-dial-ui-kit";
+import { mergeClasses as Z, DialEllipsisTooltip as Y, DialButton as j, ElementSize as B, DialSelect as ie, SelectSize as ce, Checkbox as ue, Spinner as me } from "@epam/ai-dial-ui-kit";
 import { ZoomMode as J, PDFHighlightViewer as de } from "@epam/pdf-highlighter-kit";
 import { RotationDirection as Be } from "@epam/pdf-highlighter-kit";
-import { useRef as L, useState as S, useEffect as w, useCallback as D, createContext as fe, useContext as pe, useMemo as Q } from "react";
-import { IconChevronDown as he, IconChevronUp as ve, IconMinus as be, IconPlus as xe, IconAlertTriangle as ge } from "@tabler/icons-react";
-const U = "auto", G = "page-fit", X = [
-  { value: U, label: "Auto" },
+import { useRef as L, useState as S, useEffect as w, useCallback as I, createContext as fe, useContext as pe, useMemo as Q } from "react";
+import { IconChevronDown as ve, IconChevronUp as he, IconMinus as be, IconPlus as xe, IconAlertTriangle as ge } from "@tabler/icons-react";
+const $ = "auto", G = "page-fit", X = [
+  { value: $, label: "Auto" },
   { value: G, label: "Page Fit" },
   { value: "0.5", label: "50%" },
   { value: "0.75", label: "75%" },
@@ -25,27 +25,27 @@ const U = "auto", G = "page-fit", X = [
   autoFocusFirstHighlight: o = !1,
   selectedPageNumber: c,
   zoom: s,
-  containerClassName: v,
-  onTotalPagesChange: h,
+  containerClassName: h,
+  onTotalPagesChange: v,
   onViewerReady: N,
   selectedPages: u,
   viewerOptions: y
 }) => {
-  const m = L(null), n = L(null), [p, I] = S(!1), [g, _] = S(!1), E = L(h), O = L(N), R = L(y);
+  const m = L(null), n = L(null), [p, D] = S(!1), [g, _] = S(!1), E = L(v), O = L(N), R = L(y);
   w(() => {
-    E.current = h;
-  }, [h]), w(() => {
+    E.current = v;
+  }, [v]), w(() => {
     O.current = N;
   }, [N]), w(() => {
     R.current = y;
   }, [y]);
-  const C = D(
+  const C = I(
     (r) => n.current?.goToHighlight(r),
     []
   );
   return w(() => {
     if (!m.current) return;
-    I(!1), _(!1), n.current && (n.current.destroy(), n.current = null);
+    D(!1), _(!1), n.current && (n.current.destroy(), n.current = null);
     let r = null, d = !0;
     const f = () => {
       d && _(!0);
@@ -66,7 +66,7 @@ const U = "auto", G = "page-fit", X = [
           return;
         }
         const P = r.getTotalPages?.();
-        typeof P == "number" && P > 0 && E.current?.(P), d && (n.current = r, I(!0));
+        typeof P == "number" && P > 0 && E.current?.(P), d && (n.current = r, D(!0));
       } catch (P) {
         if (!d)
           return;
@@ -81,7 +81,7 @@ const U = "auto", G = "page-fit", X = [
     p && g && i && C(i);
   }, [C, p, g, i]), w(() => {
     if (!(!p || !s))
-      if (s === U)
+      if (s === $)
         n.current?.setZoom?.(J.AUTO);
       else if (s === G)
         n.current?.setZoom?.(J.PAGE_FIT);
@@ -109,7 +109,7 @@ const U = "auto", G = "page-fit", X = [
       ref: m,
       className: Z(
         "grow min-w-0 overflow-auto bg-layer-3",
-        v
+        h
       )
     }
   );
@@ -160,14 +160,14 @@ const U = "auto", G = "page-fit", X = [
 ), ae = fe(null), Te = () => pe(ae), F = X.filter(({ value: t }) => {
   const a = Number.parseFloat(t);
   return !Number.isNaN(a) && a > 0;
-}), De = [...F].reverse(), Ie = (t, a, i) => {
+}), Ie = [...F].reverse(), De = (t, a, i) => {
   if (F.length === 0)
     return t;
   const o = Number.parseFloat(t), c = !Number.isNaN(o) && o > 0 ? o : i, s = typeof c == "number" && c > 0 ? c : Number.parseFloat(F[0].value);
   return a === 1 ? (F.find(
-    ({ value: v }) => Number.parseFloat(v) > s
-  ) ?? F[F.length - 1]).value : (De.find(
-    ({ value: v }) => Number.parseFloat(v) < s
+    ({ value: h }) => Number.parseFloat(h) > s
+  ) ?? F[F.length - 1]).value : (Ie.find(
+    ({ value: h }) => Number.parseFloat(h) < s
   ) ?? F[0]).value;
 };
 function te(t, a) {
@@ -184,13 +184,13 @@ const re = X.map((t) => ({
   highlights: o,
   selectedPageNumber: c,
   onTotalPagesChange: s,
-  thumbnailPageNumbers: v,
-  onThumbnailsLoaded: h,
+  thumbnailPageNumbers: h,
+  onThumbnailsLoaded: v,
   onViewerReady: N,
   showLoaderOverlay: u = !1,
   selectedPages: y
 }) => {
-  const m = Te(), n = L(null), [p, I] = S(!1), [g, _] = S(0), [E, O] = S(!1), [R, C] = S(null), [r, d] = S(null), [f, z] = S(U), P = Q(() => {
+  const m = Te(), n = L(null), [p, D] = S(!1), [g, _] = S(0), [E, O] = S(!1), [R, C] = S(null), [r, d] = S(null), [f, z] = S($), P = Q(() => {
     if (a)
       return te(a.toLowerCase());
     let l;
@@ -201,21 +201,21 @@ const re = X.map((t) => ({
     }
     const b = l.split("/").pop() ?? "";
     return !b.includes(".") || te(b.toLowerCase());
-  }, [a, t]), $ = D(
+  }, [a, t]), U = I(
     (l) => {
       _(
         (g + l + o.length) % o.length
       );
     },
     [g, o.length]
-  ), H = D(
+  ), H = I(
     (l) => {
       const b = n.current;
-      !b?.getZoom || !l || z(Ie(f, l, b.getZoom()));
+      !b?.getZoom || !l || z(De(f, l, b.getZoom()));
     },
     [f]
   ), A = Q(() => {
-    if (!(f === U || f === G || X.some((b) => b.value === f))) {
+    if (!(f === $ || f === G || X.some((b) => b.value === f))) {
       const b = parseFloat(f);
       if (!Number.isNaN(b) && b > 0)
         return [
@@ -227,7 +227,7 @@ const re = X.map((t) => ({
   }, [f]);
   w(() => {
     let l = !1;
-    if (C(!0), O(!1), d(null), I(!1), n.current = null, !P) {
+    if (C(!0), O(!1), d(null), D(!1), n.current = null, !P) {
       O(!0), C(!1);
       return;
     }
@@ -244,15 +244,15 @@ const re = X.map((t) => ({
       l = !0;
     };
   }, [t, m, i, P]);
-  const M = D(
+  const M = I(
     (l) => {
-      n.current = l, I(!0), N?.(l);
+      n.current = l, D(!0), N?.(l);
     },
     [N]
   );
   return w(() => {
-    const l = v ?? [], b = n.current?.getThumbnailsDataUrl;
-    if (!l.length || !b || !r || !h || !p)
+    const l = h ?? [], b = n.current?.getThumbnailsDataUrl;
+    if (!l.length || !b || !r || !v || !p)
       return;
     let k = !1;
     return (async () => {
@@ -262,7 +262,7 @@ const re = X.map((t) => ({
         try {
           const W = await b(ne, ye);
           if (k) break;
-          W.forEach((oe, le) => K.set(le, oe)), h(new Map(K));
+          W.forEach((oe, le) => K.set(le, oe)), v(new Map(K));
         } catch (W) {
           console.warn("Thumbnail batch load failed:", W);
           break;
@@ -271,7 +271,7 @@ const re = X.map((t) => ({
     })(), () => {
       k = !0;
     };
-  }, [v, r, h, p]), {
+  }, [h, r, v, p]), {
     file: r,
     isLoading: R,
     isError: E,
@@ -282,7 +282,7 @@ const re = X.map((t) => ({
     zoomSelectOptions: A,
     viewerApiRef: n,
     showLoader: !E && (!!R || u),
-    changeIndex: $,
+    changeIndex: U,
     handleZoomChange: H,
     handleViewerReady: M
   };
@@ -293,15 +293,15 @@ const re = X.map((t) => ({
   occurrencesLabel: o,
   unsupportedLabel: c,
   highlights: s,
-  loadFileCb: v,
-  showOccurrences: h = !0,
+  loadFileCb: h,
+  showOccurrences: v = !0,
   selectedPageNumber: N,
   containerClassName: u,
   pdfViewerClassName: y,
   onTotalPagesChange: m,
   title: n,
   thumbnailPageNumbers: p,
-  onThumbnailsLoaded: I,
+  onThumbnailsLoaded: D,
   onViewerReady: g,
   showLoaderOverlay: _ = !1,
   selectedPages: E,
@@ -315,7 +315,7 @@ const re = X.map((t) => ({
     activeHighlightIndex: f,
     zoom: z,
     setZoom: P,
-    zoomSelectOptions: $,
+    zoomSelectOptions: U,
     showLoader: H,
     changeIndex: A,
     handleZoomChange: M,
@@ -323,12 +323,12 @@ const re = X.map((t) => ({
   } = _e({
     fileUrl: t,
     fileName: a,
-    loadFileCb: v,
+    loadFileCb: h,
     highlights: s,
     selectedPageNumber: N,
     onTotalPagesChange: m,
     thumbnailPageNumbers: p,
-    onThumbnailsLoaded: I,
+    onThumbnailsLoaded: D,
     onViewerReady: g,
     showLoaderOverlay: _,
     selectedPages: E
@@ -353,10 +353,10 @@ const re = X.map((t) => ({
           {
             className: Z(
               "flex w-full justify-between items-center",
-              h && n ? "gap-2" : ""
+              v && n ? "gap-2" : ""
             ),
             children: [
-              /* @__PURE__ */ e("div", { children: h ? /* @__PURE__ */ x("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
+              /* @__PURE__ */ e("div", { children: v ? /* @__PURE__ */ x("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
                 /* @__PURE__ */ x("span", { className: "dial-small-text", children: [
                   o ?? "Occurrences",
                   ":",
@@ -368,7 +368,7 @@ const re = X.map((t) => ({
                     {
                       className: "p-0 text-primary !h-6.5",
                       size: B.Small,
-                      iconAfter: /* @__PURE__ */ e(he, { size: 16 }),
+                      iconAfter: /* @__PURE__ */ e(ve, { size: 16 }),
                       "aria-label": "Next occurrence",
                       onClick: () => A(1)
                     }
@@ -378,7 +378,7 @@ const re = X.map((t) => ({
                     {
                       className: "p-0 text-primary !h-6.5",
                       size: B.Small,
-                      iconAfter: /* @__PURE__ */ e(ve, { size: 16 }),
+                      iconAfter: /* @__PURE__ */ e(he, { size: 16 }),
                       "aria-label": "Previous occurrence",
                       onClick: () => A(-1)
                     }
@@ -406,7 +406,7 @@ const re = X.map((t) => ({
                         {
                           size: ce.Sm,
                           className: "bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",
-                          options: $,
+                          options: U,
                           value: z,
                           onChange: (l) => P(l)
                         }
@@ -444,7 +444,7 @@ const re = X.map((t) => ({
             {
               pdf: C,
               highlights: s,
-              selectedHighlightId: h ? s[f]?.id : O,
+              selectedHighlightId: v ? s[f]?.id : O,
               selectedPageNumber: N,
               zoom: z,
               onTotalPagesChange: m,
@@ -475,20 +475,20 @@ const re = X.map((t) => ({
   ttlMs: a = Ee,
   maxEntries: i = Oe
 }) => {
-  const o = L(/* @__PURE__ */ new Map()), c = D((u, y) => {
+  const o = L(/* @__PURE__ */ new Map()), c = I((u, y) => {
     o.current.delete(u), o.current.set(u, y);
-  }, []), s = D(() => {
+  }, []), s = I(() => {
     const u = Date.now();
     for (const [y, m] of o.current.entries())
       m.file && u - m.timestamp > a && o.current.delete(y);
-  }, [a]), v = D(() => {
+  }, [a]), h = I(() => {
     for (; o.current.size > i; ) {
       const u = o.current.keys().next().value;
       u && o.current.delete(u);
     }
-  }, [i]), h = D(() => {
+  }, [i]), v = I(() => {
     o.current.clear();
-  }, []), N = D(
+  }, []), N = I(
     async (u, y) => {
       s();
       const m = o.current.get(u);
@@ -500,15 +500,15 @@ const re = X.map((t) => ({
       }
       const n = Date.now(), p = y().then((g) => {
         const _ = { file: g, timestamp: Date.now() };
-        return c(u, _), v(), g;
+        return c(u, _), h(), g;
       }).catch((g) => {
         throw o.current.delete(u), g;
       });
-      return c(u, { promise: p, timestamp: n }), v(), p;
+      return c(u, { promise: p, timestamp: n }), h(), p;
     },
-    [v, s, c]
+    [h, s, c]
   );
-  return w(() => () => h(), [h]), /* @__PURE__ */ e(ae.Provider, { value: { getFile: N, clearCache: h }, children: t });
+  return w(() => () => v(), [v]), /* @__PURE__ */ e(ae.Provider, { value: { getFile: N, clearCache: v }, children: t });
 }, Me = ({
   pageNum: t,
   onSelectPage: a,
@@ -516,20 +516,20 @@ const re = X.map((t) => ({
   isLoading: o,
   isMultiselect: c,
   thumbnailUrl: s,
-  className: v
+  className: h
 }) => /* @__PURE__ */ x(
   "button",
   {
     type: "button",
     "aria-label": `Page ${t}`,
     "aria-pressed": i,
-    onClick: (h) => {
-      c && h.target.closest("[data-checkbox-wrapper]") || a(t);
+    onClick: (v) => {
+      c && v.target.closest("[data-checkbox-wrapper]") || a(t);
     },
     className: Z(
       "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",
       i && (c ? "border border-accent-primary bg-accent-primary-alpha" : "border border-primary"),
-      v
+      h
     ),
     children: [
       /* @__PURE__ */ x("div", { className: "relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden", children: [
@@ -545,9 +545,9 @@ const re = X.map((t) => ({
           ue,
           {
             id: `page-thumbnail-${t}`,
-            checked: i,
+            isSelected: i,
             onChange: () => a(t),
-            className: "before:border-primary before:bg-model-icon bg-model-icon"
+            "aria-label": `Select page ${t}`
           }
         ) }),
         o && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-blackout rounded-sm", children: /* @__PURE__ */ e(
@@ -564,7 +564,7 @@ const re = X.map((t) => ({
   }
 );
 export {
-  U as AUTO_ZOOM_ID,
+  $ as AUTO_ZOOM_ID,
   ke as DocumentPreview,
   Ae as DocumentPreviewCacheProvider,
   G as FIT_ZOOM_ID,
@@ -575,7 +575,7 @@ export {
   ee as THUMBNAIL_BATCH_SIZE,
   ye as THUMBNAIL_IMAGE_OPTIONS,
   X as ZOOM_OPTIONS,
-  Ie as getStepZoomOptionValue,
+  De as getStepZoomOptionValue,
   te as isPdfFile,
   _e as useDocumentPreview,
   Te as useDocumentPreviewCache

package/dist/index.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-64{width:16rem}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.\!justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-r{border-right-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.text-accent-primary{color:var(--text-accent-primary,#7da4ff)}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:border-primary:before{content:var(--tw-content);border-color:var(--stroke-primary,#696e7c)}.before\:bg-model-icon:before{content:var(--tw-content);background-color:var(--bg-model-icon,#fff)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-64{width:16rem}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.\!justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-r{border-right-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.text-accent-primary{color:var(--text-accent-primary,#7da4ff)}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-react-pdf-highlighter",
-  "version": "0.2.0-dev.24",
+  "version": "0.2.0-dev.27",
   "type": "module",
   "license": "Apache-2.0",
   "description": "React components for PDF viewing and highlighting, built on @epam/pdf-highlighter-kit",
@@ -58,7 +58,7 @@
     ]
   },
   "peerDependencies": {
-    "@epam/ai-dial-ui-kit": ">=0.13.0-0",
+    "@epam/ai-dial-ui-kit": ">=0.14.0-0",
     "@epam/pdf-highlighter-kit": ">=0.0.18",
     "@tabler/icons-react": "^3.44.0",
     "pdfjs-dist": ">=4.0.0",
@@ -82,7 +82,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@epam/ai-dial-ui-kit": "0.12.0-dev.4",
+    "@epam/ai-dial-ui-kit": "^0.14.0-dev.4",
     "@epam/pdf-highlighter-kit": "^0.0.18",
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",