@lifesg/react-design-system 3.5.0-canary.7 → 3.5.0

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var u=require("../util/use-event-listener.js"),d=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,{items:f,initialActiveItemIndex:g,hideThumbnail:j=!1,hideNavigation:x=!1,hideCounter:p=!1,hideMagnifier:b=!1,onDelete:I,onClose:C,insets:$,show:T}=h,S=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[w,q]=s.useStateCallback(null!=g?g:0),[k,y]=l.useState({}),[M,R]=l.useState(1),[F,A]=l.useState(),[B,L]=l.useState(),N=l.useRef(null),W=l.useRef([]),D=l.useRef([]),E=l.useRef(null),P=F&&B?F-B:0,z=f[w],G=f.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),Z=G?"item":"image",_=l.useMemo((()=>f.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[f]),O=l.useCallback((e=>{var i,t;const n=f[e],r=G?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${f.length}.`;return l?`${l}. ${a}`:a}),[f,G]);l.useImperativeHandle(m,(()=>({currentItemIndex:w,setCurrentItem:Q,goToPrevItem:J,goToNextItem:K}))),u.useEventListener("keydown",(function(e){"ArrowRight"===e.key?K():"ArrowLeft"===e.key?J():"Escape"===e.key&&(null==C||C())}),"document"),l.useEffect((()=>{var e;T&&(null===(e=E.current)||void 0===e||e.focus())}),[T]),l.useEffect((()=>{0!==f.length?w>f.length-1&&q(f.length-1):q(0)}),[w,f.length,q]),l.useEffect((()=>{var e,i;null===(i=null===(e=W.current)||void 0===e?void 0:e[w])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),R(1)}),[w]);const V=e=>{R(e.state.scale)};const X=({src:e,height:i,width:t})=>{y((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},H=()=>{if(!z||c(z))return;const e=k[z.src];if(N.current&&e){const{clientHeight:i,clientWidth:t}=N.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},J=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>0===e?f.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},K=()=>{var e,i;null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.resetTransform(),q((e=>e===f.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(O(e),"polite")}))},Q=e=>{var i,t;null===(t=null===(i=D.current)||void 0===i?void 0:i[w])||void 0===t||t.resetTransform(),q(e)};return i.jsx(o.ModalV2,Object.assign({},S,{"data-testid":"image-carousel-modal","aria-label":G?"Carousel":"Image carousel",show:T,disableInitialFocus:!0,children:i.jsxs(d.CarouselModalContent,{children:[i.jsxs(d.ImageGalleryContainer,{children:[i.jsxs(d.ImageGalleryWrapper,{children:[i.jsx(d.ImageGallerySwipe,{ref:N,onTouchStart:e=>{M<=1&&A(e.touches[0].clientX)},onTouchMove:e=>{!F||M>1||L(e.touches[0].clientX)},onTouchEnd:()=>{N.current&&(Math.abs(P)>N.current.offsetWidth/3&&(P>0?K():J()),A(void 0),L(void 0))},children:i.jsx(d.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-w}% - ${P}px))`},children:f.map(((e,t)=>{const n=t===w,r=Math.abs(t-w)<=1||0===w&&t===f.length-1||w===f.length-1&&0===t;return i.jsx(d.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(d.FocusableImageRegion,{ref:n?E:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(d.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>D.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:V,onZoomStop:V,onWheel:V,children:i.jsx(a.TransformComponent,{children:i.jsx(d.SlideImage,{src:e.src,alt:O(t),placeholder:i.jsx(d.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:X})})})})},t)}))})}),!x&&i.jsxs(i.Fragment,{children:[i.jsx(d.ArrowButton,{"aria-label":`Previous ${Z}`,"data-testid":"prev-btn",$position:"left",onClick:J,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(d.ArrowButton,{"aria-label":`Next ${Z}`,"data-testid":"forward-btn",$position:"right",onClick:K,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!p&&i.jsx(d.BoxChip,{"aria-hidden":"true",children:i.jsx(d.Chip,{weight:"semibold",children:`${w+1}/${f.length}`})})]}),!j&&i.jsx(d.ThumbnailContainer,{$insetBottom:null==$?void 0:$.bottom,"aria-hidden":"true",children:i.jsx(d.ThumbnailWrapper,{children:f.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(d.ThumbnailItemContainer,{children:i.jsx(d.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===w,onClick:()=>Q(t),ref:e=>W.current[t]=e,children:r?i.jsx(d.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.SlidePlaceholderImage,{})})},t)}))})})]}),i.jsxs(d.TopActionButtons,{$hasFileInfo:_,$insetTop:null==$?void 0:$.top,$insetLeft:null==$?void 0:$.left,$insetRight:null==$?void 0:$.right,children:[_&&(()=>{const{fileName:e,fileSize:t}=null!=z?z:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(d.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(d.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(d.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})})(),!b&&!c(z)&&i.jsx(d.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===M){const t=H();null===(i=null===(e=D.current)||void 0===e?void 0:e[w])||void 0===i||i.centerView(t),R(null!=t?t:1)}else R(1),null===(n=null===(t=D.current)||void 0===t?void 0:t[w])||void 0===n||n.resetTransform()},children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),I&&i.jsx(d.DeleteButton,{"aria-label":`Delete ${c(z)&&(null===(v=z.itemLabel)||void 0===v?void 0:v.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{z&&I&&I(z,w)},children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(d.CloseButton,{"aria-label":G?"Close carousel":"Close image carousel",onClick:C,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),n=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),l=require("react"),a=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),s=require("../shared/hooks/use-state-callback.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var d=require("../util/use-event-listener.js"),u=require("./fullscreen-image-carousel.style.js");const c=e=>!!e&&"custom"===e.type,h=(h,m)=>{var v,f,{items:g,initialActiveItemIndex:j,hideThumbnail:x=!1,hideNavigation:p=!1,hideCounter:b=!1,hideMagnifier:I=!1,customActions:C,onDelete:$,onClose:T,insets:S,topBarRef:w,show:k}=h,q=e.__rest(h,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","customActions","onDelete","onClose","insets","topBarRef","show"]);const[A,R]=s.useStateCallback(null!=j?j:0),[y,B]=l.useState({}),[M,F]=l.useState(1),[L,E]=l.useState(),[N,W]=l.useState(),D=l.useRef(null),P=l.useRef([]),z=l.useRef([]),G=l.useRef(null),Z=L&&N?L-N:0,_=g[A],O=null!==(f=null!==(v=null==_?void 0:_.customActions)&&void 0!==v?v:C)&&void 0!==f?f:[],V=g.some((e=>{var i;return c(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),X=V?"item":"image",H=l.useMemo((()=>g.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[g]),J=l.useCallback((e=>{var i,t;const n=g[e],r=V?"Item":"Image",l=c(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",a=`${r} ${e+1} of ${g.length}.`;return l?`${l}. ${a}`:a}),[g,V]);l.useImperativeHandle(m,(()=>({currentItemIndex:A,setCurrentItem:ne,goToPrevItem:ie,goToNextItem:te}))),d.useEventListener("keydown",(function(e){"ArrowRight"===e.key?te():"ArrowLeft"===e.key?ie():"Escape"===e.key&&(null==T||T())}),"document"),l.useEffect((()=>{var e;k&&(null===(e=G.current)||void 0===e||e.focus())}),[k]),l.useEffect((()=>{0!==g.length?A>g.length-1&&R(g.length-1):R(0)}),[A,g.length,R]),l.useEffect((()=>{var e,i;null===(i=null===(e=P.current)||void 0===e?void 0:e[A])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),F(1)}),[A]);const K=e=>{F(e.state.scale)},Q=()=>{_&&$&&$(_,A)};const U=()=>{var e,i,t,n;if(1===M){const t=ee();null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.centerView(t),F(null!=t?t:1)}else F(1),null===(n=null===(t=z.current)||void 0===t?void 0:t[A])||void 0===n||n.resetTransform()},Y=({src:e,height:i,width:t})=>{B((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},ee=()=>{if(!_||c(_))return;const e=y[_.src];if(D.current&&e){const{clientHeight:i,clientWidth:t}=D.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},ie=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>0===e?g.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},te=()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[A])||void 0===i||i.resetTransform(),R((e=>e===g.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(J(e),"polite")}))},ne=e=>{var i,t;null===(t=null===(i=z.current)||void 0===i?void 0:i[A])||void 0===t||t.resetTransform(),R(e)},re=()=>{const{fileName:e,fileSize:t}=null!=_?_:{},n=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs(u.FileInfoTextWrapper,{$centerContent:!r,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[n&&i.jsx(u.FileInfoFileName,{weight:"semibold","data-testid":"file-info-name",children:n}),r&&i.jsx(u.FileInfoFileSize,{"data-testid":"file-info-size",children:r})]})};return i.jsx(o.ModalV2,Object.assign({},q,{"data-testid":"image-carousel-modal","aria-label":V?"Carousel":"Image carousel",show:k,disableInitialFocus:!0,children:i.jsxs(u.CarouselModalContent,{children:[i.jsxs(u.ImageGalleryContainer,{children:[i.jsxs(u.ImageGalleryWrapper,{children:[i.jsx(u.ImageGallerySwipe,{ref:D,onTouchStart:e=>{M<=1&&E(e.touches[0].clientX)},onTouchMove:e=>{!L||M>1||W(e.touches[0].clientX)},onTouchEnd:()=>{D.current&&(Math.abs(Z)>D.current.offsetWidth/3&&(Z>0?te():ie()),E(void 0),W(void 0))},children:i.jsx(u.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-A}% - ${Z}px))`},children:g.map(((e,t)=>{const n=t===A,r=Math.abs(t-A)<=1||0===A&&t===g.length-1||A===g.length-1&&0===t;return i.jsx(u.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(u.FocusableImageRegion,{ref:n?G:null,tabIndex:n?0:-1,children:c(e)?r?e.renderContent():i.jsx(u.SlidePlaceholderImage,{}):i.jsx(a.TransformWrapper,{ref:e=>z.current[t]=e,panning:{disabled:M<=1},initialScale:1,onZoom:K,onZoomStop:K,onWheel:K,children:i.jsx(a.TransformComponent,{children:i.jsx(u.SlideImage,{src:e.src,alt:J(t),placeholder:i.jsx(u.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Y})})})})},t)}))})}),!p&&i.jsxs(i.Fragment,{children:[i.jsx(u.ArrowButton,{"aria-label":`Previous ${X}`,"data-testid":"prev-btn",$position:"left",onClick:ie,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ArrowButton,{"aria-label":`Next ${X}`,"data-testid":"forward-btn",$position:"right",onClick:te,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!b&&i.jsx(u.BoxChip,{"aria-hidden":"true",children:i.jsx(u.Chip,{weight:"semibold",children:`${A+1}/${g.length}`})})]}),!x&&i.jsx(u.ThumbnailContainer,{$insetBottom:null==S?void 0:S.bottom,"aria-hidden":"true",children:i.jsx(u.ThumbnailWrapper,{children:g.map(((e,t)=>{var n;const r=c(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(u.ThumbnailItemContainer,{children:i.jsx(u.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===A,onClick:()=>ne(t),ref:e=>P.current[t]=e,children:r?i.jsx(u.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(u.SlidePlaceholderImage,{})})},t)}))})})]}),(()=>{var e;return i.jsxs(u.TopActionButtons,{ref:w,$hasFileInfo:H,$insetTop:null==S?void 0:S.top,$insetLeft:null==S?void 0:S.left,$insetRight:null==S?void 0:S.right,children:[H&&re(),O.map(((e,t)=>i.jsx(u.CustomActionButton,{"aria-label":e.ariaLabel,"data-testid":e["data-testid"],onClick:()=>(e=>{_&&e.onClick(_,A)})(e),children:l.cloneElement(e.icon,{"aria-hidden":!0})},t))),!I&&!c(_)&&i.jsx(u.MagnifierButton,{"aria-label":1===M?"Zoom in":"Zoom out",onClick:U,children:1===M?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),$&&i.jsx(u.DeleteButton,{"aria-label":`Delete ${c(_)&&(null===(e=_.itemLabel)||void 0===e?void 0:e.trim())||"image"}`,"data-testid":"delete-btn",onClick:Q,children:i.jsx(n.BinIcon,{"aria-hidden":!0})}),i.jsx(u.CloseButton,{"aria-label":V?"Close carousel":"Close image carousel",onClick:T,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})})()]})}))},m=l.forwardRef(h);exports.Component=h,exports.FullscreenImageCarousel=m;
 //# sourceMappingURL=fullscreen-image-carousel.js.map

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                <TopActionButtons\n                    $hasFileInfo={hasFileInfo}\n                    $insetTop={insets?.top}\n                    $insetLeft={insets?.left}\n                    $insetRight={insets?.right}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <MagnifierButton\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </MagnifierButton>\n                    )}\n\n                    {onDelete && (\n                        <DeleteButton\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </DeleteButton>\n                    )}\n\n                    <CloseButton\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </CloseButton>\n                </TopActionButtons>\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n    cloneElement,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n    TransformComponent,\n    TransformWrapper,\n} from \"react-zoom-pan-pinch\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    CarouselModalContent,\n    Chip,\n    CloseButton,\n    CustomActionButton,\n    DeleteButton,\n    FileInfoFileName,\n    FileInfoFileSize,\n    FileInfoTextWrapper,\n    FocusableImageRegion,\n    ImageGalleryContainer,\n    ImageGallerySlide,\n    ImageGallerySlides,\n    ImageGallerySwipe,\n    ImageGalleryWrapper,\n    MagnifierButton,\n    SlideImage,\n    SlidePlaceholderImage,\n    ThumbnailContainer,\n    ThumbnailImage,\n    ThumbnailItem,\n    ThumbnailItemContainer,\n    ThumbnailWrapper,\n    TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport {\n    FullscreenImageCarouselCustomAction,\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        customActions,\n        onDelete,\n        onClose,\n        insets,\n        topBarRef,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const resolvedCustomActions =\n        currentItem?.customActions ?? customActions ?? [];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    const handleCustomAction = (\n        action: FullscreenImageCarouselCustomAction\n    ) => {\n        if (currentItem) {\n            action.onClick(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <ImageGallerySlides\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <FocusableImageRegion\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <SlideImage\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <SlidePlaceholderImage />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </FocusableImageRegion>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <FileInfoTextWrapper\n                $centerContent={!trimmedSize}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <FileInfoFileName\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </FileInfoFileName>\n                )}\n                {trimmedSize && (\n                    <FileInfoFileSize data-testid=\"file-info-size\">\n                        {trimmedSize}\n                    </FileInfoFileSize>\n                )}\n            </FileInfoTextWrapper>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer\n                $insetBottom={insets?.bottom}\n                aria-hidden=\"true\"\n            >\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <ThumbnailItemContainer key={index}>\n                                <ThumbnailItem\n                                    data-testid=\"thumbnail-item\"\n                                    $active={index === currentSlide}\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <ThumbnailImage\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <SlidePlaceholderImage />\n                                    )}\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    const renderTopActions = () => {\n        return (\n            <TopActionButtons\n                ref={topBarRef}\n                $hasFileInfo={hasFileInfo}\n                $insetTop={insets?.top}\n                $insetLeft={insets?.left}\n                $insetRight={insets?.right}\n            >\n                {hasFileInfo && renderFileInfo()}\n\n                {resolvedCustomActions.map((action, index) => (\n                    <CustomActionButton\n                        key={index}\n                        aria-label={action.ariaLabel}\n                        data-testid={action[\"data-testid\"]}\n                        onClick={() => handleCustomAction(action)}\n                    >\n                        {cloneElement(action.icon, { \"aria-hidden\": true })}\n                    </CustomActionButton>\n                ))}\n\n                {!hideMagnifier && !isCustomItem(currentItem) && (\n                    <MagnifierButton\n                        aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                        onClick={handleMagnifier}\n                    >\n                        {zoom === 1 ? (\n                            <MagnifierPlusIcon aria-hidden />\n                        ) : (\n                            <MagnifierMinusIcon aria-hidden />\n                        )}\n                    </MagnifierButton>\n                )}\n\n                {onDelete && (\n                    <DeleteButton\n                        aria-label={`Delete ${\n                            (isCustomItem(currentItem) &&\n                                currentItem.itemLabel?.trim()) ||\n                            \"image\"\n                        }`}\n                        data-testid=\"delete-btn\"\n                        onClick={handleDelete}\n                    >\n                        <BinIcon aria-hidden />\n                    </DeleteButton>\n                )}\n\n                <CloseButton\n                    aria-label={\n                        hasAnyItemLabel\n                            ? \"Close carousel\"\n                            : \"Close image carousel\"\n                    }\n                    onClick={onClose}\n                >\n                    <CrossIcon aria-hidden />\n                </CloseButton>\n            </TopActionButtons>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <CarouselModalContent>\n                <ImageGalleryContainer>\n                    <ImageGalleryWrapper>\n                        <ImageGallerySwipe\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </ImageGallerySwipe>\n\n                        {!hideNavigation && (\n                            <>\n                                <ArrowButton\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    $position=\"left\"\n                                    onClick={goToPrevSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ArrowButton>\n                                <ArrowButton\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    $position=\"right\"\n                                    onClick={goToNextSlide}\n                                    $insetLeft={insets?.left}\n                                    $insetRight={insets?.right}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ArrowButton>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <BoxChip aria-hidden=\"true\">\n                                <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Chip>\n                            </BoxChip>\n                        )}\n                    </ImageGalleryWrapper>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </ImageGalleryContainer>\n                {renderTopActions()}\n            </CarouselModalContent>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","customActions","onDelete","onClose","insets","topBarRef","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","resolvedCustomActions","_c","_b","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","handleDelete","handleMagnifier","zoomRatio","getZoomRatio","centerView","_d","resetTransform","setDimension","src","height","width","oldState","Object","assign","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","prev","slide","clearAnnouncer","announce","renderFileInfo","trimmedName","trimmedSize","_jsxs","FileInfoTextWrapper","_jsx","FileInfoFileName","weight","children","FileInfoFileSize","ModalV2","disableInitialFocus","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","top","action","CustomActionButton","ariaLabel","handleCustomAction","cloneElement","icon","MagnifierButton","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","renderTopActions","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.style.js

@@ -74,7 +74,7 @@
               `}
 `,p=l.default(s)``,c=l.default(s)`
     color: ${o.Colour["icon-error"]};
-`,g=l.default(s)``,h=l.default(s)`
+`,g=l.default(s)``,h=l.default(s)``,u=l.default(s)`
     z-index: 4;
     position: absolute;
     top: 50%;
@@ -99,19 +99,19 @@
                 );
             }
         `}
-`,u=l.default.div`
+`,$=l.default.div`
     position: relative;
     width: 100%;
     height: 100dvh;
     display: flex;
     flex-direction: column;
-`,$=l.default.div`
+`,f=l.default.div`
     display: flex;
     flex-direction: column;
     width: 100%;
     flex: 1;
     min-height: 0;
-`,f=l.default.div`
+`,x=l.default.div`
     user-select: none;
     position: relative;
     display: block;
@@ -119,13 +119,13 @@
     width: 100%;
     flex: 1;
     min-height: 0;
-`,x=l.default.div`
+`,m=l.default.div`
     display: block;
     user-select: none;
     height: 100%;
     overflow: hidden;
     touch-action: pan-y;
-`,m=l.default.div`
+`,b=l.default.div`
     display: flex;
     transition: all 450ms ease-out 0s;
     position: relative;
@@ -133,7 +133,7 @@
     user-select: none;
     width: 100%;
     height: 100%;
-`,b=l.default.div`
+`,y=l.default.div`
     flex: 0 0 100%;
     box-sizing: border-box;
     display: flex;
@@ -149,7 +149,7 @@
         height: 100%;
         width: 100%;
     }
-`,y=l.default.div`
+`,w=l.default.div`
     height: 100%;
     width: 100%;
     outline: none;
@@ -162,17 +162,17 @@
         outline: ${o.Border["width-020"]} solid ${o.Colour["border-selected"]};
         outline-offset: -2px;
     }
-`,w=l.default(n.StatefulImage)`
+`,v=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
     border-radius: ${o.Radius.none};
-`,v=l.default(t.ImagePlaceholder)`
+`,S=l.default(t.ImagePlaceholder)`
     width: 60vw;
     height: auto;
     max-height: 100%;
     border-radius: ${o.Radius.none};
     aspect-ratio: 4 / 3;
-`,S=l.default.div`
+`,C=l.default.div`
     display: flex;
     justify-content: center;
     padding: ${o.Spacing["spacing-16"]};
@@ -183,7 +183,7 @@
     margin-left: auto;
     margin-right: auto;
     z-index: 3;
-`,C=l.default(a.Typography.BodyXS)`
+`,B=l.default(a.Typography.BodyXS)`
     display: inline-flex;
     padding: ${o.Spacing["spacing-4"]} ${o.Spacing["spacing-16"]};
     justify-content: center;
@@ -212,7 +212,7 @@
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-`,B=l.default.div`
+`,j=l.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -223,7 +223,7 @@
         height: 64px;
         width: 64px;
     }
-`,j=l.default.div`
+`,T=l.default.div`
     cursor: pointer;
     background-color: ${o.Colour["bg-inverse"]};
     border-radius: ${o.Radius.md};
@@ -261,10 +261,10 @@
                       border-color: ${o.Colour["border-hover"]};
                   }
               `};
-`,T=l.default(n.StatefulImage)`
+`,k=l.default(n.StatefulImage)`
     height: 100%;
     width: 100%;
-`,k=l.default.div`
+`,R=l.default.div`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -278,17 +278,17 @@
     ${i=>i.$centerContent&&e.css`
             justify-content: center;
         `}
-`,R=l.default(a.Typography.BodyBL)`
+`,W=l.default(a.Typography.BodyBL)`
     color: ${o.Colour["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`,W=l.default(a.Typography.BodyMD)`
+`,F=l.default(a.Typography.BodyMD)`
     color: ${o.Colour["text-inverse"]};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;
-`;exports.ArrowButton=h,exports.BoxChip=S,exports.CarouselModalContent=u,exports.Chip=C,exports.CloseButton=p,exports.DeleteButton=c,exports.FileInfoFileName=R,exports.FileInfoFileSize=W,exports.FileInfoTextWrapper=k,exports.FocusableImageRegion=y,exports.ImageGalleryContainer=$,exports.ImageGallerySlide=b,exports.ImageGallerySlides=m,exports.ImageGallerySwipe=x,exports.ImageGalleryWrapper=f,exports.MagnifierButton=g,exports.SlideImage=w,exports.SlidePlaceholderImage=v,exports.ThumbnailContainer=I,exports.ThumbnailImage=T,exports.ThumbnailItem=j,exports.ThumbnailItemContainer=B,exports.ThumbnailWrapper=M,exports.TopActionButtons=d;
+`;exports.ArrowButton=u,exports.BoxChip=C,exports.CarouselModalContent=$,exports.Chip=B,exports.CloseButton=p,exports.CustomActionButton=h,exports.DeleteButton=c,exports.FileInfoFileName=W,exports.FileInfoFileSize=F,exports.FileInfoTextWrapper=R,exports.FocusableImageRegion=w,exports.ImageGalleryContainer=f,exports.ImageGallerySlide=y,exports.ImageGallerySlides=b,exports.ImageGallerySwipe=m,exports.ImageGalleryWrapper=x,exports.MagnifierButton=g,exports.SlideImage=v,exports.SlidePlaceholderImage=S,exports.ThumbnailContainer=I,exports.ThumbnailImage=k,exports.ThumbnailItem=T,exports.ThumbnailItemContainer=j,exports.ThumbnailWrapper=M,exports.TopActionButtons=d;
 //# sourceMappingURL=fullscreen-image-carousel.style.js.map

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"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"}
+{"version":3,"file":"fullscreen-image-carousel.style.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { InsetStyleProps } from \"../shared/types\";\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StatefulImage } from \"./stateful-image\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface ArrowButtonStyleProps extends InsetStyleProps {\n    $position: \"left\" | \"right\";\n}\n\ninterface ThumbnailItemStyleProps {\n    $active?: boolean;\n}\n\ninterface TopActionButtonsStyleProps extends InsetStyleProps {\n    $hasFileInfo?: boolean | undefined;\n}\n\ninterface FileInfoTextWrapperStyleProps {\n    $centerContent?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst IconButton = styled(ClickableIcon)`\n    padding: 0;\n    border-radius: 100%;\n    background: ${Colour[\"bg\"]};\n    color: ${Colour[\"icon-primary\"]};\n    height: 2.5rem;\n    width: 2.5rem;\n    box-shadow: ${Shadow[\"md-strong\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: 2px;\n    }\n`;\n\nexport const TopActionButtons = styled.div<TopActionButtonsStyleProps>`\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    ${(props) =>\n        props.$hasFileInfo\n            ? css`\n                  flex-shrink: 0;\n                  background-color: ${Colour[\"bg-inverse\"]};\n                  padding-top: calc(\n                      ${Spacing[\"spacing-24\"]} + ${props.$insetTop || 0}px\n                  );\n                  padding-bottom: ${Spacing[\"spacing-24\"]};\n                  padding-left: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetLeft || 0}px\n                  );\n                  padding-right: calc(\n                      ${Spacing[\"spacing-32\"]} + ${props.$insetRight || 0}px\n                  );\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      padding-top: calc(\n                          ${Spacing[\"spacing-16\"]} + ${props.$insetTop || 0}px\n                      );\n                      padding-bottom: ${Spacing[\"spacing-16\"]};\n                      padding-left: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                      );\n                      padding-right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `\n            : css`\n                  position: absolute;\n                  top: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetTop || 0}px\n                  );\n                  right: calc(\n                      ${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px\n                  );\n                  z-index: 5;\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      top: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetTop || 0}px\n                      );\n                      right: calc(\n                          ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                      );\n                  }\n              `}\n`;\n\nexport const CloseButton = styled(IconButton)``;\n\nexport const DeleteButton = styled(IconButton)`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const MagnifierButton = styled(IconButton)``;\n\nexport const CustomActionButton = styled(IconButton)``;\n\nexport const ArrowButton = styled(IconButton)<ArrowButtonStyleProps>`\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n\n    ${(props) =>\n        props.$position === \"left\" &&\n        css`\n            left: calc(${Spacing[\"spacing-48\"]} + ${props.$insetLeft || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                left: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetLeft || 0}px\n                );\n            }\n        `}\n\n    ${(props) =>\n        props.$position === \"right\" &&\n        css`\n            right: calc(${Spacing[\"spacing-48\"]} + ${props.$insetRight || 0}px);\n\n            ${MediaQuery.MaxWidth.sm} {\n                right: calc(\n                    ${Spacing[\"spacing-20\"]} + ${props.$insetRight || 0}px\n                );\n            }\n        `}\n`;\n\nexport const CarouselModalContent = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const ImageGalleryContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGalleryWrapper = styled.div`\n    user-select: none;\n    position: relative;\n    display: block;\n    overflow: hidden;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const ImageGallerySwipe = styled.div`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const ImageGallerySlides = styled.div`\n    display: flex;\n    transition: all 450ms ease-out 0s;\n    position: relative;\n    text-align: center;\n    user-select: none;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const ImageGallerySlide = styled.div`\n    flex: 0 0 100%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .react-transform-wrapper {\n        height: 100%;\n        width: 100%;\n    }\n\n    .react-transform-component {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const FocusableImageRegion = styled.div`\n    height: 100%;\n    width: 100%;\n    outline: none;\n\n    &:focus {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-020\"]} solid ${Colour[\"border-selected\"]};\n        outline-offset: -2px;\n    }\n`;\n\nexport const SlideImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const SlidePlaceholderImage = styled(ImagePlaceholder)`\n    width: 60vw;\n    height: auto;\n    max-height: 100%;\n    border-radius: ${Radius[\"none\"]};\n    aspect-ratio: 4 / 3;\n`;\n\nexport const BoxChip = styled.div`\n    display: flex;\n    justify-content: center;\n    padding: ${Spacing[\"spacing-16\"]};\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin-left: auto;\n    margin-right: auto;\n    z-index: 3;\n`;\n\nexport const Chip = styled(Typography.BodyXS)`\n    display: inline-flex;\n    padding: ${Spacing[\"spacing-4\"]} ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    align-items: center;\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg\"]};\n    text-align: center;\n`;\n\n// -----------------------------------------------------------------------------\n// THUMBNAIL STYLING\n// -----------------------------------------------------------------------------\n\nexport const ThumbnailContainer = styled.div<InsetStyleProps>`\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-24\"]} ${Spacing[\n                    \"spacing-16\"\n                ]} calc(${Spacing[\"spacing-24\"]} + ${props.$insetBottom ||\n                0}px);\n            `}\n        ${MediaQuery.MaxWidth.sm} {\n        padding: ${(props) =>\n            css`\n                ${Spacing[\"spacing-16\"]} ${Spacing[\n                    \"spacing-20\"\n                ]} calc(${Spacing[\"spacing-16\"]} + ${props.$insetBottom ||\n                0}px);\n            `};\n    }\n`;\n\nexport const ThumbnailWrapper = styled.div`\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    justify-content: center;\n    margin-left: auto;\n    margin-right: auto;\n`;\n\nexport const ThumbnailItemContainer = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100px;\n    width: 100px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 64px;\n        width: 64px;\n    }\n`;\n\nexport const ThumbnailItem = styled.div<ThumbnailItemStyleProps>`\n    cursor: pointer;\n    background-color: ${Colour[\"bg-inverse\"]};\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"solid\"]} transparent;\n    box-sizing: content-box;\n\n    flex-shrink: 0;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 92px;\n    width: 92px;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: 60px;\n        width: 60px;\n    }\n\n    ${(props) =>\n        props.$active\n            ? css`\n                  border-width: ${Border[\"width-040\"]};\n                  border-color: ${Colour[\"border-selected\"]};\n\n                  ${MediaQuery.MaxWidth.sm} {\n                      border-width: ${Border[\"width-020\"]};\n                  }\n\n                  &:hover {\n                      border-color: ${Colour[\"border-selected-hover\"]};\n                  }\n              `\n            : css`\n                  border-width: ${Border[\"width-010\"]};\n\n                  &:hover {\n                      border-color: ${Colour[\"border-hover\"]};\n                  }\n              `};\n`;\n\nexport const ThumbnailImage = styled(StatefulImage)`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const FileInfoTextWrapper = styled.div<FileInfoTextWrapperStyleProps>`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n    overflow: hidden;\n    min-width: 0;\n    min-height: calc(\n        ${Font.Spec[\"body-lh-baseline\"]} + ${Spacing[\"spacing-8\"]} +\n            ${Font.Spec[\"body-lh-md\"]}\n    );\n    ${(props) =>\n        props.$centerContent &&\n        css`\n            justify-content: center;\n        `}\n`;\n\nexport const FileInfoFileName = styled(Typography.BodyBL)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n\nexport const FileInfoFileSize = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["IconButton","styled","ClickableIcon","Colour","Shadow","Border","TopActionButtons","div","Spacing","props","$hasFileInfo","css","$insetTop","$insetLeft","$insetRight","MediaQuery","MaxWidth","sm","CloseButton","DeleteButton","MagnifierButton","CustomActionButton","ArrowButton","$position","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","ImageGallerySlides","ImageGallerySlide","FocusableImageRegion","SlideImage","StatefulImage","Radius","SlidePlaceholderImage","ImagePlaceholder","BoxChip","Chip","Typography","BodyXS","ThumbnailContainer","$insetBottom","ThumbnailWrapper","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","FileInfoTextWrapper","Font","Spec","$centerContent","FileInfoFileName","BodyBL","FileInfoFileSize","BodyMD"],"mappings":"kWAsCA,MAAMA,EAAaC,EAAAA,QAAOC,EAAAA,cAAc;;;kBAGtBC,EAAAA,OAAW;aAChBA,EAAAA,OAAO;;;kBAGFC,EAAAA,OAAO;;;;;;;;;;;;mBAYNC,EAAAA,OAAO,sBAAsBF,EAAAA,OAAO;;;EAK1CG,EAAmBL,EAAAA,QAAOM,GAA+B;;;;;WAK3DC,EAAAA,QAAQ;;MAEZC,GACCA,EAAMC,aACAC,KAAG;;sCAEqBR,EAAAA,OAAO;;wBAErBK,EAAAA,QAAQ,mBAAmBC,EAAMG,WAAa;;oCAElCJ,EAAAA,QAAQ;;wBAEpBA,EAAAA,QAAQ,mBAAmBC,EAAMI,YAAc;;;wBAG/CL,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;;oBAGpDC,EAAAA,WAAWC,SAASC;;4BAEZT,EAAAA,QAAQ,mBAAmBC,EAAMG,WAAa;;wCAElCJ,EAAAA,QAAQ;;4BAEpBA,EAAAA,QAAQ,mBAAmBC,EAAMI,YAAc;;;4BAG/CL,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;;gBAI9DH,KAAG;;;wBAGOH,EAAAA,QAAQ,mBAAmBC,EAAMG,WAAa;;;wBAG9CJ,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;;;oBAIpDC,EAAAA,WAAWC,SAASC;;4BAEZT,EAAAA,QAAQ,mBAAmBC,EAAMG,WAAa;;;4BAG9CJ,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;;;EAM/DI,EAAcjB,EAAAA,QAAOD,EAAW,GAEhCmB,EAAelB,EAAAA,QAAOD,EAAW;aACjCG,EAAAA,OAAO;EAGPiB,EAAkBnB,EAAAA,QAAOD,EAAW,GAEpCqB,EAAqBpB,EAAAA,QAAOD,EAAW,GAEvCsB,EAAcrB,EAAAA,QAAOD,EAAkC;;;;;;MAM7DS,GACqB,SAApBA,EAAMc,WACNZ,KAAG;yBACcH,EAAAA,QAAQ,mBAAmBC,EAAMI,YAAc;;cAE1DE,EAAAA,WAAWC,SAASC;;sBAEZT,EAAAA,QAAQ,mBAAmBC,EAAMI,YAAc;;;;;MAK9DJ,GACqB,UAApBA,EAAMc,WACNZ,KAAG;0BACeH,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;cAE5DC,EAAAA,WAAWC,SAASC;;sBAEZT,EAAAA,QAAQ,mBAAmBC,EAAMK,aAAe;;;;EAMzDU,EAAuBvB,EAAAA,QAAOM,GAAG;;;;;;EAQjCkB,EAAwBxB,EAAAA,QAAOM,GAAG;;;;;;EAQlCmB,EAAsBzB,EAAAA,QAAOM,GAAG;;;;;;;;EAUhCoB,EAAoB1B,EAAAA,QAAOM,GAAG;;;;;;EAQ9BqB,EAAqB3B,EAAAA,QAAOM,GAAG;;;;;;;;EAU/BsB,EAAoB5B,EAAAA,QAAOM,GAAG;;;;;;;;;;;;;;;;EAkB9BuB,EAAuB7B,EAAAA,QAAOM,GAAG;;;;;;;;;;mBAU3BF,EAAAA,OAAO,sBAAsBF,EAAAA,OAAO;;;EAK1C4B,EAAa9B,EAAAA,QAAO+B,EAAAA,cAAc;;;qBAG1BC,EAAAA,OAAa;EAGrBC,EAAwBjC,EAAAA,QAAOkC,EAAAA,iBAAiB;;;;qBAIxCF,EAAAA,OAAa;;EAIrBG,EAAUnC,EAAAA,QAAOM,GAAG;;;eAGlBC,EAAAA,QAAQ;;;;;;;;EAUV6B,EAAOpC,EAAAA,QAAOqC,aAAWC,OAAO;;eAE9B/B,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;;qBAG1ByB,EAAAA,OAAa;wBACV9B,EAAAA,OAAW;;EAQtBqC,EAAqBvC,EAAAA,QAAOM,GAAoB;;;;wBAIrCJ,EAAAA,OAAO;eACfM,GACJE,KAAG;kBACGH,EAAAA,QAAQ,iBAAiBA,EAAAA,QACvB,sBACMA,EAAAA,QAAQ,mBAAmBC,EAAMgC,cAC3C;;UAEN1B,EAAAA,WAAWC,SAASC;mBACVR,GACRE,KAAG;kBACGH,EAAAA,QAAQ,iBAAiBA,EAAAA,QACvB,sBACMA,EAAAA,QAAQ,mBAAmBC,EAAMgC,cAC3C;;;EAKHC,EAAmBzC,EAAAA,QAAOM,GAAG;;;;WAI/BC,EAAAA,QAAQ;;;;EAMNmC,EAAyB1C,EAAAA,QAAOM,GAAG;;;;;;;MAO1CQ,EAAAA,WAAWC,SAASC;;;;EAMb2B,EAAgB3C,EAAAA,QAAOM,GAA4B;;wBAExCJ,EAAAA,OAAO;qBACV8B,EAAAA,OAAW;cAClB5B,EAAAA,OAAc;;;;;;;;;;;MAWtBU,EAAAA,WAAWC,SAASC;;;;;MAKnBR,GACCA,EAAMoC,QACAlC,KAAG;kCACiBN,EAAAA,OAAO;kCACPF,EAAAA,OAAO;;oBAErBY,EAAAA,WAAWC,SAASC;sCACFZ,EAAAA,OAAO;;;;sCAIPF,EAAAA,OAAO;;gBAG/BQ,KAAG;kCACiBN,EAAAA,OAAO;;;sCAGHF,EAAAA,OAAO;;;EAKhC2C,EAAiB7C,EAAAA,QAAO+B,EAAAA,cAAc;;;EAStCe,EAAsB9C,EAAAA,QAAOM,GAAkC;;;;WAIjEC,EAAAA,QAAQ;;;;UAITwC,EAAAA,KAAKC,KAAK,yBAAyBzC,EAAAA,QAAQ;cACvCwC,EAAAA,KAAKC,KAAK;;MAEjBxC,GACCA,EAAMyC,gBACNvC,KAAG;;;EAKEwC,EAAmBlD,EAAAA,QAAOqC,aAAWc,OAAO;aAC5CjD,EAAAA,OAAO;;;;;EAOPkD,EAAmBpD,EAAAA,QAAOqC,aAAWgB,OAAO;aAC5CnD,EAAAA,OAAO;;;;;"}

package/cjs/masthead/masthead.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../external/@govtechsg/sgds-web-component/themes/day.css.js"),require("../external/@govtechsg/sgds-web-component/themes/night.css.js");var t=require("react"),s=require("styled-components"),n=require("./masthead.style.js");const d=t.memo((({stretch:d=!1})=>{const m=t.useContext(s.ThemeContext),a="dark"===(null==m?void 0:m.colourMode);t.useEffect((()=>{u()||h()}),[]),t.useEffect((()=>{a?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[a]);const u=()=>document.getElementById(c),h=()=>{if(!document.getElementById(c)){const e=document.createElement("script");e.id=c,e.type="module",e.src=r,document.head.appendChild(e)}};return e.jsx(n.Wrapper,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:d})})),c="lifesg-ds-masthead-script",r="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",o="sgds-night-theme";exports.Masthead=d;
+"use strict";var e=require("react/jsx-runtime");require("../external/@govtechsg/sgds-web-component/themes/day.css.js"),require("../external/@govtechsg/sgds-web-component/themes/night.css.js");var s=require("react"),t=require("styled-components"),r=require("./masthead.style.js");const n=s.memo((({stretch:n=!1})=>{const c=s.useContext(t.ThemeContext),a="dark"===(null==c?void 0:c.colourMode);s.useEffect((()=>{Promise.resolve().then((function(){return require("../external/@govtechsg/sgds-web-component/components/Masthead/index.js")}))}),[]),s.useEffect((()=>{a?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[a]);return e.jsx(r.Wrapper,{dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"},$stretch:n})})),o="sgds-night-theme";exports.Masthead=n;
 //# sourceMappingURL=masthead.js.map

package/cjs/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"uRAOA,MA8DaA,EAAWC,EAAAA,MA9DE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,EAAAA,IAACC,EAAAA,QAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAY7B,GAAW,IAS1EgB,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\nimport { memo, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\nimport { Wrapper } from \"./masthead.style\";\nimport { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        import(\"@govtechsg/sgds-web-component/components/Masthead/index.js\");\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper dangerouslySetInnerHTML={createContent()} $stretch={stretch} />\n    );\n};\n\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","theme","useContext","ThemeContext","isDarkMode","colourMode","useEffect","Promise","resolve","then","require","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","_jsx","Wrapper","dangerouslySetInnerHTML","__html","$stretch"],"mappings":"uRAOA,MA6CaA,EAAWC,EAAAA,MA7CE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACNC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,QAAO,yEAA4D,GAAC,GACrE,IAEHJ,EAAAA,WAAU,KAEFF,EACAO,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACX,IAoBJ,OACIa,EAAAA,IAACC,EAAAA,QAAO,CAACC,wBARF,CAAEC,OAAQ,mCAQgCC,SAAYrB,GAAW,IAS1Ee,EAA6B"}

package/cjs/navbar/menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),r=require("./menu.styles.js");exports.Menu=({items:t,onItemClick:i})=>{const s=e=>n=>{n.stopPropagation(),i(n,e)};return(null==t?void 0:t.length)?n.jsx(r.MobileWrapper,{children:t.map(((t,i)=>{const{children:l,options:o}=t,u=e.__rest(t,["children","options"]),c=`menu__mobile-${i+1}`;return n.jsx(r.MenuItem,{children:n.jsx(r.Link,Object.assign({"data-testid":c},u,o,{onClick:s(t),underlineStyle:"none",children:l}))},i)}))}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("./menu.styles.js");exports.Menu=({items:r,selectedId:n,onItemClick:s})=>{const l=e=>t=>{t.stopPropagation(),s(t,e)};return(null==r?void 0:r.length)?t.jsx(i.MobileWrapper,{children:r.map(((r,s)=>{const{children:o,options:u,weight:a}=r,c=e.__rest(r,["children","options","weight"]),d=`menu__mobile-${s+1}`,h=r.id===n;return t.jsx(i.MenuItem,{children:t.jsx(i.Link,Object.assign({"data-testid":d},c,u,{weight:h?"bold":a,"aria-current":h?"page":void 0,onClick:l(r),underlineStyle:"none",children:o}))},s)}))}):t.jsx(t.Fragment,{})};
 //# sourceMappingURL=menu.js.map

package/cjs/navbar/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8HAYoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAAA,OAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,MAACS,EAAAA,SAAQ,CAAAP,SACLF,EAAAA,IAACU,OAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,EAAAA,kBAsBP"}
+{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    selectedId?: string | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({\n    items,\n    selectedId,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, weight, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n                const selected = item.id === selectedId;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            weight={selected ? \"bold\" : weight}\n                            aria-current={selected ? \"page\" : undefined}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["items","selectedId","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","weight","otherItemAttrs","__rest","testId","selected","id","MenuItem","Link","Object","assign","undefined","onClick","underlineStyle"],"mappings":"8HAaoB,EAChBA,QACAC,aACAC,kBAEA,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKJ,aAAK,EAALA,EAAOO,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTV,EAAMW,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,EAAOC,OAAEA,GAA8BV,EAAnBW,EAAcC,EAAAA,OAAKZ,EAAnD,CAAA,WAAA,UAAA,WACAa,EAAS,gBAAgBL,EAAQ,IACjCM,EAAWd,EAAKe,KAAOlB,EAE7B,OACIO,EAAAA,IAACY,EAAAA,SAAQ,CAAAV,SACLF,EAAAA,IAACa,EAAAA,KAAIC,OAAAC,OAAA,CAAA,cACYN,GACTF,EACAF,GACJC,OAAQI,EAAW,OAASJ,EAAM,eACpBI,EAAW,YAASM,EAClCC,QAAStB,EAAgBC,GACzBsB,eAAe,OAAMhB,SAEpBA,MAVME,EAYJ,MAtBAJ,EAAAA,kBAyBP"}

package/cjs/navbar/menu.styles.js

@@ -19,7 +19,7 @@
 
     // use border, as padding still shows an extra line after the ellipsis
     border: ${t.Border.solid} transparent;
-    border-width: ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-8"]};
+    border-width: 10px ${t.Spacing["spacing-16"]} 10px ${t.Spacing["spacing-24"]};
     border-radius: ${t.Radius.md};
 
     ${r.lineClampCss(2)}

package/cjs/navbar/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;oBACRO,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;qBAChCC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}
+{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: 10px ${Spacing[\"spacing-16\"]} 10px ${Spacing[\"spacing-24\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;yBACHO,EAAAA,QAAQ,sBAAsBA,EAAAA,QAAQ;qBAC1CC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}

package/cjs/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),t=require("../menu/menu.js"),r=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(-1),[x,m]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),$=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(m(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const k=(e,n)=>i=>{var t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(h===n&&x);j(n),m(e)}p(i,e)},L=(e,n)=>{e.stopPropagation(),p(e,n),m(!1),j(-1)},f=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(r.Menu,{items:e,onItemClick:L}),q=(i,r)=>{const{children:s,options:p,subMenu:j}=i,m=e.__rest(i,["children","options","subMenu"]),v=!!(null==j?void 0:j.length),L=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),q=u&&v&&h===r&&x,M=!u&&v&&b===r||q,C=null!==b?b===r:L,_=!c&&C,O=C?u?"bold":"semibold":"regular",w=u?`link__mobile-${r+1}`:`link__${r+1}`,E=()=>_?n.jsx(l.LinkIndicator,{"data-testid":`${w}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:v?(e=>{const a=`navbar-submenu-${$}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":w,$weight:O,$selected:C},m,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:k(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),E(),u&&v?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${w}-expand-collapse-button`,$selected:C,$expanded:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),q&&I(j)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:f(j,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":w,$weight:O,$selected:C,"aria-haspopup":"menu","aria-expanded":M},p,{children:[n.jsx(l.LinkLabel,{children:s}),E(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:M})]}))})})(r===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":w,$weight:O,$selected:C},m,{"aria-current":L?"page":void 0,onClick:k(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),E()]}))},r)},M=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):q(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(null),m=i.useRef(null),x=s.useId(),b=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===d)))},v=u?a.findIndex((e=>"component"!==e.itemType&&b(e))):-1,g=v<0?null:v;i.useEffect((()=>{u&&j(g)}),[u,g]),i.useEffect((()=>{if(u)return;const e=e=>{m.current&&!m.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[u]);const $=(e,n)=>i=>{i.stopPropagation(),u&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),p(i,e)},k=(e,n)=>{e.stopPropagation(),p(e,n)},L=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),f=e=>n.jsx(t.Menu,{items:e,selectedId:d,onItemClick:k}),I=(i,t)=>{const{children:s,options:p,subMenu:m}=i,v=e.__rest(i,["children","options","subMenu"]),g=!!(null==m?void 0:m.length),k=(e=>e.id===d||b(e))(i),I=u&&g&&h===t,q=!u&&g&&h===t||I,C=u||null===h?k:h===t,M=!c&&C,_=C?u?"bold":"semibold":"regular",E=u?`link__mobile-${t+1}`:`link__${t+1}`,O=()=>M?n.jsx(l.LinkIndicator,{"data-testid":`${E}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:g?(e=>{const a=`navbar-submenu-${x}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,"aria-haspopup":"menu","aria-expanded":q,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),u&&g?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${E}-expand-collapse-button`,$selected:C,$expanded:q,focusHighlight:!1,focusOutline:"browser","aria-label":q?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),I&&f(m)]}):n.jsx(r.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:L(m,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(t)},onPopoverDismiss:()=>{j((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":E,$weight:_,$selected:C,"aria-haspopup":"menu","aria-expanded":q},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:q})]}))})})(t===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O()]}))},t)},q=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:m,children:q()}):n.jsx(l.Wrapper,{ref:m,$alignLeft:o,children:q()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map