npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2426) hide show

package/fullscreen-image-carousel/fullscreen-image-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n ChevronLeftIcon,\n ChevronRightIcon,\n CrossIcon,\n MagnifierMinusIcon,\n MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport 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 { useStateCallback } from \"../shared/hooks\";\nimport { useEventListener } from \"../util\";\nimport {\n ArrowButton,\n BoxChip,\n CarouselModalContent,\n Chip,\n CloseButton,\n DeleteButton,\n FileInfoFileName,\n FileInfoFileSize,\n FileInfoTextWrapper,\n FocusableImageRegion,\n ImageGalleryContainer,\n ImageGallerySlide,\n ImageGallerySlides,\n ImageGallerySwipe,\n ImageGalleryWrapper,\n MagnifierButton,\n SlideImage,\n SlidePlaceholderImage,\n ThumbnailContainer,\n ThumbnailImage,\n ThumbnailItem,\n ThumbnailItemContainer,\n ThumbnailWrapper,\n TopActionButtons,\n} from \"./fullscreen-image-carousel.style\";\nimport 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 diff = startX && endX ? startX - endX : 0;\n const currentItem = items[currentSlide];\n const hasAnyItemLabel = items.some(\n (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n );\n const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n const hasFileInfo = useMemo(\n () =>\n items.some(\n (item) => item.fileName?.trim() \|\| item.fileSize?.trim()\n ),\n [items]\n );\n\n const getItemAriaLabel = useCallback(\n (index: number) => {\n const item = items[index];\n const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n const prefix = isCustomItem(item)\n ? item.itemLabel?.trim() \|\| \"\"\n : item.alt?.trim() \|\| \"\";\n const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n items.length\n }.`;\n\n return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n },\n [items, hasAnyItemLabel]\n );\n\n useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n ref,\n () => ({\n currentItemIndex: currentSlide,\n setCurrentItem: goToSlide,\n goToPrevItem: goToPrevSlide,\n goToNextItem: goToNextSlide,\n })\n );\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n useEffect(() => {\n if (show) {\n imageRef.current?.focus();\n }\n }, [show]);\n\n useEffect(() => {\n if (items.length === 0) {\n setCurrentSlide(0);\n return;\n }\n\n if (currentSlide > items.length - 1) {\n setCurrentSlide(items.length - 1);\n }\n }, [currentSlide, items.length, setCurrentSlide]);\n\n useEffect(() => {\n thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n behavior: \"smooth\",\n inline: \"center\",\n });\n setZoom(1);\n }, [currentSlide]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleTouchStart = (e: React.TouchEvent) => {\n if (zoom <= 1) setStartX(e.touches[0].clientX);\n };\n\n const handleTouchMove = (e: React.TouchEvent) => {\n if (!startX \|\| zoom > 1) return;\n setEndX(e.touches[0].clientX);\n };\n\n const handleTouchEnd = () => {\n if (!containerRef.current) return;\n if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n if (diff > 0) {\n goToNextSlide();\n } else {\n goToPrevSlide();\n }\n }\n setStartX(undefined);\n setEndX(undefined);\n };\n\n const handleZoom = (e: ReactZoomPanPinchRef) => {\n setZoom(e.state.scale);\n };\n\n const handleDelete = () => {\n if (currentItem && onDelete) {\n onDelete(currentItem, currentSlide);\n }\n };\n\n function handleKeyDown(e: KeyboardEvent) {\n if (e.key === \"ArrowRight\") {\n goToNextSlide();\n } else if (e.key === \"ArrowLeft\") {\n goToPrevSlide();\n } else if (e.key === \"Escape\") {\n onClose?.();\n }\n }\n\n const handleMagnifier = () => {\n if (zoom === 1) {\n const zoomRatio = getZoomRatio();\n zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n setZoom(zoomRatio ?? 1);\n } else {\n setZoom(1);\n zoomRefs.current?.[currentSlide]?.resetTransform();\n }\n };\n\n const setDimension = ({\n src,\n height,\n width,\n }: {\n src: string;\n height: number;\n width: number;\n }) => {\n setImageDimension((oldState) => {\n return { ...oldState, [src]: { height, width } };\n });\n };\n\n const getZoomRatio = () => {\n if (!currentItem \|\| isCustomItem(currentItem)) {\n return;\n }\n\n const imageDimension = imagesDimension[currentItem.src];\n\n if (containerRef.current && !!imageDimension) {\n const { clientHeight, clientWidth } = containerRef.current;\n const { width, height } = imageDimension;\n const isSmallImg = width < clientWidth && height < clientHeight;\n\n const isImgLandscapeRelativeToDevice =\n height / width < clientHeight / clientWidth;\n\n if (isSmallImg) {\n return isImgLandscapeRelativeToDevice\n ? clientWidth / width\n : clientHeight / height;\n }\n\n return isImgLandscapeRelativeToDevice\n ? clientHeight / (height / (width / clientWidth))\n : clientWidth / (width / (height / clientHeight));\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const goToPrevSlide = () => {\n zoomRefs.current?.[currentSlide]?.resetTransform();\n setCurrentSlide(\n (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n (slide) => {\n clearAnnouncer(\"polite\");\n announce(getItemAriaLabel(slide), \"polite\");\n }\n );\n };\n\n const goToNextSlide = () => {\n zoomRefs.current?.[currentSlide]?.resetTransform();\n setCurrentSlide(\n (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n (slide) => {\n clearAnnouncer(\"polite\");\n announce(getItemAriaLabel(slide), \"polite\");\n }\n );\n };\n\n const goToSlide = (index: number) => {\n zoomRefs.current?.[currentSlide]?.resetTransform();\n setCurrentSlide(index);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderSlides = () => {\n return (\n <ImageGallerySlides\n style={{\n transform: `translateX(calc(${\n -currentSlide * 100\n }% - ${diff}px))`,\n }}\n >\n {items.map((item, index) => {\n const isActive = index === currentSlide;\n const isActiveOrAdjacent =\n Math.abs(index - currentSlide) <= 1 \|\|\n (currentSlide === 0 && index === items.length - 1) \|\|\n (currentSlide === items.length - 1 && index === 0);\n\n return (\n <ImageGallerySlide key={index} data-testid=\"slide-item\">\n <FocusableImageRegion\n ref={isActive ? imageRef : null}\n tabIndex={isActive ? 0 : -1}\n >\n {isCustomItem(item) ? (\n isActiveOrAdjacent ? (\n item.renderContent()\n ) : (\n <SlidePlaceholderImage />\n )\n ) : (\n <TransformWrapper\n ref={(el) =>\n (zoomRefs.current[index] = el)\n }\n panning={{\n disabled: zoom <= 1,\n }}\n initialScale={1}\n onZoom={handleZoom}\n onZoomStop={handleZoom}\n onWheel={handleZoom}\n >\n <TransformComponent>\n <SlideImage\n src={item.src}\n alt={getItemAriaLabel(index)}\n placeholder={\n <SlidePlaceholderImage />\n }\n fit=\"scale-down\"\n retrieveImageDimension\n setDimension={setDimension}\n />\n </TransformComponent>\n </TransformWrapper>\n )}\n </FocusableImageRegion>\n </ImageGallerySlide>\n );\n })}\n </ImageGallerySlides>\n );\n };\n\n const renderFileInfo = () => {\n const { fileName, fileSize } = currentItem ?? {};\n const trimmedName = fileName?.trim();\n const trimmedSize = fileSize?.trim();\n\n return (\n <FileInfoTextWrapper\n $centerContent={!trimmedSize}\n aria-live=\"polite\"\n aria-atomic=\"true\"\n data-testid=\"file-info-bar\"\n >\n {trimmedName && (\n <FileInfoFileName\n weight=\"semibold\"\n data-testid=\"file-info-name\"\n >\n {trimmedName}\n </FileInfoFileName>\n )}\n {trimmedSize && (\n <FileInfoFileSize data-testid=\"file-info-size\">\n {trimmedSize}\n </FileInfoFileSize>\n )}\n </FileInfoTextWrapper>\n );\n };\n\n const renderThumbnails = () => {\n return (\n <ThumbnailContainer\n $insetBottom={insets?.bottom}\n aria-hidden=\"true\"\n >\n <ThumbnailWrapper>\n {items.map((item, index) => {\n const src = isCustomItem(item)\n ? item.thumbnailSrc\n : item.thumbnailSrc ?? item.src;\n return (\n <ThumbnailItemContainer key={index}>\n <ThumbnailItem\n data-testid=\"thumbnail-item\"\n $active={index === currentSlide}\n onClick={() => goToSlide(index)}\n ref={(el) =>\n (thumbnailRefs.current[index] = el)\n }\n >\n {src ? (\n <ThumbnailImage\n src={src}\n alt={`Thumbnail ${index + 1}`}\n fit=\"cover\"\n />\n ) : (\n <SlidePlaceholderImage />\n )}\n </ThumbnailItem>\n </ThumbnailItemContainer>\n );\n })}\n </ThumbnailWrapper>\n </ThumbnailContainer>\n );\n };\n\n return (\n <ModalV2\n {...otherProps}\n data-testid=\"image-carousel-modal\"\n aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n show={show}\n disableInitialFocus\n >\n <CarouselModalContent>\n <ImageGalleryContainer>\n <ImageGalleryWrapper>\n <ImageGallerySwipe\n ref={containerRef}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n >\n {renderSlides()}\n </ImageGallerySwipe>\n\n {!hideNavigation && (\n <>\n <ArrowButton\n aria-label={`Previous ${carouselItemNoun}`}\n data-testid=\"prev-btn\"\n $position=\"left\"\n onClick={goToPrevSlide}\n $insetLeft={insets?.left}\n $insetRight={insets?.right}\n >\n <ChevronLeftIcon aria-hidden />\n </ArrowButton>\n <ArrowButton\n aria-label={`Next ${carouselItemNoun}`}\n data-testid=\"forward-btn\"\n $position=\"right\"\n onClick={goToNextSlide}\n $insetLeft={insets?.left}\n $insetRight={insets?.right}\n >\n <ChevronRightIcon aria-hidden />\n </ArrowButton>\n </>\n )}\n\n {!hideCounter && (\n <BoxChip aria-hidden=\"true\">\n <Chip weight=\"semibold\">{`${currentSlide + 1}/${\n items.length\n }`}</Chip>\n </BoxChip>\n )}\n </ImageGalleryWrapper>\n\n {!hideThumbnail && renderThumbnails()}\n </ImageGalleryContainer>\n <TopActionButtons\n $hasFileInfo={hasFileInfo}\n $insetTop={insets?.top}\n $insetLeft={insets?.left}\n $insetRight={insets?.right}\n >\n {hasFileInfo && renderFileInfo()}\n {!hideMagnifier && !isCustomItem(currentItem) && (\n <MagnifierButton\n aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n onClick={handleMagnifier}\n >\n {zoom === 1 ? (\n <MagnifierPlusIcon aria-hidden />\n ) : (\n <MagnifierMinusIcon aria-hidden />\n )}\n </MagnifierButton>\n )}\n\n {onDelete && (\n <DeleteButton\n aria-label={`Delete ${\n (isCustomItem(currentItem) &&\n currentItem.itemLabel?.trim()) \|\|\n \"image\"\n }`}\n data-testid=\"delete-btn\"\n onClick={handleDelete}\n >\n <BinIcon aria-hidden />\n </DeleteButton>\n )}\n\n <CloseButton\n aria-label={\n hasAnyItemLabel\n ? \"Close carousel\"\n : \"Close image carousel\"\n }\n onClick={onClose}\n >\n <CrossIcon aria-hidden />\n </CloseButton>\n </TopActionButtons>\n </CarouselModalContent>\n </ModalV2>\n );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n FullscreenImageCarouselRef,\n FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","children","_jsxs","CarouselModalContent","ImageGalleryContainer","ImageGalleryWrapper","ImageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","ImageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","ImageGallerySlide","FocusableImageRegion","tabIndex","renderContent","SlidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","SlideImage","placeholder","fit","retrieveImageDimension","_Fragment","ArrowButton","$position","onClick","$insetLeft","left","$insetRight","right","ChevronLeftIcon","ChevronRightIcon","BoxChip","Chip","weight","ThumbnailContainer","$insetBottom","bottom","ThumbnailWrapper","thumbnailSrc","ThumbnailItemContainer","ThumbnailItem","$active","ThumbnailImage","TopActionButtons","$hasFileInfo","$insetTop","top","trimmedName","trimmedSize","FileInfoTextWrapper","FileInfoFileName","FileInfoFileSize","renderFileInfo","MagnifierButton","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","DeleteButton","BinIcon","CloseButton","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"whDA6DA,MAAMA,EACFC,KAEEA,GAAsB,WAAdA,EAAKC,KAENC,EAAY,CACrBC,EAaAC,YAbAC,MACIA,EAAKC,uBACLA,EAAsBC,cACtBA,GAAgB,EAAKC,eACrBA,IAAiB,EAAKC,YACtBA,IAAc,EAAKC,cACnBA,IAAgB,EAAKC,SACrBA,GAAQC,QACRA,GAAOC,OACPA,GAAMC,KACNA,IAAIX,EACDY,GAAUC,EAAAb,EAXjB,wIAkBA,MAAOc,GAAcC,IAAmBC,EACpCb,QAAAA,EAA0B,IAEvBc,GAAiBC,IAAqBC,EAE3C,CAAA,IACKC,GAAMC,IAAWF,EAAS,IAC1BG,GAAQC,IAAaJ,KACrBK,GAAMC,IAAWN,IAClBO,GAAeC,EAAuB,MACtCC,GAAgBD,EAAkC,IAClDE,GAAWF,EAA+C,IAC1DG,GAAWH,EAAuB,MAClCI,GAAOT,IAAUE,GAAOF,GAASE,GAAO,EACxCQ,GAAc9B,EAAMY,IACpBmB,GAAkB/B,EAAMgC,MACzBrC,IAAQ,IAAAG,EAAC,OAAAJ,EAAaC,OAAyB,QAAdG,EAAAH,EAAKsC,iBAAS,IAAAnC,OAAA,EAAAA,EAAEoC,OAAM,IAEtDC,GAAmBJ,GAAkB,OAAS,QAC9CK,GAAcC,GAChB,IACIrC,EAAMgC,MACDrC,YAAS,OAAa,UAAbA,EAAK2C,gBAAQ,IAAAxC,OAAA,EAAAA,EAAEoC,UAAuB,UAAbvC,EAAK4C,gBAAQ,IAAAC,OAAA,EAAAA,EAAEN,OAAM,KAEhE,CAAClC,IAGCyC,GAAmBC,GACpBC,YACG,MAAMhD,EAAOK,EAAM2C,GACbC,EAAgBb,GAAkB,OAAS,QAC3Cc,EAASnD,EAAaC,IACR,QAAdG,EAAAH,EAAKsC,iBAAS,IAAAnC,OAAA,EAAAA,EAAEoC,SAAU,IAClB,QAARM,EAAA7C,EAAKmD,WAAG,IAAAN,OAAA,EAAAA,EAAEN,SAAU,GACpBa,EAAgB,GAAGH,KAAiBD,EAAQ,QAC9C3C,EAAMgD,UAGV,OAAOH,EAAS,GAAGA,MAAWE,IAAkBA,CAAa,GAEjE,CAAC/C,EAAO+B,KAGZkB,EACIlD,GACA,KAAA,CACImD,iBAAkBtC,GAClBuC,eAAgBC,GAChBC,aAAcC,GACdC,aAAcC,OAOtBC,EAAiB,WA8DjB,SAAuBC,GACL,eAAVA,EAAEC,IACFH,KACiB,cAAVE,EAAEC,IACTL,KACiB,WAAVI,EAAEC,MACTpD,UAAAA,KAER,GAtE2C,YAE3CqD,GAAU,WACFnD,KACgB,QAAhBX,EAAA8B,GAASiC,eAAO,IAAA/D,GAAAA,EAAEgE,QACtB,GACD,CAACrD,KAEJmD,GAAU,KACe,IAAjB5D,EAAMgD,OAKNpC,GAAeZ,EAAMgD,OAAS,GAC9BnC,GAAgBb,EAAMgD,OAAS,GAL/BnC,GAAgB,EAMpB,GACD,CAACD,GAAcZ,EAAMgD,OAAQnC,KAEhC+C,GAAU,aAC+B,QAArCpB,UAAA1C,EAAA4B,GAAcmC,8BAAUjD,WAAa,IAAA4B,GAAAA,EAAEuB,eAAe,CAClDC,SAAU,SACVC,OAAQ,WAEZ9C,GAAQ,EAAE,GACX,CAACP,KAKJ,MAsBMsD,GAAcR,IAChBvC,GAAQuC,EAAES,MAAMC,MAAM,EAmB1B,MAWMC,GAAe,EACjBC,MACAC,SACAC,YAMAxD,IAAmByD,GACfC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYF,GAAQ,CAAEH,CAACA,GAAM,CAAEC,SAAQC,YACzC,EAGAI,GAAe,KACjB,IAAK9C,IAAepC,EAAaoC,IAC7B,OAGJ,MAAM+C,EAAiB9D,GAAgBe,GAAYwC,KAEnD,GAAI9C,GAAaqC,SAAagB,EAAgB,CAC1C,MAAMC,aAAEA,EAAYC,YAAEA,GAAgBvD,GAAaqC,SAC7CW,MAAEA,EAAKD,OAAEA,GAAWM,EAGpBG,EACFT,EAASC,EAAQM,EAAeC,EAEpC,OALmBP,EAAQO,GAAeR,EAASO,EAMxCE,EACDD,EAAcP,EACdM,EAAeP,EAGlBS,EACDF,GAAgBP,GAAUC,EAAQO,IAClCA,GAAeP,GAASD,EAASO,GAC3C,GAMExB,GAAgB,aACc,QAAhCd,EAAgB,QAAhB1C,EAAA6B,GAASkC,eAAO,IAAA/D,OAAA,EAAAA,EAAGc,WAAa,IAAA4B,GAAAA,EAAEyC,iBAClCpE,IACKqE,GAAmB,IAATA,EAAalF,EAAMgD,OAAS,EAAIkC,EAAO,IACjDC,IACGC,EAAe,UACfC,EAAS5C,GAAiB0C,GAAQ,SAAS,GAElD,EAGC3B,GAAgB,aACc,QAAhChB,EAAgB,QAAhB1C,EAAA6B,GAASkC,eAAO,IAAA/D,OAAA,EAAAA,EAAGc,WAAa,IAAA4B,GAAAA,EAAEyC,iBAClCpE,IACKqE,GAAUA,IAASlF,EAAMgD,OAAS,EAAI,EAAIkC,EAAO,IACjDC,IACGC,EAAe,UACfC,EAAS5C,GAAiB0C,GAAQ,SAAS,GAElD,EAGC/B,GAAaT,YACiB,QAAhCH,EAAgB,QAAhB1C,EAAA6B,GAASkC,eAAO,IAAA/D,OAAA,EAAAA,EAAGc,WAAa,IAAA4B,GAAAA,EAAEyC,iBAClCpE,GAAgB8B,EAAM,EAyI1B,OACI2C,EAACC,EAAOb,OAAAC,OAAA,CAAA,EACAjE,GAAU,CAAA,cACF,uBAAsB,aACtBqB,GAAkB,WAAa,iBAC3CtB,KAAMA,GACN+E,qBAAmB,EAAAC,SAEnBC,EAACC,EAAoB,CAAAF,SAAA,CACjBC,EAACE,aACGF,EAACG,EAAmB,CAAAJ,SAAA,CAChBH,EAACQ,EAAiB,CACd/F,IAAKyB,GACLuE,aA/QErC,IAClBxC,IAAQ,GAAGG,GAAUqC,EAAEsC,QAAQ,GAAGC,QAAQ,EA+Q1BC,YA5QCxC,KAChBtC,IAAUF,GAAO,GACtBK,GAAQmC,EAAEsC,QAAQ,GAAGC,QAAQ,EA2QTE,WAxQD,KACd3E,GAAaqC,UACduC,KAAKC,IAAIxE,IAAQL,GAAaqC,QAAQyC,YAAc,IAChDzE,GAAO,EACP2B,KAEAF,MAGRjC,QAAUkF,GACVhF,QAAQgF,GAAU,EA8P4Bd,SAhJ1CH,EAACkB,EAAkB,CACfC,MAAO,CACHC,UAAW,mBACS,KAAf9F,SACEiB,UACV4D,SAEAzF,EAAM2G,KAAI,CAAChH,EAAMgD,KACd,MAAMiE,EAAWjE,IAAU/B,GACrBiG,EACFT,KAAKC,IAAI1D,EAAQ/B,KAAiB,GAChB,IAAjBA,IAAsB+B,IAAU3C,EAAMgD,OAAS,GAC/CpC,KAAiBZ,EAAMgD,OAAS,GAAe,IAAVL,EAE1C,OACI2C,EAACwB,iBAA0C,aAAYrB,SACnDH,EAACyB,EAAoB,CACjBhH,IAAK6G,EAAWhF,GAAW,KAC3BoF,SAAUJ,EAAW,GAAI,EAAEnB,SAE1B/F,EAAaC,GACVkH,EACIlH,EAAKsH,gBAEL3B,EAAC4B,EAAqB,CAAA,GAG1B5B,EAAC6B,EAAgB,CACbpH,IAAMqH,GACDzF,GAASkC,QAAQlB,GAASyE,EAE/BC,QAAS,CACLC,SAAUpG,IAAQ,GAEtBqG,aAAc,EACdC,OAAQtD,GACRuD,WAAYvD,GACZwD,QAASxD,GAAUuB,SAEnBH,EAACqC,EAAkB,CAAAlC,SACfH,EAACsC,EAAU,CACPtD,IAAK3E,EAAK2E,IACVxB,IAAKL,GAAiBE,GACtBkF,YACIvC,EAAC4B,EAAqB,IAE1BY,IAAI,aACJC,wBAAsB,EACtB1D,aAAcA,YAjCd1B,EAuCJ,SA+FlBxC,IACEuF,EAAAsC,EAAA,CAAAvC,SAAA,CACIH,EAAC2C,gBACe,YAAY9F,KAAkB,cAC9B,WAAU+F,UACZ,OACVC,QAAS7E,GAAa8E,WACV5H,cAAM,EAANA,GAAQ6H,KAAIC,YACX9H,cAAM,EAANA,GAAQ+H,MAAK9C,SAE1BH,EAACkD,EAAe,CAAA,eAAA,MAEpBlD,EAAC2C,EAAW,CAAA,aACI,QAAQ9F,KAAkB,cAC1B,cAAa+F,UACf,QACVC,QAAS3E,GAAa4E,WACV5H,cAAM,EAANA,GAAQ6H,KAAIC,YACX9H,cAAM,EAANA,GAAQ+H,MAAK9C,SAE1BH,EAACmD,EAAgB,CAAA,eAAA,UAK3BrI,IACEkF,EAACoD,EAAO,CAAA,cAAa,OAAMjD,SACvBH,EAACqD,EAAI,CAACC,OAAO,WAAUnD,SAAE,GAAG7E,GAAe,KACvCZ,EAAMgD,iBAMpB9C,GA3FVoF,EAACuD,EAAkB,CAAAC,aACDtI,cAAM,EAANA,GAAQuI,OAAM,cAChB,gBAEZzD,EAAC0D,EAAgB,CAAAvD,SACZzF,EAAM2G,KAAI,CAAChH,EAAMgD,WACd,MAAM2B,EAAM5E,EAAaC,GACnBA,EAAKsJ,aACY,UAAjBtJ,EAAKsJ,oBAAY,IAAAnJ,EAAAA,EAAIH,EAAK2E,IAChC,OACIgB,EAAC4D,EAAsB,CAAAzD,SACnBH,EAAC6D,EAAa,CAAA,cACE,iBAAgBC,QACnBzG,IAAU/B,GACnBuH,QAAS,IAAM/E,GAAUT,GACzB5C,IAAMqH,GACD1F,GAAcmC,QAAQlB,GAASyE,EAAG3B,SAGtCnB,EACGgB,EAAC+D,EAAc,CACX/E,IAAKA,EACLxB,IAAK,aAAaH,EAAQ,IAC1BmF,IAAI,UAGRxC,EAAC4B,SAhBgBvE,EAmBJ,WAgErC+C,EAAC4D,EAAgB,CAAAC,aACCnH,GAAWoH,UACdhJ,cAAM,EAANA,GAAQiJ,IAAGrB,WACV5H,cAAM,EAANA,GAAQ6H,KAAIC,YACX9H,cAAM,EAANA,GAAQ+H,MAAK9C,SAAA,CAEzBrD,IAlIM,MACnB,MAAME,SAAEA,EAAQC,SAAEA,GAAaT,SAAAA,GAAe,CAAA,EACxC4H,EAAcpH,eAAAA,EAAUJ,OACxByH,EAAcpH,eAAAA,EAAUL,OAE9B,OACIwD,EAACkE,mBACoBD,cACP,SAAQ,cACN,OAAM,cACN,0BAEXD,GACGpE,EAACuE,GACGjB,OAAO,WAAU,cACL,iBAAgBnD,SAE3BiE,IAGRC,GACGrE,EAACwE,EAAgB,CAAA,cAAa,iBAAgBrE,SACzCkE,MAGS,EAyGEI,IACd1J,KAAkBX,EAAaoC,KAC7BwD,EAAC0E,EAAe,CAAA,aACS,IAAT9I,GAAa,UAAY,WACrCiH,QA1RA,iBACpB,GAAa,IAATjH,GAAY,CACZ,MAAM+I,EAAYrF,KACc,QAAhCpC,EAAgB,QAAhB1C,EAAA6B,GAASkC,eAAO,IAAA/D,OAAA,EAAAA,EAAGc,WAAa,IAAA4B,GAAAA,EAAE0H,WAAWD,GAC7C9I,GAAQ8I,QAAAA,EAAa,EACzB,MACI9I,GAAQ,GACwB,QAAhCgJ,EAAgB,QAAhBC,EAAAzI,GAASkC,eAAO,IAAAuG,OAAA,EAAAA,EAAGxJ,WAAa,IAAAuJ,GAAAA,EAAElF,gBACtC,EAkR4CQ,SAGpBH,EADM,IAATpE,GACImJ,EAEAC,EAFiB,CAAA,eAAA,MAO7BhK,IACGgF,EAACiF,EAAY,CAAA,aACG,UACP7K,EAAaoC,cACVU,EAAAV,GAAYG,gCAAWC,SAC3B,UACF,cACU,aACZiG,QA5TH,KACbrG,IAAexB,IACfA,GAASwB,GAAalB,GAC1B,EAyTyC6E,SAErBH,EAACkF,wBAITlF,EAACmF,gBAEO1I,GACM,iBACA,uBAEVoG,QAAS5H,GAAOkF,SAEhBH,EAACoF,gCAIP,EAILC,EAA0BC,EAGrC/K"}
1	+ {"version":3,"file":"fullscreen-image-carousel.js","sources":["../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n ChevronLeftIcon,\n ChevronRightIcon,\n CrossIcon,\n MagnifierMinusIcon,\n MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport 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/fullscreen-image-carousel/fullscreen-image-carousel.styles.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+export declare const tokens: {
+    topActionButtons: {
+        insetTop: string;
+        insetLeft: string;
+        insetRight: string;
+    };
+    arrowButton: {
+        insetLeft: string;
+        insetRight: string;
+    };
+    thumbnailContainer: {
+        insetBottom: string;
+    };
+};
+export declare const topActionButtons: import("@linaria/core").LinariaClassName;
+export declare const iconButton: import("@linaria/core").LinariaClassName;
+export declare const iconButtonError: import("@linaria/core").LinariaClassName;
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonLeft: import("@linaria/core").LinariaClassName;
+export declare const arrowButtonRight: import("@linaria/core").LinariaClassName;
+export declare const carouselModalContent: import("@linaria/core").LinariaClassName;
+export declare const imageGalleryContainer: import("@linaria/core").LinariaClassName;
+export declare const imageGalleryWrapper: import("@linaria/core").LinariaClassName;
+export declare const imageGallerySwipe: import("@linaria/core").LinariaClassName;
+export declare const imageGallerySlides: import("@linaria/core").LinariaClassName;
+export declare const imageGallerySlide: import("@linaria/core").LinariaClassName;
+export declare const focusableImageRegion: import("@linaria/core").LinariaClassName;
+export declare const slideImage: import("@linaria/core").LinariaClassName;
+export declare const slidePlaceholderImage: import("@linaria/core").LinariaClassName;
+export declare const boxChip: import("@linaria/core").LinariaClassName;
+export declare const chip: import("@linaria/core").LinariaClassName;
+export declare const thumbnailContainer: import("@linaria/core").LinariaClassName;
+export declare const thumbnailWrapper: import("@linaria/core").LinariaClassName;
+export declare const thumbnailItemContainer: import("@linaria/core").LinariaClassName;
+export declare const thumbnailItem: import("@linaria/core").LinariaClassName;
+export declare const thumbnailImage: import("@linaria/core").LinariaClassName;
+export declare const fileInfoTextWrapper: import("@linaria/core").LinariaClassName;
+export declare const fileInfoTextWrapperCentered: import("@linaria/core").LinariaClassName;
+export declare const fileInfoFileName: import("@linaria/core").LinariaClassName;
+export declare const fileInfoFileSize: import("@linaria/core").LinariaClassName;

package/fullscreen-image-carousel/fullscreen-image-carousel.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./fullscreen-image-carousel.styles_vc6y5c.css";const t={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"}},e="t1d7v1ct",n="ijhrw4g",s="i19oam1e",i="aay3qsa",o="a1mt5dqp",l="a1nolxbp",a="c1w96xh3",r="i1cp8dqy",u="ifd12u9",c="i1pu33mh",f="iwm8xb6",m="i1p6ye8c",d="f1wd1tos",p="sd4ndfo",g="sd6bpod",h="b1y1lz2m",w="c1q4y0yr",y="t12djler",B="t15s3u6v",C="t137aivh",b="tlwncl",I="t1uearuq",A="fytebwh",q="f1ysk79e",v="f1cpwiz6",x="f17g5ble";export{i as arrowButton,o as arrowButtonLeft,l as arrowButtonRight,h as boxChip,a as carouselModalContent,w as chip,v as fileInfoFileName,x as fileInfoFileSize,A as fileInfoTextWrapper,q as fileInfoTextWrapperCentered,d as focusableImageRegion,n as iconButton,s as iconButtonError,r as imageGalleryContainer,m as imageGallerySlide,f as imageGallerySlides,c as imageGallerySwipe,u as imageGalleryWrapper,p as slideImage,g as slidePlaceholderImage,y as thumbnailContainer,I as thumbnailImage,b as thumbnailItem,C as thumbnailItemContainer,B as thumbnailWrapper,t as tokens,e as topActionButtons};
2	+ //# sourceMappingURL=fullscreen-image-carousel.styles.js.map

package/fullscreen-image-carousel/fullscreen-image-carousel.styles.js.map ADDED Viewed

@@ -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":["tokens","topActionButtons","insetTop","insetLeft","insetRight","arrowButton","thumbnailContainer","insetBottom","iconButton","iconButtonError","arrowButtonLeft","arrowButtonRight","carouselModalContent","imageGalleryContainer","imageGalleryWrapper","imageGallerySwipe","imageGallerySlides","imageGallerySlide","focusableImageRegion","slideImage","slidePlaceholderImage","boxChip","chip","thumbnailWrapper","thumbnailItemContainer","thumbnailItem","thumbnailImage","fileInfoTextWrapper","fileInfoTextWrapperCentered","fileInfoFileName","fileInfoFileSize"],"mappings":"+FAeO,MAAMA,EAAS,CAClBC,iBAAkB,CACdC,SACI,mEACJC,UACI,oEACJC,WACI,sEAERC,YAAa,CACTF,UACI,+DACJC,WACI,iEAERE,mBAAoB,CAChBC,YACI,0EAQCN,EAAgB,WAsEhBO,EAAU,UAwBVC,EAAe,WAIfJ,EAAW,UAUXK,EAAe,WAYfC,EAAgB,WAehBC,EAAoB,WAQpBC,EAAqB,WAQrBC,EAAmB,UAUnBC,EAAiB,WAQjBC,EAAkB,UAUlBC,EAAiB,WAkBjBC,EAAoB,WAepBC,EAAU,UAMVC,EAAqB,UAQrBC,EAAO,WAaPC,EAAI,WAcJhB,EAAkB,WAsBlBiB,EAAgB,WAUhBC,EAAsB,WAatBC,EAAa,SA0CbC,EAAc,WASdC,EAAmB,UAanBC,EAA2B,WAI3BC,EAAgB,WAQhBC,EAAgB"}

package/fullscreen-image-carousel/fullscreen-image-carousel.styles_vc6y5c.css ADDED Viewed

@@ -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/fullscreen-image-carousel/stateful-image.js CHANGED Viewed

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

package/fullscreen-image-carousel/stateful-image.js.map CHANGED Viewed

	@@ -1 +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":["StatefulImage","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":"~~6aA4BaA~~,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,~~IAE1BG~~,GAAU,~~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~~,~~EAACC~~,~~EAAY~~,~~CAACrB~~,~~UAAWA~~,~~EAASsB~~,~~SAXjCb~~,~~EACON~~,QAAAA,~~EAAeiB~~,~~EAACG~~,~~EAAkB~~,~~IAGzCjB~~,~~EACOc~~,~~EAACI~~,EAAW,~~IAGhBJ~~,~~EAACK~~,~~EAAQ~~,~~CAAC1B~~,IAAKA,~~EAAKE~~,IAAKA,~~EAAGyB~~,~~KAAQxB~~,~~KAG4B~~"}
1	+ {"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":["StatefulImage","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":"+0BA2BaA,EAAgB,EACzBC,MACAC,YACAC,MACAC,MACAC,cACAC,yBACAC,mBAEA,MAAOC,EAASC,GAAcC,GAAS,IAChCC,EAAOC,GAAYF,IACpBG,EAAWC,EAAyB,MAE1CC,EAAcF,EAAU,CACpB,CAACG,EAAcC,SAASb,KAAMA,IAGlCc,GAAU,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,EAAA,MAAA,CAAKzB,UAAW0B,EAAKC,EAAqB3B,GAAU4B,SAvBhDnB,EAEIN,QAAAA,EACIsB,EAACI,EAAgB,CAAC7B,UAAW8B,IAKrCxB,EACOmB,EAACM,EAAW,IAInBN,SACIO,IAAKrB,EACLZ,IAAKA,EACLE,IAAKA,EACLD,UAAWiC,KAQb"}

package/fullscreen-image-carousel/stateful-image.styles.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export declare const tokens: {
+    imageBox: {
+        fit: string;
+    };
+};
+export declare const imageWrapper: import("@linaria/core").LinariaClassName;
+export declare const imageBox: import("@linaria/core").LinariaClassName;
+export declare const defaultPlaceholder: import("@linaria/core").LinariaClassName;

package/fullscreen-image-carousel/stateful-image.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./stateful-image.styles_1xe8ypm.css";const e={imageBox:{fit:"--fds-internal-fullscreenImageCarousel-statefulImage-imageBox-fit"}},s="i1h1mxc8",a="i1k1jgcv",t="d1w2ubkx";export{t as defaultPlaceholder,a as imageBox,s as imageWrapper,e as tokens};
2	+ //# sourceMappingURL=stateful-image.styles.js.map

package/fullscreen-image-carousel/stateful-image.styles.js.map ADDED Viewed

@@ -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":["tokens","imageBox","fit","imageWrapper","defaultPlaceholder"],"mappings":"qFAEO,MAAMA,EAAS,CAClBC,SAAU,CACNC,IAAK,sEAIAC,EAAY,WAMZF,EAAQ,WASRG,EAAkB"}

package/fullscreen-image-carousel/stateful-image.styles_1xe8ypm.css ADDED Viewed

@@ -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/histogram-slider/histogram-slider.js CHANGED Viewed

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

package/histogram-slider/histogram-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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":["HistogramSlider","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","useRef","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","_jsx","styles.separator","every","selectionDescription","_Fragment","styles.histogram","HistogramBar","isSelected","isDisabled","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider","ratio","barRef","useApplyStyle","height","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref"],"mappings":"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"}
1	+ {"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":["HistogramSlider","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","className","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","useRef","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","_jsx","styles.separator","every","selectionDescription","_Fragment","styles.histogram","HistogramBar","isSelected","isDisabled","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider","ratio","barRef","useApplyStyle","height","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref"],"mappings":"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"}

package/image-button/image-button.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./image-button.styles_qtt605.css";const t="mqb1plh",m="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{t as main,n as mainDisabled,s as mainError,o as mainSelected,m as mainSelectedText};
+import"./image-button.styles_6n1qsr.css";const m="mqb1plh",t="mpjl8bn",o="mroo32y",s="mz6wr40",n="m1hsk0n5";export{m as main,n as mainDisabled,s as mainError,o as mainSelected,t as mainSelectedText};
 //# sourceMappingURL=image-button.styles.js.map

package/image-button/image-button.styles_6n1qsr.css ADDED Viewed

@@ -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-body);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-body);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;}

package/index.d.ts CHANGED Viewed

@@ -44,7 +44,6 @@ export * from "./layout";
 export * from "./link-list";
 export * from "./markup";
 export * from "./masked-input";
-export * from "./masonry";
 export * from "./masthead";
 export * from "./menu";
 export * from "./modal";
@@ -57,7 +56,6 @@ export * from "./pagination";
 export * from "./phone-number-input";
 export * from "./pill";
 export * from "./popover";
-export * from "./popover-v2";
 export * from "./predictive-text-input";
 export * from "./progress-indicator";
 export * from "./radio-button";
@@ -79,16 +77,6 @@ export * from "./timepicker";
 export * from "./timetable";
 export * from "./toast";
 export * from "./toggle";
-export * from "./tooltip";
 export * from "./typography";
 export * from "./uneditable-section";
 export * from "./unit-number";
-export * from "./v2_color";
-export * from "./v2_design-token";
-export * from "./v2_layout";
-export * from "./v2_media";
-export * from "./v2_text";
-export * from "./v2_text-list";
-export * from "./v2_theme";
-export * from "./v2_transition";
-export * from "./v3_theme";

package/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{withPopover}from"./popover/popover-hoc.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{getInheritedInlineCssVariables,parseCSSVariableValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{generateFont,generateFontProperties}from"./theme/utils/font.js";export{DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,useSafeMaxWidthMediaQuery}from"./theme/utils/media-query.js";export{getEffectiveTokenOrCustom,getResolvedValue,getTokenOrDefault,isTokenFromSet,isTokenWithPrefix,toCssValue}from"./theme/utils/token-resolver.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken,useResolvedTokenValue}from"./theme/utils/use-design-token.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_Text}from"./v2_text/text.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{V3_A11yPlaygroundTheme,V3_BookingSGTheme,V3_Border,V3_Breakpoint,V3_CCubeTheme,V3_Colour,V3_Font,V3_IMDATheme,V3_LifeSGTheme,V3_MediaQuery,V3_Motion,V3_MyLegacyTheme,V3_OneServiceTheme,V3_PATheme,V3_RBSTheme,V3_Radius,V3_SGWDigitalLobbyTheme,V3_SGWDigitalLobbyThemeBase,V3_SMGSTheme,V3_SPFTheme,V3_Shadow,V3_Spacing,V3_SupportGoWhereTheme,V3_SupportGoWhereThemeBase}from"./v3_theme/index.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{V3_DSThemeProvider}from"./v3_theme/ds-theme-provider.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./v3_theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DashedBorder}from"./dashed-border/dashed-border.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{Example}from"./example/example.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{Popover}from"./popover/popover.js";export{PopoverInline}from"./popover/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{ThemeProvider}from"./theme/theme-provider/index.js";export{useInheritedThemeScope,useTheme}from"./theme/theme-provider/hooks.js";export{Border,BorderStyle,BorderThickness}from"./theme/tokens/border.js";export{Breakpoint}from"./theme/tokens/breakpoint.js";export{Colour,PrimitiveColours,SemanticColours}from"./theme/tokens/colour.js";export{ComponentToken}from"./theme/tokens/component.js";export{Font,FontSpec}from"./theme/tokens/font.js";export{MediaQuery}from"./theme/tokens/media-query.js";export{Motion}from"./theme/tokens/motion.js";export{Radius}from"./theme/tokens/radius.js";export{Shadow}from"./theme/tokens/shadow.js";export{Spacing}from"./theme/tokens/spacing.js";export{THEME_TYPES}from"./theme/types.js";export{formatUnitValue,parsePxOrRemValue}from"./theme/utils/css-variable.js";export{useApplyStyle}from"./theme/utils/use-apply-styles.js";export{useDesignToken}from"./theme/utils/use-design-token.js";export{useMaxWidthMediaQuery,useMediaQuery,useMinWidthMediaQuery,useResolvedBreakpointToken}from"./theme/utils/use-media-query.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Typography}from"./typography/index.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";
 //# sourceMappingURL=index.js.map