@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.3

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("react"),r=require("react-zoom-pan-pinch"),l=require("../modal/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/string-helper.js");var s=require("../util/use-event-listener.js"),o=require("./fullscreen-image-carousel.style.js");const a=n.forwardRef(((a,d)=>{var{items:u,initialActiveItemIndex:c,hideThumbnail:h=!1,hideNavigation:m=!1,hideCounter:v=!1,hideMagnifier:g=!1,onClose:f,insets:j}=a,x=e.__rest(a,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onClose","insets"]);const[p,I]=n.useState(null!=c?c:0),[b,C]=n.useState({}),[T,$]=n.useState(1),[w,S]=n.useState(),[y,q]=n.useState(),R=n.useRef(null),k=n.useRef([]),M=n.useRef([]),A=w&&y?w-y:0;n.useImperativeHandle(d,(()=>({currentItemIndex:p,setCurrentItem:H,goToPrevItem:L,goToNextItem:E}))),s.useEventListener("keydown",(function(e){"ArrowRight"===e.key?E():"ArrowLeft"===e.key?L():"Escape"===e.key&&(null==f||f())}),"document"),n.useEffect((()=>{var e,i;null===(i=null===(e=k.current)||void 0===e?void 0:e[p])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),$(1)}),[p]);const B=e=>{$(e.state.scale)};const W=({src:e,height:i,width:t})=>{C((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},G=()=>{const e=b[u[p].src];if(R.current&&e){const{clientHeight:i,clientWidth:t}=R.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))}},L=()=>{var e,i;null===(i=null===(e=M.current)||void 0===e?void 0:e[p])||void 0===i||i.resetTransform(),I((e=>0===e?u.length-1:e-1))},E=()=>{var e,i;null===(i=null===(e=M.current)||void 0===e?void 0:e[p])||void 0===i||i.resetTransform(),I((e=>e===u.length-1?0:e+1))},H=e=>{var i,t;null===(t=null===(i=M.current)||void 0===i?void 0:i[p])||void 0===t||t.resetTransform(),I(e)};return i.jsxs(l.Modal,Object.assign({},x,{"data-testid":"image-carousel-modal",children:[i.jsx(o.CloseButton,{"aria-label":"Close image carousel",onClick:f,focusHighlight:!1,$insetTop:null==j?void 0:j.top,$insetRight:null==j?void 0:j.right,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})}),!g&&i.jsx(o.MagnifierButton,{"aria-label":1===T?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===T){const t=G();null===(i=null===(e=M.current)||void 0===e?void 0:e[p])||void 0===i||i.centerView(t),$(null!=t?t:1)}else $(1),null===(n=null===(t=M.current)||void 0===t?void 0:t[p])||void 0===n||n.resetTransform()},focusHighlight:!1,$insetTop:null==j?void 0:j.top,$insetRight:null==j?void 0:j.right,children:1===T?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),i.jsxs(o.ImageGalleryContainer,{children:[i.jsxs(o.ImageGalleryWrapper,{children:[!m&&i.jsxs(i.Fragment,{children:[i.jsx(o.ArrowButton,{"aria-label":"View previous image","data-testid":"prev-btn",$position:"left",onClick:L,$insetLeft:null==j?void 0:j.left,$insetRight:null==j?void 0:j.right,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(o.ArrowButton,{"aria-label":"View next image","data-testid":"forward-btn",$position:"right",onClick:E,$insetLeft:null==j?void 0:j.left,$insetRight:null==j?void 0:j.right,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),i.jsx(o.ImageGallerySwipe,{ref:R,onTouchStart:e=>{T<=1&&S(e.touches[0].clientX)},onTouchMove:e=>{!w||T>1||q(e.touches[0].clientX)},onTouchEnd:()=>{R.current&&(Math.abs(A)>R.current.offsetWidth/3&&(A>0?E():L()),S(void 0),q(void 0))},children:i.jsx(o.ImageGallerySlides,{style:{transform:`translateX(calc(${100*-p}% - ${A}px))`},children:u.map(((e,t)=>{var n;return i.jsx(o.ImageGallerySlide,{"data-testid":"slide-item",children:i.jsx(r.TransformWrapper,{ref:e=>M.current[t]=e,panning:{disabled:T<=1},initialScale:1,onZoom:B,onZoomStop:B,onWheel:B,children:i.jsx(r.TransformComponent,{children:i.jsx(o.SlideImage,{src:e.src,alt:null!==(n=e.alt)&&void 0!==n?n:`Image ${t+1}`,placeholder:i.jsx(o.SlidePlaceholderImage,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:W})})})},t)}))})}),!v&&i.jsx(o.BoxChip,{children:i.jsx(o.Chip,{weight:"semibold",children:`${p+1}/${u.length}`})})]}),!h&&i.jsx(o.ThumbnailContainer,{$insetBottom:null==j?void 0:j.bottom,children:i.jsx(o.ThumbnailWrapper,{children:u.map(((e,t)=>{var n;const r=null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i.jsx(o.ThumbnailItemContainer,{children:i.jsx(o.ThumbnailItem,{"data-testid":"thumbnail-item",$active:t===p,onClick:()=>H(t),ref:e=>k.current[t]=e,children:i.jsx(o.ThumbnailImage,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"})})},t)}))})})]})]}))}));exports.FullscreenImageCarousel=a;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("@lifesg/react-icons/bin"),a=require("@react-aria/live-announcer"),l=require("clsx"),n=require("react"),s=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),u=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/hooks/use-state-callback.js");require("../external/lodash/_root.js"),require("../external/lodash/_baseGetTag.js");var d=require("../shared/image-placeholder/image-placeholder.js");require("../theme/theme-provider/index.js");var m=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var v=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var f=require("../util/use-event-listener.js"),g=require("./fullscreen-image-carousel.styles.js"),p=require("./stateful-image.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(l);const b=e=>!!e&&"custom"===e.type,I=(l,j)=>{var I,{items:y,initialActiveItemIndex:C,hideThumbnail:N=!1,hideNavigation:q=!1,hideCounter:k=!1,hideMagnifier:w=!1,onDelete:S,onClose:B,insets:T,show:R}=l,A=e.__rest(l,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[$,M]=c.useStateCallback(null!=C?C:0),[L,P]=n.useState({}),[V,W]=n.useState(1),[E,D]=n.useState(),[G,U]=n.useState(),_=n.useRef(null),z=n.useRef([]),F=n.useRef([]),X=n.useRef(null),Z=n.useRef(null),O=n.useRef(null),H=n.useRef(null),J=n.useRef(null),K=E&&G?E-G:0,Q=y[$],Y=y.some((e=>{var i;return b(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),ee=Y?"item":"image",ie=n.useMemo((()=>y.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())}))),[y]);h.useApplyStyle(Z,{[g.tokens.topActionButtons.insetTop]:m.formatUnitValue(null==T?void 0:T.top,"px"),[g.tokens.topActionButtons.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px"),[g.tokens.topActionButtons.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(O,{[g.tokens.arrowButton.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px")}),h.useApplyStyle(H,{[g.tokens.arrowButton.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(J,{[g.tokens.thumbnailContainer.insetBottom]:m.formatUnitValue(null==T?void 0:T.bottom,"px")});const te=n.useCallback((e=>{var i,t;const r=y[e],a=Y?"Item":"Image",l=b(r)?(null===(i=r.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=r.alt)||void 0===t?void 0:t.trim())||"",n=`${a} ${e+1} of ${y.length}.`;return l?`${l}. ${n}`:n}),[y,Y]);n.useImperativeHandle(j,(()=>({currentItemIndex:$,setCurrentItem:oe,goToPrevItem:ne,goToNextItem:se}))),f.useEventListener("keydown",(function(e){"ArrowRight"===e.key?se():"ArrowLeft"===e.key?ne():"Escape"===e.key&&(null==B||B())}),"document"),n.useEffect((()=>{var e;R&&(null===(e=X.current)||void 0===e||e.focus())}),[R]),n.useEffect((()=>{0!==y.length?$>y.length-1&&M(y.length-1):M(0)}),[$,y.length,M]),n.useEffect((()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[$])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),W(1)}),[$]);const re=e=>{W(e.state.scale)};const ae=({src:e,height:i,width:t})=>{P((r=>Object.assign(Object.assign({},r),{[e]:{height:i,width:t}})))},le=()=>{if(!Q||b(Q))return;const e=L[Q.src];if(_.current&&e){const{clientHeight:i,clientWidth:t}=_.current,{width:r,height:a}=e,l=a/r<i/t;return r<t&&a<i?l?t/r:i/a:l?i/(a/(r/t)):t/(r/(a/i))}},ne=()=>{var e,i;null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>0===e?y.length-1:e-1),(e=>{a.clearAnnouncer("polite"),a.announce(te(e),"polite")}))},se=()=>{var e,i;null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>e===y.length-1?0:e+1),(e=>{a.clearAnnouncer("polite"),a.announce(te(e),"polite")}))},oe=e=>{var i,t;null===(t=null===(i=F.current)||void 0===i?void 0:i[$])||void 0===t||t.resetTransform(),M(e)};return i.jsx(o.ModalV2,Object.assign({},A,{"data-testid":"image-carousel-modal","aria-label":Y?"Carousel":"Image carousel",show:R,disableInitialFocus:!0,children:i.jsxs("div",{className:g.carouselModalContent,children:[i.jsxs("div",{className:g.imageGalleryContainer,children:[i.jsxs("div",{className:g.imageGalleryWrapper,children:[i.jsx("div",{className:g.imageGallerySwipe,ref:_,onTouchStart:e=>{V<=1&&D(e.touches[0].clientX)},onTouchMove:e=>{!E||V>1||U(e.touches[0].clientX)},onTouchEnd:()=>{_.current&&(Math.abs(K)>_.current.offsetWidth/3&&(K>0?se():ne()),D(void 0),U(void 0))},children:i.jsx("div",{className:g.imageGallerySlides,style:{transform:`translateX(calc(${100*-$}% - ${K}px))`},children:y.map(((e,t)=>{const r=t===$,a=Math.abs(t-$)<=1||0===$&&t===y.length-1||$===y.length-1&&0===t;return i.jsx("div",{className:g.imageGallerySlide,"data-testid":"slide-item",children:i.jsx("div",{className:g.focusableImageRegion,ref:r?X:null,tabIndex:r?0:-1,children:b(e)?a?e.renderContent():i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}):i.jsx(s.TransformWrapper,{ref:e=>F.current[t]=e,panning:{disabled:V<=1},initialScale:1,onZoom:re,onZoomStop:re,onWheel:re,children:i.jsx(s.TransformComponent,{children:i.jsx(p.StatefulImage,{className:g.slideImage,src:e.src,alt:te(t),placeholder:i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}),fit:"scale-down",retrieveImageDimension:!0,setDimension:ae})})})})},t)}))})}),!q&&i.jsxs(i.Fragment,{children:[i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonLeft),ref:O,"aria-label":`Previous ${ee}`,"data-testid":"prev-btn",onClick:ne,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonRight),ref:H,"aria-label":`Next ${ee}`,"data-testid":"forward-btn",onClick:se,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!k&&i.jsx("div",{className:g.boxChip,"aria-hidden":"true",children:i.jsx(v.Typography.BodyXS,{className:g.chip,weight:"semibold","data-testid":"carousel-counter",children:`${$+1}/${y.length}`})})]}),!N&&i.jsx("div",{className:g.thumbnailContainer,ref:J,"aria-hidden":"true","data-testid":"thumbnail-container",children:i.jsx("div",{className:g.thumbnailWrapper,children:y.map(((e,t)=>{var r;const a=b(e)?e.thumbnailSrc:null!==(r=e.thumbnailSrc)&&void 0!==r?r:e.src;return i.jsx("div",{className:g.thumbnailItemContainer,children:i.jsx("div",{className:g.thumbnailItem,"data-active":t===$,"data-testid":"thumbnail-item",onClick:()=>oe(t),ref:e=>z.current[t]=e,children:a?i.jsx(p.StatefulImage,{className:g.thumbnailImage,src:a,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage})})},t)}))})})]}),i.jsxs("div",{className:g.topActionButtons,ref:Z,"data-has-file-info":ie,children:[ie&&(()=>{const{fileName:e,fileSize:t}=null!=Q?Q:{},r=null==e?void 0:e.trim(),a=null==t?void 0:t.trim();return i.jsxs("div",{className:x.default(g.fileInfoTextWrapper,!a&&g.fileInfoTextWrapperCentered),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i.jsx(v.Typography.BodyBL,{className:g.fileInfoFileName,weight:"semibold","data-testid":"file-info-name",children:r}),a&&i.jsx(v.Typography.BodyMD,{className:g.fileInfoFileSize,"data-testid":"file-info-size",children:a})]})})(),!w&&!b(Q)&&i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":1===V?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,r;if(1===V){const t=le();null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.centerView(t),W(null!=t?t:1)}else W(1),null===(r=null===(t=F.current)||void 0===t?void 0:t[$])||void 0===r||r.resetTransform()},children:1===V?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),S&&i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.iconButtonError),"aria-label":`Delete ${b(Q)&&(null===(I=Q.itemLabel)||void 0===I?void 0:I.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Q&&S&&S(Q,$)},children:i.jsx(r.BinIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":Y?"Close carousel":"Close image carousel",onClick:B,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},y=n.forwardRef(I);exports.Component=I,exports.FullscreenImageCarousel=y;
 //# 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 {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { Modal } from \"../modal\";\nimport { useEventListener } from \"../util\";\nimport {\n    ArrowButton,\n    BoxChip,\n    Chip,\n    CloseButton,\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} from \"./fullscreen-image-carousel.style\";\nimport type {\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onClose,\n        insets,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useState(\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 diff = startX && endX ? startX - endX : 0;\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        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    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        const imageDimension = imagesDimension[items[currentSlide].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((prev) => (prev === 0 ? items.length - 1 : prev - 1));\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide((prev) => (prev === items.length - 1 ? 0 : prev + 1));\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                    return (\n                        <ImageGallerySlide key={index} data-testid=\"slide-item\">\n                            <TransformWrapper\n                                ref={(el) => (zoomRefs.current[index] = el)}\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={item.alt ?? `Image ${index + 1}`}\n                                        placeholder={<SlidePlaceholderImage />}\n                                        fit=\"scale-down\"\n                                        retrieveImageDimension\n                                        setDimension={setDimension}\n                                    />\n                                </TransformComponent>\n                            </TransformWrapper>\n                        </ImageGallerySlide>\n                    );\n                })}\n            </ImageGallerySlides>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <ThumbnailContainer $insetBottom={insets?.bottom}>\n                <ThumbnailWrapper>\n                    {items.map((item, index) => {\n                        const src = 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                                    <ThumbnailImage\n                                        src={src}\n                                        alt={`Thumbnail ${index + 1}`}\n                                        fit=\"cover\"\n                                    />\n                                </ThumbnailItem>\n                            </ThumbnailItemContainer>\n                        );\n                    })}\n                </ThumbnailWrapper>\n            </ThumbnailContainer>\n        );\n    };\n\n    return (\n        <Modal {...otherProps} data-testid=\"image-carousel-modal\">\n            <CloseButton\n                aria-label=\"Close image carousel\"\n                onClick={onClose}\n                focusHighlight={false}\n                $insetTop={insets?.top}\n                $insetRight={insets?.right}\n            >\n                <CrossIcon aria-hidden />\n            </CloseButton>\n            {!hideMagnifier && (\n                <MagnifierButton\n                    aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                    onClick={handleMagnifier}\n                    focusHighlight={false}\n                    $insetTop={insets?.top}\n                    $insetRight={insets?.right}\n                >\n                    {zoom === 1 ? (\n                        <MagnifierPlusIcon aria-hidden />\n                    ) : (\n                        <MagnifierMinusIcon aria-hidden />\n                    )}\n                </MagnifierButton>\n            )}\n            <ImageGalleryContainer>\n                <ImageGalleryWrapper>\n                    {!hideNavigation && (\n                        <>\n                            <ArrowButton\n                                aria-label=\"View previous image\"\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=\"View next image\"\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                    <ImageGallerySwipe\n                        ref={containerRef}\n                        onTouchStart={handleTouchStart}\n                        onTouchMove={handleTouchMove}\n                        onTouchEnd={handleTouchEnd}\n                    >\n                        {renderSlides()}\n                    </ImageGallerySwipe>\n                    {!hideCounter && (\n                        <BoxChip>\n                            <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n                                items.length\n                            }`}</Chip>\n                        </BoxChip>\n                    )}\n                </ImageGalleryWrapper>\n                {!hideThumbnail && renderThumbnails()}\n            </ImageGalleryContainer>\n        </Modal>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["FullscreenImageCarousel","forwardRef","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onClose","insets","otherProps","__rest","currentSlide","setCurrentSlide","useState","imagesDimension","setImageDimension","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","diff","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","_b","current","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","length","index","_jsxs","Modal","children","_jsx","CloseButton","onClick","focusHighlight","$insetTop","top","$insetRight","right","CrossIcon","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","ImageGalleryContainer","ImageGalleryWrapper","_Fragment","ArrowButton","$position","$insetLeft","left","ChevronLeftIcon","ChevronRightIcon","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","item","ImageGallerySlide","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","alt","placeholder","SlidePlaceholderImage","fit","retrieveImageDimension","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage"],"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 clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\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 topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = 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    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\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            <div\n                className={styles.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                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\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                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\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            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\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            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\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                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\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                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\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","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","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","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./fullscreen-image-carousel.styles_vc6y5c.css");exports.arrowButton="aay3qsa",exports.arrowButtonLeft="a1mt5dqp",exports.arrowButtonRight="a1nolxbp",exports.boxChip="b1y1lz2m",exports.carouselModalContent="c1w96xh3",exports.chip="c1q4y0yr",exports.fileInfoFileName="f1cpwiz6",exports.fileInfoFileSize="f17g5ble",exports.fileInfoTextWrapper="fytebwh",exports.fileInfoTextWrapperCentered="f1ysk79e",exports.focusableImageRegion="f1wd1tos",exports.iconButton="ijhrw4g",exports.iconButtonError="i19oam1e",exports.imageGalleryContainer="i1cp8dqy",exports.imageGallerySlide="i1p6ye8c",exports.imageGallerySlides="iwm8xb6",exports.imageGallerySwipe="i1pu33mh",exports.imageGalleryWrapper="ifd12u9",exports.slideImage="sd4ndfo",exports.slidePlaceholderImage="sd6bpod",exports.thumbnailContainer="t12djler",exports.thumbnailImage="t1uearuq",exports.thumbnailItem="tlwncl",exports.thumbnailItemContainer="t137aivh",exports.thumbnailWrapper="t15s3u6v",exports.tokens={topActionButtons:{insetTop:"--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop",insetLeft:"--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft",insetRight:"--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight"},arrowButton:{insetLeft:"--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft",insetRight:"--fds-internal-fullscreenImageCarousel-arrowButton-insetRight"},thumbnailContainer:{insetBottom:"--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom"}},exports.topActionButtons="t1d7v1ct";
+//# sourceMappingURL=fullscreen-image-carousel.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen-image-carousel.styles.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\n// =============================================================================\n// CSS VARIABLE TOKENS\n// =============================================================================\nexport const tokens = {\n    topActionButtons: {\n        insetTop:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop\",\n        insetLeft:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft\",\n        insetRight:\n            \"--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight\",\n    },\n    arrowButton: {\n        insetLeft:\n            \"--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft\",\n        insetRight:\n            \"--fds-internal-fullscreenImageCarousel-arrowButton-insetRight\",\n    },\n    thumbnailContainer: {\n        insetBottom:\n            \"--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const topActionButtons = css`\n    ${tokens.topActionButtons.insetTop}: initial;\n    ${tokens.topActionButtons.insetLeft}: initial;\n    ${tokens.topActionButtons.insetRight}: initial;\n\n    order: -1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &[data-has-file-info=\"true\"] {\n        flex-shrink: 0;\n        background-color: ${Colour[\"bg-inverse\"]};\n        padding-top: calc(\n            ${Spacing[\"spacing-24\"]} +\n                var(${tokens.topActionButtons.insetTop}, 0px)\n        );\n        padding-bottom: ${Spacing[\"spacing-24\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-32\"]} +\n                var(${tokens.topActionButtons.insetLeft}, 0px)\n        );\n        padding-right: calc(\n            ${Spacing[\"spacing-32\"]} +\n                var(${tokens.topActionButtons.insetRight}, 0px)\n        );\n\n        ${MediaQuery.MaxWidth.sm} {\n            padding-top: calc(\n                ${Spacing[\"spacing-16\"]} +\n                    var(${tokens.topActionButtons.insetTop}, 0px)\n            );\n            padding-bottom: ${Spacing[\"spacing-16\"]};\n            padding-left: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetLeft}, 0px)\n            );\n            padding-right: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetRight}, 0px)\n            );\n        }\n    }\n\n    &[data-has-file-info=\"false\"] {\n        position: absolute;\n        top: calc(\n            ${Spacing[\"spacing-48\"]} +\n                var(${tokens.topActionButtons.insetTop}, 0px)\n        );\n        right: calc(\n            ${Spacing[\"spacing-48\"]} +\n                var(${tokens.topActionButtons.insetRight}, 0px)\n        );\n        z-index: 5;\n\n        ${MediaQuery.MaxWidth.sm} {\n            top: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetTop}, 0px)\n            );\n            right: calc(\n                ${Spacing[\"spacing-20\"]} +\n                    var(${tokens.topActionButtons.insetRight}, 0px)\n            );\n        }\n    }\n`;\n\nexport const iconButton = css`\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 iconButtonError = css`\n    color: ${Colour[\"icon-error\"]};\n`;\n\nexport const arrowButton = css`\n    ${tokens.arrowButton.insetLeft}: initial;\n    ${tokens.arrowButton.insetRight}: initial;\n\n    z-index: 4;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n`;\n\nexport const arrowButtonLeft = css`\n    left: calc(\n        ${Spacing[\"spacing-48\"]} + var(${tokens.arrowButton.insetLeft}, 0px)\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        left: calc(\n            ${Spacing[\"spacing-20\"]} + var(${tokens.arrowButton.insetLeft}, 0px)\n        );\n    }\n`;\n\nexport const arrowButtonRight = css`\n    right: calc(\n        ${Spacing[\"spacing-48\"]} +\n            var(${tokens.arrowButton.insetRight}, 0px)\n    );\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: calc(\n            ${Spacing[\"spacing-20\"]} +\n                var(${tokens.arrowButton.insetRight}, 0px)\n        );\n        }\n    }\n`;\n\nexport const carouselModalContent = css`\n    position: relative;\n    width: 100%;\n    height: 100dvh;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const imageGalleryContainer = css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    flex: 1;\n    min-height: 0;\n`;\n\nexport const imageGalleryWrapper = css`\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 = css`\n    display: block;\n    user-select: none;\n    height: 100%;\n    overflow: hidden;\n    touch-action: pan-y;\n`;\n\nexport const imageGallerySlides = css`\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 = css`\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 = css`\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 = css`\n    height: 100%;\n    width: 100%;\n    border-radius: ${Radius[\"none\"]};\n`;\n\nexport const slidePlaceholderImage = css`\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 = css`\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 = css`\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 = css`\n    ${tokens.thumbnailContainer.insetBottom}: initial;\n\n    flex-shrink: 0;\n    display: flex;\n    overflow: auto;\n    background-color: ${Colour[\"bg-inverse\"]};\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-16\"]}\n        calc(\n            ${Spacing[\"spacing-24\"]} +\n                var(${tokens.thumbnailContainer.insetBottom}, 0px)\n        );\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n            calc(\n                ${Spacing[\"spacing-16\"]} +\n                    var(${tokens.thumbnailContainer.insetBottom}, 0px)\n            );\n    }\n`;\n\nexport const thumbnailWrapper = css`\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 = css`\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 = css`\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    &[data-active=\"true\"] {\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\n    &[data-active=\"false\"] {\n        border-width: ${Border[\"width-010\"]};\n\n        &:hover {\n            border-color: ${Colour[\"border-hover\"]};\n        }\n    }\n`;\n\nexport const thumbnailImage = css`\n    height: 100%;\n    width: 100%;\n`;\n\n// -----------------------------------------------------------------------------\n// FILE INFO BAR STYLING\n// -----------------------------------------------------------------------------\n\nexport const fileInfoTextWrapper = css`\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`;\n\nexport const fileInfoTextWrapperCentered = css`\n    justify-content: center;\n`;\n\nexport const fileInfoFileName = css`\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 = css`\n    color: ${Colour[\"text-inverse\"]};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    min-width: 0;\n`;\n"],"names":["topActionButtons","insetTop","insetLeft","insetRight","arrowButton","thumbnailContainer","insetBottom"],"mappings":"mIA0IwB,kCAUI,oCAYC,2BA0GT,wCA3Fa,wBAwGhB,oCA+HY,oCAQA,uCAzBG,8CAaQ,wCArKP,8BA/HV,kCAwBK,yCAiDM,qCAoCJ,sCAVC,oCARD,uCAVE,6BA6DT,wCAMW,qCAmCH,kCAuFJ,iCA1CD,wCAbS,oCAVN,0BA5SP,CAClBA,iBAAkB,CACdC,SACI,mEACJC,UACI,oEACJC,WACI,sEAERC,YAAa,CACTF,UACI,+DACJC,WACI,iEAERE,mBAAoB,CAChBC,YACI,mGAQiB"}

package/cjs/fullscreen-image-carousel/fullscreen-image-carousel.styles_vc6y5c.css

@@ -0,0 +1,75 @@
+.t1d7v1ct{--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft:initial;--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight:initial;-webkit-order:-1;-ms-flex-order:-1;order:-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:var(--fds-spacing-16);}.t1d7v1ct[data-has-file-info="true"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-color:var(--fds-colour-bg-inverse);padding-top:calc(
+            var(--fds-spacing-24) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+        );padding-bottom:var(--fds-spacing-24);padding-left:calc(
+            var(--fds-spacing-32) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft, 0px)
+        );padding-right:calc(
+            var(--fds-spacing-32) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+        );}:where(body.fds-breakpoint-sm-max) .t1d7v1ct[data-has-file-info="true"]{padding-top:calc(
+                var(--fds-spacing-16) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+            );padding-bottom:var(--fds-spacing-16);padding-left:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetLeft, 0px)
+            );padding-right:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+            );}.t1d7v1ct[data-has-file-info="false"]{position:absolute;top:calc(
+            var(--fds-spacing-48) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+        );right:calc(
+            var(--fds-spacing-48) +
+                var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+        );z-index:5;}:where(body.fds-breakpoint-sm-max) .t1d7v1ct[data-has-file-info="false"]{top:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetTop, 0px)
+            );right:calc(
+                var(--fds-spacing-20) +
+                    var(--fds-internal-fullscreenImageCarousel-topActionButtons-insetRight, 0px)
+            );}
+.ijhrw4g{padding:0;border-radius:100%;background:var(--fds-colour-bg);color:var(--fds-colour-icon-primary);height:2.5rem;width:2.5rem;box-shadow:var(--fds-shadow-md-strong);}.ijhrw4g svg{height:1.5rem;width:1.5rem;}.ijhrw4g:focus{outline:none;}.ijhrw4g:focus-visible{outline:var(--fds-border-width-020) solid var(--fds-colour-border-selected);outline-offset:2px;}
+.i19oam1e{color:var(--fds-colour-icon-error);}
+.aay3qsa{--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft:initial;--fds-internal-fullscreenImageCarousel-arrowButton-insetRight:initial;z-index:4;position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.a1mt5dqp{left:calc(
+        var(--fds-spacing-48) + var(--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft, 0px)
+    );}:where(body.fds-breakpoint-sm-max) .a1mt5dqp{left:calc(
+            var(--fds-spacing-20) + var(--fds-internal-fullscreenImageCarousel-arrowButton-insetLeft, 0px)
+        );}
+.a1nolxbp{right:calc(
+        var(--fds-spacing-48) +
+            var(--fds-internal-fullscreenImageCarousel-arrowButton-insetRight, 0px)
+    );}:where(body.fds-breakpoint-sm-max) .a1nolxbp{right:calc(
+            var(--fds-spacing-20) +
+                var(--fds-internal-fullscreenImageCarousel-arrowButton-insetRight, 0px)
+        );}
+.c1w96xh3{position:relative;width:100%;height:100dvh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.i1cp8dqy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}
+.ifd12u9{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;overflow:hidden;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}
+.i1pu33mh{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;overflow:hidden;touch-action:pan-y;}
+.iwm8xb6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition:all 450ms ease-out 0s;transition:all 450ms ease-out 0s;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;}
+.i1p6ye8c{-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.i1p6ye8c .react-transform-wrapper{height:100%;width:100%;}.i1p6ye8c .react-transform-component{height:100%;width:100%;}
+.f1wd1tos{height:100%;width:100%;outline:none;}.f1wd1tos:focus{outline:none;}.f1wd1tos:focus-visible{outline:var(--fds-border-width-020) solid var(--fds-colour-border-selected);outline-offset:-2px;}
+.sd4ndfo{height:100%;width:100%;border-radius:var(--fds-radius-none);}
+.sd6bpod{width:60vw;height:auto;max-height:100%;border-radius:var(--fds-radius-none);aspect-ratio:4/3;}
+.b1y1lz2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:var(--fds-spacing-16);position:absolute;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;z-index:3;}
+.c1q4y0yr{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:var(--fds-spacing-4) var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg);text-align:center;}
+.t12djler{--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom:initial;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:auto;background-color:var(--fds-colour-bg-inverse);padding:var(--fds-spacing-24) var(--fds-spacing-16) calc(
+            var(--fds-spacing-24) +
+                var(--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom, 0px)
+        );}:where(body.fds-breakpoint-sm-max) .t12djler{padding:var(--fds-spacing-16) var(--fds-spacing-20) calc(
+                var(--fds-spacing-16) +
+                    var(--fds-internal-fullscreenImageCarousel-thumbnailContainer-insetBottom, 0px)
+            );}
+.t15s3u6v{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:auto;margin-right:auto;}
+.t137aivh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:100px;width:100px;}:where(body.fds-breakpoint-sm-max) .t137aivh{height:64px;width:64px;}
+.tlwncl{cursor:pointer;background-color:var(--fds-colour-bg-inverse);border-radius:var(--fds-radius-md);border:var(--fds-border-style-solid) transparent;box-sizing:content-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:92px;width:92px;}:where(body.fds-breakpoint-sm-max) .tlwncl{height:60px;width:60px;}.tlwncl[data-active="true"]{border-width:var(--fds-border-width-040);border-color:var(--fds-colour-border-selected);}:where(body.fds-breakpoint-sm-max) .tlwncl[data-active="true"]{border-width:var(--fds-border-width-020);}.tlwncl[data-active="true"]:hover{border-color:var(--fds-colour-border-selected-hover);}.tlwncl[data-active="false"]{border-width:var(--fds-border-width-010);}.tlwncl[data-active="false"]:hover{border-color:var(--fds-colour-border-hover);}
+.t1uearuq{height:100%;width:100%;}
+.fytebwh{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);overflow:hidden;min-width:0;min-height:calc(
+        var(--fds-font-body-lh-baseline) + var(--fds-spacing-8) +
+            var(--fds-font-body-lh-md)
+    );}
+.f1ysk79e{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.f1cpwiz6{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.f17g5ble{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("./fullscreen-image-carousel.js");exports.FullscreenImageCarousel=e.FullscreenImageCarousel;
+"use strict";var e=require("./fullscreen-image-carousel.js");exports.Component=e.Component,exports.FullscreenImageCarousel=e.FullscreenImageCarousel;
 //# sourceMappingURL=index.js.map

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("react"),r=require("../animations/loading-dots/loading-dots.js");require("../animations/loading-dots-spinner/loading-dots-spinner.js"),require("../animations/loading-spinner/loading-spinner.js"),require("styled-components");var i=require("./stateful-image.style.js");exports.StatefulImage=({src:t,className:a,alt:n,fit:o,placeholder:l,retrieveImageDimension:d,setDimension:u})=>{const[c,g]=s.useState(!0),[m,h]=s.useState();s.useEffect((()=>{g(!0),h(void 0);const e=new Image;e.src=t,e.onload=()=>{d&&u&&u({src:t,width:e.width,height:e.height}),g(!1)},e.onerror=e=>{g(!1),h(e)}}),[t]);return e.jsx(i.ImageWrapper,{className:a,children:m?null!=l?l:e.jsx(i.DefaultPlaceholder,{}):c?e.jsx(r.LoadingDots,{}):e.jsx(i.ImageBox,{src:t,alt:n,$fit:o})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),s=require("react"),t=require("../animations/loading-dots/loading-dots.js");require("../animations/loading-dots-spinner/loading-dots-spinner.js"),require("../animations/loading-spinner/loading-spinner.js"),require("../theme/theme-provider/context.js");var i=require("../shared/image-placeholder/image-placeholder.js");require("../theme/theme-provider/index.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var n=require("./stateful-image.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(r);exports.StatefulImage=({src:r,className:o,alt:u,fit:d,placeholder:m,retrieveImageDimension:c,setDimension:h})=>{const[g,j]=s.useState(!0),[q,p]=s.useState(),f=s.useRef(null);a.useApplyStyle(f,{[n.tokens.imageBox.fit]:d}),s.useEffect((()=>{j(!0),p(void 0);const e=new Image;e.src=r,e.onload=()=>{c&&h&&h({src:r,width:e.width,height:e.height}),j(!1)},e.onerror=e=>{j(!1),p(e)}}),[r]);return e.jsx("div",{className:l.default(n.imageWrapper,o),children:q?null!=m?m:e.jsx(i.ImagePlaceholder,{className:n.defaultPlaceholder}):g?e.jsx(t.LoadingDots,{}):e.jsx("img",{ref:f,src:r,alt:u,className:n.imageBox})})};
 //# sourceMappingURL=stateful-image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stateful-image.js","sources":["../../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport {\n    DefaultPlaceholder,\n    ImageBox,\n    ImageWrapper,\n} from \"./stateful-image.style\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return placeholder ?? <DefaultPlaceholder />;\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return <ImageBox src={src} alt={alt} $fit={fit} />;\n    };\n\n    return <ImageWrapper className={className}>{renderContent()}</ImageWrapper>;\n};\n"],"names":["src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","ImageWrapper","children","DefaultPlaceholder","LoadingDots","ImageBox","$fit"],"mappings":"2VA4B6B,EACzBA,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,EAAAA,UAAS,IAChCC,EAAOC,GAAYF,aAE1BG,EAAAA,WAAU,KACNJ,GAAW,GACXG,OAASE,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAId,IAAMA,EACVc,EAAIE,OAAS,KACHX,GAA0BC,GAC5BA,EAAa,CACTN,MACAiB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBV,GAAW,EAAM,EAErBM,EAAIK,QAAWC,IACXZ,GAAW,GACXG,EAASS,EAAE,CACd,GACF,CAACpB,IAcJ,OAAOqB,EAAAA,IAACC,EAAAA,aAAY,CAACrB,UAAWA,EAASsB,SAXjCb,EACON,QAAAA,EAAeiB,EAAAA,IAACG,EAAAA,mBAAkB,IAGzCjB,EACOc,EAAAA,IAACI,EAAAA,YAAW,IAGhBJ,EAAAA,IAACK,WAAQ,CAAC1B,IAAKA,EAAKE,IAAKA,EAAGyB,KAAQxB,KAG4B"}
+{"version":3,"file":"stateful-image.js","sources":["../../../src/fullscreen-image-carousel/stateful-image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { LoadingDots } from \"../animations\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./stateful-image.styles\";\n\nexport interface StatefulImageProps {\n    src: string;\n    className?: string | undefined;\n    alt?: string | undefined;\n    fit?: React.CSSProperties[\"objectFit\"] | undefined;\n    placeholder?: React.ReactNode | undefined;\n    retrieveImageDimension?: boolean;\n    setDimension?: ({\n        src,\n        width,\n        height,\n    }: {\n        src: string;\n        width: number;\n        height: number;\n    }) => void;\n}\n\nexport const StatefulImage = ({\n    src,\n    className,\n    alt,\n    fit,\n    placeholder,\n    retrieveImageDimension,\n    setDimension,\n}: StatefulImageProps) => {\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<Event | string>();\n    const imageRef = useRef<HTMLImageElement>(null);\n\n    useApplyStyle(imageRef, {\n        [styles.tokens.imageBox.fit]: fit,\n    });\n\n    useEffect(() => {\n        setLoading(true);\n        setError(undefined);\n\n        const img = new Image();\n        img.src = src;\n        img.onload = () => {\n            if (!!retrieveImageDimension && setDimension) {\n                setDimension({\n                    src,\n                    width: img.width,\n                    height: img.height,\n                });\n            }\n\n            setLoading(false);\n        };\n        img.onerror = (e: Event | string) => {\n            setLoading(false);\n            setError(e);\n        };\n    }, [src]);\n\n    const renderContent = () => {\n        if (error) {\n            return (\n                placeholder ?? (\n                    <ImagePlaceholder className={styles.defaultPlaceholder} />\n                )\n            );\n        }\n\n        if (loading) {\n            return <LoadingDots />;\n        }\n\n        return (\n            <img\n                ref={imageRef}\n                src={src}\n                alt={alt}\n                className={styles.imageBox}\n            />\n        );\n    };\n\n    return (\n        <div className={clsx(styles.imageWrapper, className)}>\n            {renderContent()}\n        </div>\n    );\n};\n"],"names":["src","className","alt","fit","placeholder","retrieveImageDimension","setDimension","loading","setLoading","useState","error","setError","imageRef","useRef","useApplyStyle","styles.tokens","imageBox","useEffect","undefined","img","Image","onload","width","height","onerror","e","_jsx","clsx","styles.imageWrapper","children","ImagePlaceholder","styles.defaultPlaceholder","LoadingDots","ref","styles.imageBox"],"mappings":"wzBA2B6B,EACzBA,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,EAAAA,UAAS,IAChCC,EAAOC,GAAYF,aACpBG,EAAWC,EAAAA,OAAyB,MAE1CC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,SAASb,KAAMA,IAGlCc,EAAAA,WAAU,KACNT,GAAW,GACXG,OAASO,GAET,MAAMC,EAAM,IAAIC,MAChBD,EAAInB,IAAMA,EACVmB,EAAIE,OAAS,KACHhB,GAA0BC,GAC5BA,EAAa,CACTN,MACAsB,MAAOH,EAAIG,MACXC,OAAQJ,EAAII,SAIpBf,GAAW,EAAM,EAErBW,EAAIK,QAAWC,IACXjB,GAAW,GACXG,EAASc,EAAE,CACd,GACF,CAACzB,IAyBJ,OACI0B,MAAA,MAAA,CAAKzB,UAAW0B,EAAAA,QAAKC,eAAqB3B,GAAU4B,SAvBhDnB,EAEIN,QAAAA,EACIsB,EAAAA,IAACI,mBAAgB,CAAC7B,UAAW8B,EAAAA,qBAKrCxB,EACOmB,EAAAA,IAACM,EAAAA,YAAW,IAInBN,aACIO,IAAKrB,EACLZ,IAAKA,EACLE,IAAKA,EACLD,UAAWiC,EAAAA,YAQb"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./stateful-image.styles_1xe8ypm.css");exports.defaultPlaceholder="d1w2ubkx",exports.imageBox="i1k1jgcv",exports.imageWrapper="i1h1mxc8",exports.tokens={imageBox:{fit:"--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit"}};
+//# sourceMappingURL=stateful-image.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stateful-image.styles.js","sources":["../../../src/fullscreen-image-carousel/stateful-image.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const tokens = {\n    imageBox: {\n        fit: \"--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit\",\n    },\n};\n\nexport const imageWrapper = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const imageBox = css`\n    /* Reset variable to prevent leaking to child components */\n    ${tokens.imageBox.fit}: initial;\n\n    height: 100%;\n    width: 100%;\n    object-fit: var(${tokens.imageBox.fit}, contain);\n`;\n\nexport const defaultPlaceholder = css`\n    width: 100%;\n    height: 100%;\n`;\n"],"names":["imageBox","fit"],"mappings":"gIAuB+B,4BATV,gCANI,0BANH,CAClBA,SAAU,CACNC,IAAK"}

package/cjs/fullscreen-image-carousel/stateful-image.styles_1xe8ypm.css

@@ -0,0 +1,3 @@
+.i1h1mxc8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.i1k1jgcv{--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit:initial;height:100%;width:100%;object-fit:var(--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit, contain);}
+.d1w2ubkx{width:100%;height:100%;}

package/cjs/histogram-slider/histogram-slider.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("react"),r=require("../typography/index.js"),s=require("./histogram-slider.styles.js");exports.HistogramSlider=i=>{var{bins:l=[],interval:t,disabled:u,readOnly:d,value:o,showRangeLabels:c,rangeLabelPrefix:m,rangeLabelSuffix:h,ariaLabels:g,onChange:b,onChangeEnd:x,renderEmptyView:p,renderRangeLabel:j}=i,y=e.__rest(i,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel"]);const L=l.map((e=>e.count)),f=Math.max(...L),v=l.map((e=>e.minValue)),V=Math.max(...v),C=Math.min(...v),[E,S]=n.useState(w()),q=n.useMemo((()=>{const e=[...l].sort(((e,a)=>e.minValue-a.minValue)),a=(V-C)/t+1,n=[];for(let r=0;r<a;r++){const a=e.find((e=>e.minValue===C+t*r));a?n.push(a):n.push({count:0,minValue:C+t*r})}return n}),[l,t]);n.useEffect((()=>{o!==E&&S(w())}),[o]);const O=e=>{const[a,n]=e,r=[a,n];S(r),null==b||b(r)},R=e=>{const[a,n]=e,r=[a,n];S(r),null==x||x(r)};function w(){return null!=o?o:[C,C+t]}const M=e=>j?j(e):a.jsxs(r.Typography.BodyBL,{children:[m,e,h]});return a.jsxs("div",Object.assign({},y,{children:[c&&a.jsxs(s.Label,{children:[M(E[0]),a.jsx(s.Separator,{children:"-"}),M(E[1])]}),q.every((e=>0===e.count))&&p?p():a.jsxs(a.Fragment,{children:[a.jsx(s.Histogram,{children:q.map(((e,n)=>{const r=e.count/f;return a.jsx(s.Bar,{style:{height:r?`calc(calc(100% - 0.25rem) * ${r} + 0.25rem)`:0},$selected:e.minValue>=E[0]&&e.minValue<E[1],$disabled:u||d},n)}))}),a.jsx(s.Slider,{min:C,max:V+t,step:t,minRange:t,numOfThumbs:2,value:E,disabled:u,readOnly:d,ariaLabels:g,onChange:O,onChangeEnd:R})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@react-aria/live-announcer"),n=require("clsx"),i=require("react"),s=require("../input-range-slider/input-range-slider.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var u=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js");var d=require("./histogram-slider.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=o(n);const b=({item:e,maxCount:a,isSelected:n,isDisabled:s})=>{const t=e.count/a,u=i.useRef(null);return l.useApplyStyle(u,{height:t?`calc(calc(100% - 0.25rem) * ${t} + 0.25rem)`:"0"}),r.jsx("div",{"data-testid":"histogram-bar",className:m.default(d.bar,s&&n&&d.barSelectedDisabled,s&&d.barDisabled,n&&d.barSelected),ref:u})};exports.HistogramSlider=n=>{var{bins:l=[],interval:o,disabled:m,readOnly:h,value:g,showRangeLabels:p,rangeLabelPrefix:f,rangeLabelSuffix:j,ariaLabels:y,"aria-labelledby":x,"aria-describedby":v,onChange:q,onChangeEnd:L,renderEmptyView:V,renderRangeLabel:S,className:C}=n,N=e.__rest(n,["bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","aria-labelledby","aria-describedby","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className"]);const R=l.map((e=>e.count)),E=Math.max(...R),D=l.map((e=>e.minValue)),M=Math.max(...D),O=Math.min(...D),[k,w]=i.useState(F()),T=c.useId(),_=i.useRef(null),I=`${T}-range-label`,$=t.concatIds(v,p?I:void 0),A=i.useMemo((()=>{const e=[...l].sort(((e,r)=>e.minValue-r.minValue)),r=(M-O)/o+1,a=[];for(let n=0;n<r;n++){const r=e.find((e=>e.minValue===O+o*n));r?a.push(r):a.push({count:0,minValue:O+o*n})}return a}),[l,o]);i.useEffect((()=>{g!==k&&w(F())}),[g]),i.useEffect((()=>()=>{H()}),[]);const B=e=>{const[r,a]=e,n=[r,a];w(n),G(n),null==q||q(n)},P=e=>{const[r,a]=e,n=[r,a];w(n),G(n),null==L||L(n)};function F(){return null!=g?g:[O,O+o]}function H(){_.current&&(clearTimeout(_.current),_.current=null)}function z(e){const r=A.reduce(((e,r)=>e+r.count),0);if(0===r)return"0% of results available in the range you specified.";const a=A.reduce(((r,a)=>a.minValue>=e[0]&&a.minValue<e[1]?r+a.count:r),0);return`${Math.round(a/r*100)}% of results available in the range you specified.`}function G(e){if(m||h)return;const r=z(e);H(),_.current=setTimeout((()=>{a.clearAnnouncer("polite"),a.announce(r,"polite")}),500)}const J=e=>S?S(e):r.jsxs(u.Typography.BodyBL,{children:[f,e,j]});return r.jsxs("div",Object.assign({role:"group"},N,{className:C,children:[p&&r.jsxs("div",{id:I,className:d.label,children:[J(k[0]),r.jsx("div",{className:d.separator,children:"-"}),J(k[1])]}),A.every((e=>0===e.count))&&V?V():(()=>{const e=z(k);return r.jsxs(r.Fragment,{children:[r.jsx("div",{className:d.histogram,children:A.map(((e,a)=>r.jsx(b,{item:e,maxCount:E,isSelected:e.minValue>=k[0]&&e.minValue<k[1],isDisabled:m||h},a)))}),r.jsx(s.InputRangeSlider,{min:O,max:M+o,step:o,minRange:o,numOfThumbs:2,value:k,disabled:m,readOnly:h,ariaLabels:y,ariaDescriptions:[e,e],"aria-describedby":$,"aria-labelledby":x,onChange:B,onChangeEnd:P,className:d.slider})]})})()]}))};
 //# sourceMappingURL=histogram-slider.js.map

package/cjs/histogram-slider/histogram-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { Typography } from \"../typography\";\nimport {\n    Bar,\n    Histogram,\n    Label,\n    Separator,\n    Slider,\n} from \"./histogram-slider.styles\";\nimport type { HistogramSliderProps } from \"./types\";\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        return (\n            <>\n                <Histogram>\n                    {items.map((item, i) => {\n                        const ratio = item.count / maxCount;\n                        return (\n                            <Bar\n                                key={i}\n                                style={{\n                                    height: ratio\n                                        ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)`\n                                        : 0,\n                                }}\n                                $selected={\n                                    item.minValue >= selection[0] &&\n                                    item.minValue < selection[1]\n                                }\n                                $disabled={disabled || readOnly}\n                            />\n                        );\n                    })}\n                </Histogram>\n                <Slider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            {showRangeLabels && (\n                <Label>\n                    {renderRangeItem(selection[0])}\n                    <Separator>-</Separator>\n                    {renderRangeItem(selection[1])}\n                </Label>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n"],"names":["_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","handleChange","val1","val2","newSelection","handleChangeEnd","renderRangeItem","_jsxs","Typography","BodyBL","children","Label","_jsx","Separator","every","_Fragment","Histogram","ratio","Bar","style","height","$selected","$disabled","Slider","step","minRange","numOfThumbs"],"mappings":"4MAYgCA,IAAA,IAAAC,KAC5BA,EAAO,GAAEC,SACTA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,EAAUC,SACVA,EAAQC,YACRA,EAAWC,gBACXA,EAAeC,iBACfA,GAAgBb,EACbc,EAAUC,EAAAA,OAAAf,EAde,sLAmB5B,MAAMgB,EAASf,EAAKgB,KAAKC,GAASA,EAAKC,QACjCC,EAAWC,KAAKC,OAAON,GAEvBO,EAAStB,EAAKgB,KAAKC,GAASA,EAAKM,WACjCC,EAAWJ,KAAKC,OAAOC,GACvBC,EAAWH,KAAKK,OAAOH,IAEtBI,EAAWC,GAAgBC,EAAAA,SAC9BC,KAGEC,EAAQC,EAAAA,SAAQ,KAClB,MAAMC,EAAS,IAAIhC,GAAMiC,MAAK,CAACC,EAAGC,IAAMD,EAAEX,SAAWY,EAAEZ,WACjDa,GAAWZ,EAAWD,GAAYtB,EAAW,EAE7C6B,EAAuB,GAC7B,IAAK,IAAIO,EAAI,EAAGA,EAAID,EAASC,IAAK,CAC9B,MAAMC,EAAMN,EAAOO,MACdJ,GAAMA,EAAEZ,WAAaA,EAAWtB,EAAWoC,IAE5CC,EACAR,EAAMU,KAAKF,GAEXR,EAAMU,KAAK,CAAEtB,MAAO,EAAGK,SAAUA,EAAWtB,EAAWoC,GAE/D,CACA,OAAOP,CAAK,GACb,CAAC9B,EAAMC,IAKVwC,EAAAA,WAAU,KACFrC,IAAUsB,GACVC,EAAaE,IACjB,GACD,CAACzB,IAKJ,MAAMsC,EAAgBpB,IAClB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbpC,SAAAA,EAAWoC,EAAa,EAGtBC,EAAmBxB,IACrB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbnC,SAAAA,EAAcmC,EAAa,EAM/B,SAAShB,IACL,OAAOzB,QAAAA,EAAS,CAACmB,EAAUA,EAAWtB,EAC1C,CAKA,MAAM8C,EAAmB3C,GACjBQ,EACOA,EAAiBR,GAGxB4C,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb7C,EACAF,EACAG,KA6Cb,OACIyC,EAAAA,4BAASnC,EAAU,CAAAsC,SAAA,CACd9C,GACG2C,EAAAA,KAACI,EAAAA,MAAK,CAAAD,SAAA,CACDJ,EAAgBrB,EAAU,IAC3B2B,EAAAA,IAACC,EAAAA,UAAS,CAAAH,SAAA,MACTJ,EAAgBrB,EAAU,OAGlCI,EAAMyB,OAAOtC,GAAwB,IAAfA,EAAKC,SAAgBP,EACtCA,IAhDNqC,EAAAA,KAAAQ,EAAAA,SAAA,CAAAL,SAAA,CACIE,EAAAA,IAACI,EAAAA,oBACI3B,EAAMd,KAAI,CAACC,EAAMoB,KACd,MAAMqB,EAAQzC,EAAKC,MAAQC,EAC3B,OACIkC,EAAAA,IAACM,MAAG,CAEAC,MAAO,CACHC,OAAQH,EACF,+BAA+BA,eAC/B,GACTI,UAEG7C,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAAEqC,UAErB7D,GAAYC,GAVlBkC,EAWP,MAIdgB,EAAAA,IAACW,EAAAA,QACGvC,IAAKF,EACLF,IAAKG,EAAWvB,EAChBgE,KAAMhE,EACNiE,SAAUjE,EACVkE,YAAa,EACb/D,MAAOsB,EACPxB,SAAUA,EACVC,SAAUA,EACVK,WAAYA,EACZC,SAAUiC,EACVhC,YAAaoC,UAkBnB"}
+{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./histogram-slider.styles\";\nimport type { HistogramBinProps, HistogramSliderProps } from \"./types\";\n\nconst ANNOUNCEMENT_DEBOUNCE_MS = 500;\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    className,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const internalId = useId();\n    const announcementTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n    );\n    const rangeLabelId = `${internalId}-range-label`;\n    const sliderDescribedBy = concatIds(\n        ariaDescribedBy,\n        showRangeLabels ? rangeLabelId : undefined\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            clearPendingAnnouncement();\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    function clearPendingAnnouncement() {\n        if (announcementTimeoutRef.current) {\n            clearTimeout(announcementTimeoutRef.current);\n            announcementTimeoutRef.current = null;\n        }\n    }\n\n    function getRangePercentageDescription(currentSelection: [number, number]) {\n        const totalCount = items.reduce((sum, item) => sum + item.count, 0);\n\n        if (totalCount === 0) {\n            return \"0% of results available in the range you specified.\";\n        }\n\n        const selectedCount = items.reduce((sum, item) => {\n            const isSelected =\n                item.minValue >= currentSelection[0] &&\n                item.minValue < currentSelection[1];\n\n            return isSelected ? sum + item.count : sum;\n        }, 0);\n\n        const percentage = Math.round((selectedCount / totalCount) * 100);\n\n        return `${percentage}% of results available in the range you specified.`;\n    }\n\n    function scheduleRangePercentageAnnouncement(\n        currentSelection: [number, number]\n    ) {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const announcement = getRangePercentageDescription(currentSelection);\n\n        clearPendingAnnouncement();\n\n        announcementTimeoutRef.current = setTimeout(() => {\n            clearAnnouncer(\"polite\");\n            announce(announcement, \"polite\");\n        }, ANNOUNCEMENT_DEBOUNCE_MS);\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        const selectionDescription = getRangePercentageDescription(selection);\n\n        return (\n            <>\n                <div className={styles.histogram}>\n                    {items.map((item, i) => (\n                        <HistogramBar\n                            key={i}\n                            item={item}\n                            maxCount={maxCount}\n                            isSelected={\n                                item.minValue >= selection[0] &&\n                                item.minValue < selection[1]\n                            }\n                            isDisabled={disabled || readOnly}\n                        />\n                    ))}\n                </div>\n                <InputRangeSlider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    ariaDescriptions={[\n                        selectionDescription,\n                        selectionDescription,\n                    ]}\n                    aria-describedby={sliderDescribedBy}\n                    aria-labelledby={ariaLabelledBy}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                    className={styles.slider}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div role=\"group\" {...otherProps} className={className}>\n            {showRangeLabels && (\n                <div id={rangeLabelId} className={styles.label}>\n                    {renderRangeItem(selection[0])}\n                    <div className={styles.separator}>-</div>\n                    {renderRangeItem(selection[1])}\n                </div>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n\n// =============================================================================\n// SUB COMPONENT\n// =============================================================================\ninterface HistogramBarProps {\n    item: HistogramBinProps;\n    maxCount: number;\n    isSelected: boolean;\n    isDisabled: boolean | undefined;\n}\n\nconst HistogramBar = ({\n    item,\n    maxCount,\n    isSelected,\n    isDisabled,\n}: HistogramBarProps) => {\n    const ratio = item.count / maxCount;\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        height: ratio ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)` : \"0\",\n    });\n\n    return (\n        <div\n            data-testid=\"histogram-bar\"\n            className={clsx(\n                styles.bar,\n                isDisabled && isSelected && styles.barSelectedDisabled,\n                isDisabled && styles.barDisabled,\n                isSelected && styles.barSelected\n            )}\n            ref={barRef}\n        />\n    );\n};\n"],"names":["HistogramBar","item","maxCount","isSelected","isDisabled","ratio","count","barRef","useRef","useApplyStyle","height","_jsx","className","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","rangeLabelId","sliderDescribedBy","concatIds","undefined","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","clearPendingAnnouncement","handleChange","val1","val2","newSelection","scheduleRangePercentageAnnouncement","handleChangeEnd","current","clearTimeout","getRangePercentageDescription","currentSelection","totalCount","reduce","sum","selectedCount","round","announcement","setTimeout","clearAnnouncer","announce","renderRangeItem","_jsxs","Typography","BodyBL","children","Object","assign","role","id","styles.label","styles.separator","every","selectionDescription","_Fragment","styles.histogram","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider"],"mappings":"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"}

package/cjs/histogram-slider/histogram-slider.styles.js

@@ -1,25 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../input-range-slider/input-range-slider.js"),t=require("../v3_theme/index.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e);const i=d.default.div`
-    display: flex;
-    margin-bottom: ${t.V3_Spacing["spacing-16"]};
-    align-items: baseline;
-`,a=d.default.div`
-    margin: 0 0.5rem;
-`,l=d.default.div`
-    width: 100%;
-    height: 4rem;
-    display: flex;
-    align-items: flex-end;
-    padding: 0 0.4375rem;
-`,o=d.default.div`
-    flex: 1;
-    border-radius: ${t.V3_Radius.sm} ${t.V3_Radius.sm} 0 0;
-    border: 0.5px solid transparent; // space between bars
-    background-clip: content-box;
-
-    ${r=>{let s=t.V3_Colour["bg-strongest"];return r.$disabled&&r.$selected?s=t.V3_Colour["bg-selected-stronger-disabled"]:r.$disabled?s=t.V3_Colour["bg-disabled"]:r.$selected&&(s=t.V3_Colour["bg-selected-stronger"]),e.css`
-            background-color: ${s};
-        `}}
-`,n=d.default(r.InputRangeSlider)`
-    margin-top: -0.3125rem;
-`;exports.Bar=o,exports.Histogram=l,exports.Label=i,exports.Separator=a,exports.Slider=n;
+"use strict";require("./histogram-slider.styles_wvd4w.css");exports.bar="b1koddre",exports.barDisabled="b1im7sez",exports.barSelected="b8ooyxk",exports.barSelectedDisabled="b9tfims",exports.histogram="hu29dsu",exports.label="l1qwb62w",exports.separator="s1f028jb",exports.slider="s1q1626e";
 //# sourceMappingURL=histogram-slider.styles.js.map

package/cjs/histogram-slider/histogram-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\ninterface BarStyleProps {\n    $selected: boolean;\n    $disabled: boolean | undefined;\n}\n\nexport const Label = styled.div`\n    display: flex;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n`;\n\nexport const Histogram = styled.div`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const Bar = styled.div<BarStyleProps>`\n    flex: 1;\n    border-radius: ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n\n    ${(props) => {\n        let color = V3_Colour[\"bg-strongest\"];\n        if (props.$disabled && props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger-disabled\"];\n        } else if (props.$disabled) {\n            color = V3_Colour[\"bg-disabled\"];\n        } else if (props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger\"];\n        }\n        return css`\n            background-color: ${color};\n        `;\n    }}\n`;\n\nexport const Slider = styled(InputRangeSlider)`\n    margin-top: -0.3125rem;\n`;\n"],"names":["Label","styled","div","V3_Spacing","Separator","Histogram","Bar","V3_Radius","props","color","V3_Colour","$disabled","$selected","css","Slider","InputRangeSlider"],"mappings":"8NAUO,MAAMA,EAAQC,EAAAA,QAAOC,GAAG;;qBAEVC,EAAAA,WAAW;;EAInBC,EAAYH,EAAAA,QAAOC,GAAG;;EAItBG,EAAYJ,EAAAA,QAAOC,GAAG;;;;;;EAQtBI,EAAML,EAAAA,QAAOC,GAAkB;;qBAEvBK,EAAAA,UAAc,MAAKA,EAAAA,UAAc;;;;MAI/CC,IACC,IAAIC,EAAQC,EAAAA,UAAU,gBAQtB,OAPIF,EAAMG,WAAaH,EAAMI,UACzBH,EAAQC,EAAAA,UAAU,iCACXF,EAAMG,UACbF,EAAQC,EAAAA,UAAU,eACXF,EAAMI,YACbH,EAAQC,EAAAA,UAAU,yBAEfG,KAAG;gCACcJ;SACvB;EAIIK,EAASb,EAAAA,QAAOc,EAAAA,iBAAiB;;"}
+{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../theme\";\n\nexport const label = css`\n    display: flex;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n`;\n\nexport const histogram = css`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const bar = css`\n    flex: 1;\n    border-radius: ${Radius[\"sm\"]} ${Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n    background-color: ${Colour[\"bg-strongest\"]};\n`;\n\nexport const barDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const barSelected = css`\n    background-color: ${Colour[\"bg-selected-stronger\"]};\n`;\n\nexport const barSelectedDisabled = css`\n    background-color: ${Colour[\"bg-selected-stronger-disabled\"]};\n`;\n\nexport const slider = css`\n    margin-top: -0.3125rem;\n`;\n"],"names":[],"mappings":"wGAsBgB,+BAQQ,+BAIA,sCAIQ,4BAxBV,wBAVJ,6BAMI,0BAgCH"}

package/cjs/histogram-slider/histogram-slider.styles_wvd4w.css

@@ -0,0 +1,8 @@
+.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s1f028jb{margin:0 0.5rem;}
+.hu29dsu{width:100%;height:4rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding:0 0.4375rem;}
+.b1koddre{-webkit-flex:1;-ms-flex:1;flex:1;border-radius:var(--fds-radius-sm) var(--fds-radius-sm) 0 0;border:0.5px solid transparent;-webkit-background-clip:content-box;background-clip:content-box;background-color:var(--fds-colour-bg-strongest);}
+.b1im7sez{background-color:var(--fds-colour-bg-disabled);}
+.b8ooyxk{background-color:var(--fds-colour-bg-selected-stronger);}
+.b9tfims{background-color:var(--fds-colour-bg-selected-stronger-disabled);}
+.s1q1626e{margin-top:-0.3125rem;}

package/cjs/image-button/image-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),a=require("./image-button.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=l(i).default.forwardRef(((i,l)=>{var{children:s,imgSrc:c,selected:d,error:n,type:u="button",disabled:o=!1,focusableWhenDisabled:b=!1,onClick:f}=i,h=e.__rest(i,["children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);return r.jsxs(a.Main,Object.assign({ref:l,$disabled:o,$selected:d,$error:n,type:u,"aria-disabled":o,disabled:o&&!b,onClick:o?void 0:f},h,{children:[r.jsx(t.ImageWithFallback,{src:c}),s]}))}));exports.ImageButton=s;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),s=require("./image-button.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(r);const n=l(i).default.forwardRef(((r,i)=>{var{children:l,className:n,imgSrc:d,selected:u,error:o,type:b="button",disabled:m=!1,focusableWhenDisabled:f=!1,onClick:h}=r,g=e.__rest(r,["children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);const j=!!m&&!f;return a.jsxs("button",Object.assign({ref:i,type:b,"aria-disabled":m,disabled:j,onClick:m?void 0:h,className:c.default(s.main,u&&s.mainSelectedText,u&&s.mainSelected,o&&s.mainError,m&&s.mainDisabled,n)},g,{children:[a.jsx(t.ImageWithFallback,{src:d}),l]}))}));exports.ImageButton=n;
 //# sourceMappingURL=image-button.js.map

package/cjs/image-button/image-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-button.js","sources":["../../../src/image-button/image-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Main } from \"./image-button.style\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    return (\n        <Main\n            ref={ref}\n            $disabled={disabled}\n            $selected={selected}\n            $error={error}\n            type={type}\n            aria-disabled={disabled}\n            disabled={disabled && !focusableWhenDisabled}\n            onClick={disabled ? undefined : onClick}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </Main>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","_jsxs","Main","Object","assign","$disabled","$selected","$error","undefined","_jsx","ImageWithFallback","src"],"mappings":"qRAOA,MAgCaA,OAAcC,QAAMC,YAhCf,CACdC,EAWAC,SAXAC,SACIA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOT,EACJU,EAAUC,EAAAA,OAAAX,EATjB,CAAA,WAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAaA,OACIY,EAAAA,KAACC,EAAAA,KAAIC,OAAAC,OAAA,CACDd,IAAKA,EAAGe,UACGT,EAAQU,UACRb,EAAQc,OACXb,EACRC,KAAMA,EAAI,gBACKC,EACfA,SAAUA,IAAaC,EACvBC,QAASF,OAAWY,EAAYV,GAC5BC,aAEJU,EAAAA,IAACC,EAAAA,kBAAiB,CAACC,IAAKnB,IACvBD,KACE"}
+{"version":3,"file":"image-button.js","sources":["../../../src/image-button/image-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./image-button.styles\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    return (\n        <button\n            ref={ref}\n            type={type}\n            aria-disabled={disabled}\n            disabled={isNativeDisabled}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                selected && styles.mainSelectedText,\n                selected && styles.mainSelected,\n                error && styles.mainError,\n                disabled && styles.mainDisabled,\n                className\n            )}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </button>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","isNativeDisabled","_jsxs","Object","assign","undefined","clsx","styles.main","styles.mainSelectedText","styles.mainSelected","styles.mainError","styles.mainDisabled","_jsx","ImageWithFallback","src"],"mappings":"mTAQA,MAwCaA,OAAcC,QAAMC,YAxCf,CACdC,EAYAC,KAZA,IAAAC,SACIA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOV,EACJW,EAAUC,EAAAA,OAAAZ,EAVjB,CAAA,WAAA,YAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAcA,MAAMa,IAAqBL,IAAaC,EAExC,OACIK,EAAAA,KAAA,SAAAC,OAAAC,OAAA,CACIf,IAAKA,EACLM,KAAMA,EAAI,gBACKC,EACfA,SAAUK,EACVH,QAASF,OAAWS,EAAYP,EAChCP,UAAWe,EAAAA,QACPC,EAAAA,KACAd,GAAYe,mBACZf,GAAYgB,EAAAA,aACZf,GAASgB,EAAAA,UACTd,GAAYe,EAAAA,aACZpB,IAEAQ,EAAU,CAAAT,SAAA,CAEdsB,MAACC,EAAAA,kBAAiB,CAACC,IAAKtB,IACvBF,KACI"}

package/cjs/image-button/image-button.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./image-button.styles_qtt605.css");exports.main="mqb1plh",exports.mainDisabled="m1hsk0n5",exports.mainError="mz6wr40",exports.mainSelected="mroo32y",exports.mainSelectedText="mpjl8bn";
+//# sourceMappingURL=image-button.styles.js.map

package/cjs/image-button/image-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-button.styles.js","sources":["../../../src/image-button/image-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Motion, Radius } from \"../theme\";\n\nexport const main = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    padding: 1.5rem 1rem;\n    background-color: ${Colour.bg};\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n    border-radius: ${Radius[\"md\"]};\n    cursor: pointer;\n    max-width: 13rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    overflow-wrap: anywhere;\n\n    img {\n        min-width: 3.5rem;\n        width: 3.5rem;\n        height: 3.5rem;\n        object-fit: contain;\n    }\n\n    &:hover {\n        border-color: ${Colour[\"border-hover-strong\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0.5rem 0.25rem;\n        gap: 0.25rem;\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const mainSelectedText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const mainSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n    border-color: ${Colour[\"border-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-selected-hover\"]};\n        border-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const mainError = css`\n    background: ${Colour.bg};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour.bg};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const mainDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n\n    img {\n        filter: grayscale(100%);\n    }\n\n    &:hover {\n        border-color: transparent;\n    }\n`;\n"],"names":[],"mappings":"kGAIiB,+BA4DQ,6BAVH,+BAVG,mCAJI"}

package/cjs/image-button/image-button.styles_qtt605.css

@@ -0,0 +1,5 @@
+.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.mpjl8bn{color:var(--fds-colour-text-primary);}
+.mroo32y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);}.mroo32y:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);}
+.mz6wr40{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}.mz6wr40:hover{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}
+.m1hsk0n5{color:var(--fds-colour-text-disabled);cursor:not-allowed;}.m1hsk0n5 img{-webkit-filter:grayscale(100%);filter:grayscale(100%);}.m1hsk0n5:hover{border-color:transparent;}