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

package/cjs/form/form-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper.js","sources":["../../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport type { ElementType } from \"react\";\nimport { Children, cloneElement } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { useId } from \"../util\";\nimport { FormErrorMessage, FormLabel } from \"./form-label\";\nimport * as styles from \"./form-wrapper.styles\";\nimport type { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    children,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ElementType => {\n        switch (layoutType) {\n            case \"grid\":\n                return ColDiv;\n            case \"flex\":\n                return \"div\";\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) =>\n            cloneElement(child, ariaState)\n        );\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            className={styles.container}\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <FormErrorMessage\n                    id={errorMessageId}\n                    tabIndex={0}\n                    data-testid={\n                        errorTestId ??\n                        // FIXME: kept for backwards-compatibility\n                        // in most cases data-testid should be separate from id\n                        (id ? `${id}-error-message` : \"error-message\")\n                    }\n                >\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["label","errorMessage","eRaw","id","children","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","ColDiv","getContainerComponent","_jsxs","className","styles.container","getContainerLayoutProps","_jsx","FormLabel","htmlFor","Object","assign","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","cloneElement","renderChildren","FormErrorMessage","tabIndex"],"mappings":"0YAe2B,EACvBA,QACAC,aAAcC,EACdC,KACAC,WACAC,aACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GAgCGV,IACAC,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCP,GACD,OA1CTJ,EAA+B,iBAATC,EAAoBA,EAAKc,OAASd,EACxDe,EAAaC,EAAAA,QACbC,EAAU,GAAGhB,QAAAA,EAAMc,UACnBG,EAAa,GAAGjB,QAAAA,EAAMc,mBACtBI,EAAiB,GAAGlB,QAAAA,EAAMc,kBA4ChC,MAmEMK,EAlDwB,CAC1BjB,IAEA,OAAQA,GACJ,IAAK,OACD,OAAOkB,EAAAA,OACX,IAAK,OACD,MAAO,QA2CQC,CAAsBT,GAEjD,OACIU,EAAAA,KAACH,iBACGI,UAAWC,EAAAA,wBACEd,GAxEW,CAACR,IAC7B,OAAQA,GACJ,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SA4DAgB,CAAwBb,GAAkB,CAAAX,SAAA,CAE7CJ,IA1CgB,iBAAVA,EAEH6B,EAAAA,IAACC,EAAAA,UAAS,CACNC,QAAS,GAAG5B,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,EAAOf,SAEVJ,IAKT6B,EAAAA,IAACC,EAAAA,UAASE,OAAAC,OAAA,CACNF,QAAS,GAAG5B,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,GACAnB,KAKO,MACnB,MAAMkC,EAAY,CACd,iBA/FKhC,EAgGL,mBAvFA,CACID,EAAeoB,OAAiBc,EANhB,iBAAVnC,IAAwBA,aAAK,EAALA,EAAOoC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EAmFlB,kBAAmBnC,EAAQmB,OAAUgB,GAEzC,OAAOK,EAAAA,SAASC,IAAIrC,GAAWsC,GAC3BC,eAAaD,EAAOR,IACvB,EAYIU,GACA3C,GACG4B,EAAAA,IAACgB,EAAAA,kBACG1C,GAAIkB,EACJyB,SAAU,EAAC,cAEPhC,QAAAA,EAGCX,EAAK,GAAGA,kBAAqB,gBAAgBC,SAGjDH,OAGQ"}
+{"version":3,"file":"form-wrapper.js","sources":["../../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport type { ElementType } from \"react\";\nimport { Children, cloneElement, Fragment, isValidElement } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { useId } from \"../util\";\nimport { FormErrorMessage, FormLabel } from \"./form-label\";\nimport * as styles from \"./form-wrapper.styles\";\nimport type { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    children,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ElementType => {\n        switch (layoutType) {\n            case \"grid\":\n                return ColDiv;\n            case \"flex\":\n                return \"div\";\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) => {\n            if (isValidElement(child) && child.type === Fragment) {\n                return cloneElement(child);\n            }\n            return cloneElement(child, ariaState);\n        });\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            className={styles.container}\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <FormErrorMessage\n                    id={errorMessageId}\n                    tabIndex={0}\n                    data-testid={\n                        errorTestId ??\n                        // FIXME: kept for backwards-compatibility\n                        // in most cases data-testid should be separate from id\n                        (id ? `${id}-error-message` : \"error-message\")\n                    }\n                >\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["label","errorMessage","eRaw","id","children","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","ColDiv","getContainerComponent","_jsxs","className","styles.container","getContainerLayoutProps","_jsx","FormLabel","htmlFor","Object","assign","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","isValidElement","type","Fragment","cloneElement","renderChildren","FormErrorMessage","tabIndex"],"mappings":"0YAe2B,EACvBA,QACAC,aAAcC,EACdC,KACAC,WACAC,aACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GAgCGV,IACAC,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCP,GACD,OA1CTJ,EAA+B,iBAATC,EAAoBA,EAAKc,OAASd,EACxDe,EAAaC,EAAAA,QACbC,EAAU,GAAGhB,QAAAA,EAAMc,UACnBG,EAAa,GAAGjB,QAAAA,EAAMc,mBACtBI,EAAiB,GAAGlB,QAAAA,EAAMc,kBA4ChC,MAsEMK,EArDwB,CAC1BjB,IAEA,OAAQA,GACJ,IAAK,OACD,OAAOkB,EAAAA,OACX,IAAK,OACD,MAAO,QA8CQC,CAAsBT,GAEjD,OACIU,EAAAA,KAACH,iBACGI,UAAWC,EAAAA,wBACEd,GA3EW,CAACR,IAC7B,OAAQA,GACJ,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SA+DAgB,CAAwBb,GAAkB,CAAAX,SAAA,CAE7CJ,IA7CgB,iBAAVA,EAEH6B,EAAAA,IAACC,EAAAA,UAAS,CACNC,QAAS,GAAG5B,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,EAAOf,SAEVJ,IAKT6B,EAAAA,IAACC,EAAAA,UAASE,OAAAC,OAAA,CACNF,QAAS,GAAG5B,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIgB,GACAnB,KAKO,MACnB,MAAMkC,EAAY,CACd,iBA/FKhC,EAgGL,mBAvFA,CACID,EAAeoB,OAAiBc,EANhB,iBAAVnC,IAAwBA,aAAK,EAALA,EAAOoC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EAmFlB,kBAAmBnC,EAAQmB,OAAUgB,GAEzC,OAAOK,WAASC,IAAIrC,GAAWsC,GACvBC,EAAAA,eAAeD,IAAUA,EAAME,OAASC,EAAAA,SACjCC,EAAAA,aAAaJ,GAEjBI,EAAAA,aAAaJ,EAAOR,IAC7B,EAYGa,GACA9C,GACG4B,EAAAA,IAACmB,EAAAA,kBACG7C,GAAIkB,EACJ4B,SAAU,EAAC,cAEPnC,QAAAA,EAGCX,EAAK,GAAGA,kBAAqB,gBAAgBC,SAGjDH,OAGQ"}

package/cjs/form/form-wrapper.styles_199rslu.css

@@ -1 +1 @@
-.c10mmo3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.c10mmo3e:not(:last-child){margin-bottom:var(--fds-spacing-32);}
+@layer fds{.c10mmo3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.c10mmo3e:not(:last-child){margin-bottom:var(--fds-spacing-32);}}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),r=require("@lifesg/react-icons/bin"),a=require("@react-aria/live-announcer"),l=require("clsx"),n=require("react"),s=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),u=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/hooks/use-state-callback.js");require("../external/lodash/_root.js"),require("../external/lodash/_baseGetTag.js");var d=require("../shared/image-placeholder/image-placeholder.js");require("../theme/theme-provider/index.js");var m=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var v=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var f=require("../util/use-event-listener.js"),g=require("./fullscreen-image-carousel.styles.js"),p=require("./stateful-image.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(l);const b=e=>!!e&&"custom"===e.type,I=(l,j)=>{var I,{items:y,initialActiveItemIndex:C,hideThumbnail:N=!1,hideNavigation:q=!1,hideCounter:k=!1,hideMagnifier:w=!1,onDelete:S,onClose:B,insets:T,show:R}=l,A=e.__rest(l,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[$,M]=c.useStateCallback(null!=C?C:0),[L,P]=n.useState({}),[V,W]=n.useState(1),[E,D]=n.useState(),[G,U]=n.useState(),_=n.useRef(null),z=n.useRef([]),F=n.useRef([]),X=n.useRef(null),Z=n.useRef(null),O=n.useRef(null),H=n.useRef(null),J=n.useRef(null),K=E&&G?E-G:0,Q=y[$],Y=y.some((e=>{var i;return b(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),ee=Y?"item":"image",ie=n.useMemo((()=>y.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[y]);h.useApplyStyle(Z,{[g.tokens.topActionButtons.insetTop]:m.formatUnitValue(null==T?void 0:T.top,"px"),[g.tokens.topActionButtons.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px"),[g.tokens.topActionButtons.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(O,{[g.tokens.arrowButton.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px")}),h.useApplyStyle(H,{[g.tokens.arrowButton.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(J,{[g.tokens.thumbnailContainer.insetBottom]:m.formatUnitValue(null==T?void 0:T.bottom,"px")});const te=n.useCallback((e=>{var i,t;const r=y[e],a=Y?"Item":"Image",l=b(r)?(null===(i=r.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=r.alt)||void 0===t?void 0:t.trim())||"",n=`${a} ${e+1} of ${y.length}.`;return l?`${l}. ${n}`:n}),[y,Y]);n.useImperativeHandle(j,(()=>({currentItemIndex:$,setCurrentItem:oe,goToPrevItem:ne,goToNextItem:se}))),f.useEventListener("keydown",(function(e){"ArrowRight"===e.key?se():"ArrowLeft"===e.key?ne():"Escape"===e.key&&(null==B||B())}),"document"),n.useEffect((()=>{var e;R&&(null===(e=X.current)||void 0===e||e.focus())}),[R]),n.useEffect((()=>{0!==y.length?$>y.length-1&&M(y.length-1):M(0)}),[$,y.length,M]),n.useEffect((()=>{var e,i;null===(i=null===(e=z.current)||void 0===e?void 0:e[$])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),W(1)}),[$]);const re=e=>{W(e.state.scale)};const ae=({src:e,height:i,width:t})=>{P((r=>Object.assign(Object.assign({},r),{[e]:{height:i,width:t}})))},le=()=>{if(!Q||b(Q))return;const e=L[Q.src];if(_.current&&e){const{clientHeight:i,clientWidth:t}=_.current,{width:r,height:a}=e,l=a/r<i/t;return r<t&&a<i?l?t/r:i/a:l?i/(a/(r/t)):t/(r/(a/i))}},ne=()=>{var e,i;null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>0===e?y.length-1:e-1),(e=>{a.clearAnnouncer("polite"),a.announce(te(e),"polite")}))},se=()=>{var e,i;null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>e===y.length-1?0:e+1),(e=>{a.clearAnnouncer("polite"),a.announce(te(e),"polite")}))},oe=e=>{var i,t;null===(t=null===(i=F.current)||void 0===i?void 0:i[$])||void 0===t||t.resetTransform(),M(e)};return i.jsx(o.ModalV2,Object.assign({},A,{"data-testid":"image-carousel-modal","aria-label":Y?"Carousel":"Image carousel",show:R,disableInitialFocus:!0,children:i.jsxs("div",{className:g.carouselModalContent,children:[i.jsxs("div",{className:g.imageGalleryContainer,children:[i.jsxs("div",{className:g.imageGalleryWrapper,children:[i.jsx("div",{className:g.imageGallerySwipe,ref:_,onTouchStart:e=>{V<=1&&D(e.touches[0].clientX)},onTouchMove:e=>{!E||V>1||U(e.touches[0].clientX)},onTouchEnd:()=>{_.current&&(Math.abs(K)>_.current.offsetWidth/3&&(K>0?se():ne()),D(void 0),U(void 0))},children:i.jsx("div",{className:g.imageGallerySlides,style:{transform:`translateX(calc(${100*-$}% - ${K}px))`},children:y.map(((e,t)=>{const r=t===$,a=Math.abs(t-$)<=1||0===$&&t===y.length-1||$===y.length-1&&0===t;return i.jsx("div",{className:g.imageGallerySlide,"data-testid":"slide-item",children:i.jsx("div",{className:g.focusableImageRegion,ref:r?X:null,tabIndex:r?0:-1,children:b(e)?a?e.renderContent():i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}):i.jsx(s.TransformWrapper,{ref:e=>F.current[t]=e,panning:{disabled:V<=1},initialScale:1,onZoom:re,onZoomStop:re,onWheel:re,children:i.jsx(s.TransformComponent,{children:i.jsx(p.StatefulImage,{className:g.slideImage,src:e.src,alt:te(t),placeholder:i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}),fit:"scale-down",retrieveImageDimension:!0,setDimension:ae})})})})},t)}))})}),!q&&i.jsxs(i.Fragment,{children:[i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonLeft),ref:O,"aria-label":`Previous ${ee}`,"data-testid":"prev-btn",onClick:ne,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonRight),ref:H,"aria-label":`Next ${ee}`,"data-testid":"forward-btn",onClick:se,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!k&&i.jsx("div",{className:g.boxChip,"aria-hidden":"true",children:i.jsx(v.Typography.BodyXS,{className:g.chip,weight:"semibold","data-testid":"carousel-counter",children:`${$+1}/${y.length}`})})]}),!N&&i.jsx("div",{className:g.thumbnailContainer,ref:J,"aria-hidden":"true","data-testid":"thumbnail-container",children:i.jsx("div",{className:g.thumbnailWrapper,children:y.map(((e,t)=>{var r;const a=b(e)?e.thumbnailSrc:null!==(r=e.thumbnailSrc)&&void 0!==r?r:e.src;return i.jsx("div",{className:g.thumbnailItemContainer,children:i.jsx("div",{className:g.thumbnailItem,"data-active":t===$,"data-testid":"thumbnail-item",onClick:()=>oe(t),ref:e=>z.current[t]=e,children:a?i.jsx(p.StatefulImage,{className:g.thumbnailImage,src:a,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage})})},t)}))})})]}),i.jsxs("div",{className:g.topActionButtons,ref:Z,"data-has-file-info":ie,children:[ie&&(()=>{const{fileName:e,fileSize:t}=null!=Q?Q:{},r=null==e?void 0:e.trim(),a=null==t?void 0:t.trim();return i.jsxs("div",{className:x.default(g.fileInfoTextWrapper,!a&&g.fileInfoTextWrapperCentered),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i.jsx(v.Typography.BodyBL,{className:g.fileInfoFileName,weight:"semibold","data-testid":"file-info-name",children:r}),a&&i.jsx(v.Typography.BodyMD,{className:g.fileInfoFileSize,"data-testid":"file-info-size",children:a})]})})(),!w&&!b(Q)&&i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":1===V?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,r;if(1===V){const t=le();null===(i=null===(e=F.current)||void 0===e?void 0:e[$])||void 0===i||i.centerView(t),W(null!=t?t:1)}else W(1),null===(r=null===(t=F.current)||void 0===t?void 0:t[$])||void 0===r||r.resetTransform()},children:1===V?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),S&&i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.iconButtonError),"aria-label":`Delete ${b(Q)&&(null===(I=Q.itemLabel)||void 0===I?void 0:I.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Q&&S&&S(Q,$)},children:i.jsx(r.BinIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":Y?"Close carousel":"Close image carousel",onClick:B,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},y=n.forwardRef(I);exports.Component=I,exports.FullscreenImageCarousel=y;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons"),l=require("@lifesg/react-icons/bin"),r=require("@react-aria/live-announcer"),a=require("clsx"),n=require("react"),s=require("react-zoom-pan-pinch"),o=require("../modal-v2/index.js"),u=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/hooks/use-state-callback.js"),d=require("../shared/image-placeholder/image-placeholder.js");require("../theme/theme-provider/index.js");var m=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var h=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var v=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js");var f=require("../util/use-event-listener.js"),g=require("./fullscreen-image-carousel.styles.js"),p=require("./stateful-image.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=j(a);const b=e=>!!e&&"custom"===e.type,I=(a,j)=>{var I,{items:y,initialActiveItemIndex:C,hideThumbnail:N=!1,hideNavigation:k=!1,hideCounter:q=!1,hideMagnifier:w=!1,onDelete:S,onClose:B,insets:T,show:R}=a,A=e.__rest(a,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[$,M]=c.useStateCallback(null!=C?C:0),[L,P]=n.useState({}),[V,W]=n.useState(1),[E,D]=n.useState(),[U,z]=n.useState(),F=n.useRef(null),G=n.useRef([]),X=n.useRef([]),Z=n.useRef(null),_=n.useRef(null),O=n.useRef(null),H=n.useRef(null),J=n.useRef(null),K=E&&U?E-U:0,Q=y[$],Y=y.some((e=>{var i;return b(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),ee=Y?"item":"image",ie=n.useMemo((()=>y.some((e=>{var i,t;return(null===(i=e.fileName)||void 0===i?void 0:i.trim())||(null===(t=e.fileSize)||void 0===t?void 0:t.trim())}))),[y]);h.useApplyStyle(_,{[g.tokens.topActionButtons.insetTop]:m.formatUnitValue(null==T?void 0:T.top,"px"),[g.tokens.topActionButtons.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px"),[g.tokens.topActionButtons.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(O,{[g.tokens.arrowButton.insetLeft]:m.formatUnitValue(null==T?void 0:T.left,"px")}),h.useApplyStyle(H,{[g.tokens.arrowButton.insetRight]:m.formatUnitValue(null==T?void 0:T.right,"px")}),h.useApplyStyle(J,{[g.tokens.thumbnailContainer.insetBottom]:m.formatUnitValue(null==T?void 0:T.bottom,"px")});const te=n.useCallback((e=>{var i,t;const l=y[e],r=Y?"Item":"Image",a=b(l)?(null===(i=l.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=l.alt)||void 0===t?void 0:t.trim())||"",n=`${r} ${e+1} of ${y.length}.`;return a?`${a}. ${n}`:n}),[y,Y]);n.useImperativeHandle(j,(()=>({currentItemIndex:$,setCurrentItem:oe,goToPrevItem:ne,goToNextItem:se}))),f.useEventListener("keydown",(function(e){"ArrowRight"===e.key?se():"ArrowLeft"===e.key?ne():"Escape"===e.key&&(null==B||B())}),"document"),n.useEffect((()=>{var e;R&&(null===(e=Z.current)||void 0===e||e.focus())}),[R]),n.useEffect((()=>{0!==y.length?$>y.length-1&&M(y.length-1):M(0)}),[$,y.length,M]),n.useEffect((()=>{var e,i;null===(i=null===(e=G.current)||void 0===e?void 0:e[$])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),W(1)}),[$]);const le=e=>{W(e.state.scale)};const re=({src:e,height:i,width:t})=>{P((l=>Object.assign(Object.assign({},l),{[e]:{height:i,width:t}})))},ae=()=>{if(!Q||b(Q))return;const e=L[Q.src];if(F.current&&e){const{clientHeight:i,clientWidth:t}=F.current,{width:l,height:r}=e,a=r/l<i/t;return l<t&&r<i?a?t/l:i/r:a?i/(r/(l/t)):t/(l/(r/i))}},ne=()=>{var e,i;null===(i=null===(e=X.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>0===e?y.length-1:e-1),(e=>{r.clearAnnouncer("polite"),r.announce(te(e),"polite")}))},se=()=>{var e,i;null===(i=null===(e=X.current)||void 0===e?void 0:e[$])||void 0===i||i.resetTransform(),M((e=>e===y.length-1?0:e+1),(e=>{r.clearAnnouncer("polite"),r.announce(te(e),"polite")}))},oe=e=>{var i,t;null===(t=null===(i=X.current)||void 0===i?void 0:i[$])||void 0===t||t.resetTransform(),M(e)};return i.jsx(o.ModalV2,Object.assign({},A,{"data-testid":"image-carousel-modal","aria-label":Y?"Carousel":"Image carousel",show:R,disableInitialFocus:!0,children:i.jsxs("div",{className:g.carouselModalContent,children:[i.jsxs("div",{className:g.imageGalleryContainer,children:[i.jsxs("div",{className:g.imageGalleryWrapper,children:[i.jsx("div",{className:g.imageGallerySwipe,ref:F,onTouchStart:e=>{V<=1&&D(e.touches[0].clientX)},onTouchMove:e=>{!E||V>1||z(e.touches[0].clientX)},onTouchEnd:()=>{F.current&&(Math.abs(K)>F.current.offsetWidth/3&&(K>0?se():ne()),D(void 0),z(void 0))},children:i.jsx("div",{className:g.imageGallerySlides,style:{transform:`translateX(calc(${100*-$}% - ${K}px))`},children:y.map(((e,t)=>{const l=t===$,r=Math.abs(t-$)<=1||0===$&&t===y.length-1||$===y.length-1&&0===t;return i.jsx("div",{className:g.imageGallerySlide,"data-testid":"slide-item",children:i.jsx("div",{className:g.focusableImageRegion,ref:l?Z:null,tabIndex:l?0:-1,children:b(e)?r?e.renderContent():i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}):i.jsx(s.TransformWrapper,{ref:e=>X.current[t]=e,panning:{disabled:V<=1},initialScale:1,onZoom:le,onZoomStop:le,onWheel:le,children:i.jsx(s.TransformComponent,{children:i.jsx(p.StatefulImage,{className:g.slideImage,src:e.src,alt:te(t),placeholder:i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage}),fit:"scale-down",retrieveImageDimension:!0,setDimension:re})})})})},t)}))})}),!k&&i.jsxs(i.Fragment,{children:[i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonLeft),ref:O,"aria-label":`Previous ${ee}`,"data-testid":"prev-btn",onClick:ne,children:i.jsx(t.ChevronLeftIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.arrowButton,g.arrowButtonRight),ref:H,"aria-label":`Next ${ee}`,"data-testid":"forward-btn",onClick:se,children:i.jsx(t.ChevronRightIcon,{"aria-hidden":!0})})]}),!q&&i.jsx("div",{className:g.boxChip,"aria-hidden":"true",children:i.jsx(v.Typography.BodyXS,{className:g.chip,weight:"semibold","data-testid":"carousel-counter",children:`${$+1}/${y.length}`})})]}),!N&&i.jsx("div",{className:g.thumbnailContainer,ref:J,"aria-hidden":"true","data-testid":"thumbnail-container",children:i.jsx("div",{className:g.thumbnailWrapper,children:y.map(((e,t)=>{var l;const r=b(e)?e.thumbnailSrc:null!==(l=e.thumbnailSrc)&&void 0!==l?l:e.src;return i.jsx("div",{className:g.thumbnailItemContainer,children:i.jsx("div",{className:g.thumbnailItem,"data-active":t===$,"data-testid":"thumbnail-item",onClick:()=>oe(t),ref:e=>G.current[t]=e,children:r?i.jsx(p.StatefulImage,{className:g.thumbnailImage,src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i.jsx(d.ImagePlaceholder,{className:g.slidePlaceholderImage})})},t)}))})})]}),i.jsxs("div",{className:g.topActionButtons,ref:_,"data-has-file-info":ie,children:[ie&&(()=>{const{fileName:e,fileSize:t}=null!=Q?Q:{},l=null==e?void 0:e.trim(),r=null==t?void 0:t.trim();return i.jsxs("div",{className:x.default(g.fileInfoTextWrapper,!r&&g.fileInfoTextWrapperCentered),"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[l&&i.jsx(v.Typography.BodyBL,{className:g.fileInfoFileName,weight:"semibold","data-testid":"file-info-name",children:l}),r&&i.jsx(v.Typography.BodyMD,{className:g.fileInfoFileSize,"data-testid":"file-info-size",children:r})]})})(),!w&&!b(Q)&&i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":1===V?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,l;if(1===V){const t=ae();null===(i=null===(e=X.current)||void 0===e?void 0:e[$])||void 0===i||i.centerView(t),W(null!=t?t:1)}else W(1),null===(l=null===(t=X.current)||void 0===t?void 0:t[$])||void 0===l||l.resetTransform()},children:1===V?i.jsx(t.MagnifierPlusIcon,{"aria-hidden":!0}):i.jsx(t.MagnifierMinusIcon,{"aria-hidden":!0})}),S&&i.jsx(u.ClickableIcon,{className:x.default(g.iconButton,g.iconButtonError),"aria-label":`Delete ${b(Q)&&(null===(I=Q.itemLabel)||void 0===I?void 0:I.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{Q&&S&&S(Q,$)},children:i.jsx(l.BinIcon,{"aria-hidden":!0})}),i.jsx(u.ClickableIcon,{className:g.iconButton,"aria-label":Y?"Close carousel":"Close image carousel",onClick:B,children:i.jsx(t.CrossIcon,{"aria-hidden":!0})})]})]})}))},y=n.forwardRef(I);exports.Component=I,exports.FullscreenImageCarousel=y;
 //# sourceMappingURL=fullscreen-image-carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { 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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"}
+{"version":3,"file":"fullscreen-image-carousel.js","sources":["../../../src/fullscreen-image-carousel/fullscreen-image-carousel.tsx"],"sourcesContent":["import {\n    ChevronLeftIcon,\n    ChevronRightIcon,\n    CrossIcon,\n    MagnifierMinusIcon,\n    MagnifierPlusIcon,\n} from \"@lifesg/react-icons\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type {\n    ReactZoomPanPinchContentRef,\n    ReactZoomPanPinchRef,\n} from \"react-zoom-pan-pinch\";\nimport { TransformComponent, TransformWrapper } from \"react-zoom-pan-pinch\";\n\nimport { ModalV2 } from \"../modal-v2\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useStateCallback } from \"../shared/hooks\";\nimport { ImagePlaceholder } from \"../shared/image-placeholder\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEventListener } from \"../util\";\nimport * as styles from \"./fullscreen-image-carousel.styles\";\nimport { StatefulImage } from \"./stateful-image\";\nimport type {\n    FullscreenImageCarouselCustomItemProps,\n    FullscreenImageCarouselItemProps,\n    FullscreenImageCarouselProps,\n    FullscreenImageCarouselRef,\n    ImageDimension,\n} from \"./types\";\n\nconst isCustomItem = (\n    item: FullscreenImageCarouselItemProps | undefined\n): item is FullscreenImageCarouselCustomItemProps =>\n    !!item && item.type === \"custom\";\n\nexport const Component = (\n    {\n        items,\n        initialActiveItemIndex,\n        hideThumbnail = false,\n        hideNavigation = false,\n        hideCounter = false,\n        hideMagnifier = false,\n        onDelete,\n        onClose,\n        insets,\n        show,\n        ...otherProps\n    }: FullscreenImageCarouselProps,\n    ref: React.Ref<FullscreenImageCarouselRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentSlide, setCurrentSlide] = useStateCallback(\n        initialActiveItemIndex ?? 0\n    );\n    const [imagesDimension, setImageDimension] = useState<\n        Record<string, ImageDimension>\n    >({});\n    const [zoom, setZoom] = useState(1);\n    const [startX, setStartX] = useState<number | undefined>();\n    const [endX, setEndX] = useState<number | undefined>();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const thumbnailRefs = useRef<(HTMLDivElement | null)[]>([]);\n    const zoomRefs = useRef<(ReactZoomPanPinchContentRef | null)[]>([]);\n    const imageRef = useRef<HTMLDivElement>(null);\n    const topActionButtonsRef = useRef<HTMLDivElement>(null);\n    const prevArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const nextArrowButtonRef = useRef<HTMLButtonElement>(null);\n    const thumbnailContainerRef = useRef<HTMLDivElement>(null);\n    const diff = startX && endX ? startX - endX : 0;\n    const currentItem = items[currentSlide];\n    const hasAnyItemLabel = items.some(\n        (item) => isCustomItem(item) && !!item.itemLabel?.trim()\n    );\n    const carouselItemNoun = hasAnyItemLabel ? \"item\" : \"image\";\n    const hasFileInfo = useMemo(\n        () =>\n            items.some(\n                (item) => item.fileName?.trim() || item.fileSize?.trim()\n            ),\n        [items]\n    );\n\n    useApplyStyle(topActionButtonsRef, {\n        [styles.tokens.topActionButtons.insetTop]: formatUnitValue(\n            insets?.top,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n        [styles.tokens.topActionButtons.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(prevArrowButtonRef, {\n        [styles.tokens.arrowButton.insetLeft]: formatUnitValue(\n            insets?.left,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(nextArrowButtonRef, {\n        [styles.tokens.arrowButton.insetRight]: formatUnitValue(\n            insets?.right,\n            \"px\"\n        ),\n    });\n\n    useApplyStyle(thumbnailContainerRef, {\n        [styles.tokens.thumbnailContainer.insetBottom]: formatUnitValue(\n            insets?.bottom,\n            \"px\"\n        ),\n    });\n\n    const getItemAriaLabel = useCallback(\n        (index: number) => {\n            const item = items[index];\n            const itemTypeLabel = hasAnyItemLabel ? \"Item\" : \"Image\";\n            const prefix = isCustomItem(item)\n                ? item.itemLabel?.trim() || \"\"\n                : item.alt?.trim() || \"\";\n            const positionLabel = `${itemTypeLabel} ${index + 1} of ${\n                items.length\n            }.`;\n\n            return prefix ? `${prefix}. ${positionLabel}` : positionLabel;\n        },\n        [items, hasAnyItemLabel]\n    );\n\n    useImperativeHandle<FullscreenImageCarouselRef, FullscreenImageCarouselRef>(\n        ref,\n        () => ({\n            currentItemIndex: currentSlide,\n            setCurrentItem: goToSlide,\n            goToPrevItem: goToPrevSlide,\n            goToNextItem: goToNextSlide,\n        })\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"keydown\", handleKeyDown, \"document\");\n\n    useEffect(() => {\n        if (show) {\n            imageRef.current?.focus();\n        }\n    }, [show]);\n\n    useEffect(() => {\n        if (items.length === 0) {\n            setCurrentSlide(0);\n            return;\n        }\n\n        if (currentSlide > items.length - 1) {\n            setCurrentSlide(items.length - 1);\n        }\n    }, [currentSlide, items.length, setCurrentSlide]);\n\n    useEffect(() => {\n        thumbnailRefs.current?.[currentSlide]?.scrollIntoView({\n            behavior: \"smooth\",\n            inline: \"center\",\n        });\n        setZoom(1);\n    }, [currentSlide]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleTouchStart = (e: React.TouchEvent) => {\n        if (zoom <= 1) setStartX(e.touches[0].clientX);\n    };\n\n    const handleTouchMove = (e: React.TouchEvent) => {\n        if (!startX || zoom > 1) return;\n        setEndX(e.touches[0].clientX);\n    };\n\n    const handleTouchEnd = () => {\n        if (!containerRef.current) return;\n        if (Math.abs(diff) > containerRef.current.offsetWidth / 3) {\n            if (diff > 0) {\n                goToNextSlide();\n            } else {\n                goToPrevSlide();\n            }\n        }\n        setStartX(undefined);\n        setEndX(undefined);\n    };\n\n    const handleZoom = (e: ReactZoomPanPinchRef) => {\n        setZoom(e.state.scale);\n    };\n\n    const handleDelete = () => {\n        if (currentItem && onDelete) {\n            onDelete(currentItem, currentSlide);\n        }\n    };\n\n    function handleKeyDown(e: KeyboardEvent) {\n        if (e.key === \"ArrowRight\") {\n            goToNextSlide();\n        } else if (e.key === \"ArrowLeft\") {\n            goToPrevSlide();\n        } else if (e.key === \"Escape\") {\n            onClose?.();\n        }\n    }\n\n    const handleMagnifier = () => {\n        if (zoom === 1) {\n            const zoomRatio = getZoomRatio();\n            zoomRefs.current?.[currentSlide]?.centerView(zoomRatio);\n            setZoom(zoomRatio ?? 1);\n        } else {\n            setZoom(1);\n            zoomRefs.current?.[currentSlide]?.resetTransform();\n        }\n    };\n\n    const setDimension = ({\n        src,\n        height,\n        width,\n    }: {\n        src: string;\n        height: number;\n        width: number;\n    }) => {\n        setImageDimension((oldState) => {\n            return { ...oldState, [src]: { height, width } };\n        });\n    };\n\n    const getZoomRatio = () => {\n        if (!currentItem || isCustomItem(currentItem)) {\n            return;\n        }\n\n        const imageDimension = imagesDimension[currentItem.src];\n\n        if (containerRef.current && !!imageDimension) {\n            const { clientHeight, clientWidth } = containerRef.current;\n            const { width, height } = imageDimension;\n            const isSmallImg = width < clientWidth && height < clientHeight;\n\n            const isImgLandscapeRelativeToDevice =\n                height / width < clientHeight / clientWidth;\n\n            if (isSmallImg) {\n                return isImgLandscapeRelativeToDevice\n                    ? clientWidth / width\n                    : clientHeight / height;\n            }\n\n            return isImgLandscapeRelativeToDevice\n                ? clientHeight / (height / (width / clientWidth))\n                : clientWidth / (width / (height / clientHeight));\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const goToPrevSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === 0 ? items.length - 1 : prev - 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToNextSlide = () => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(\n            (prev) => (prev === items.length - 1 ? 0 : prev + 1),\n            (slide) => {\n                clearAnnouncer(\"polite\");\n                announce(getItemAriaLabel(slide), \"polite\");\n            }\n        );\n    };\n\n    const goToSlide = (index: number) => {\n        zoomRefs.current?.[currentSlide]?.resetTransform();\n        setCurrentSlide(index);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSlides = () => {\n        return (\n            <div\n                className={styles.imageGallerySlides}\n                style={{\n                    transform: `translateX(calc(${\n                        -currentSlide * 100\n                    }% - ${diff}px))`,\n                }}\n            >\n                {items.map((item, index) => {\n                    const isActive = index === currentSlide;\n                    const isActiveOrAdjacent =\n                        Math.abs(index - currentSlide) <= 1 ||\n                        (currentSlide === 0 && index === items.length - 1) ||\n                        (currentSlide === items.length - 1 && index === 0);\n\n                    return (\n                        <div\n                            className={styles.imageGallerySlide}\n                            key={index}\n                            data-testid=\"slide-item\"\n                        >\n                            <div\n                                className={styles.focusableImageRegion}\n                                ref={isActive ? imageRef : null}\n                                tabIndex={isActive ? 0 : -1}\n                            >\n                                {isCustomItem(item) ? (\n                                    isActiveOrAdjacent ? (\n                                        item.renderContent()\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )\n                                ) : (\n                                    <TransformWrapper\n                                        ref={(el) =>\n                                            (zoomRefs.current[index] = el)\n                                        }\n                                        panning={{\n                                            disabled: zoom <= 1,\n                                        }}\n                                        initialScale={1}\n                                        onZoom={handleZoom}\n                                        onZoomStop={handleZoom}\n                                        onWheel={handleZoom}\n                                    >\n                                        <TransformComponent>\n                                            <StatefulImage\n                                                className={styles.slideImage}\n                                                src={item.src}\n                                                alt={getItemAriaLabel(index)}\n                                                placeholder={\n                                                    <ImagePlaceholder\n                                                        className={\n                                                            styles.slidePlaceholderImage\n                                                        }\n                                                    />\n                                                }\n                                                fit=\"scale-down\"\n                                                retrieveImageDimension\n                                                setDimension={setDimension}\n                                            />\n                                        </TransformComponent>\n                                    </TransformWrapper>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderFileInfo = () => {\n        const { fileName, fileSize } = currentItem ?? {};\n        const trimmedName = fileName?.trim();\n        const trimmedSize = fileSize?.trim();\n\n        return (\n            <div\n                className={clsx(\n                    styles.fileInfoTextWrapper,\n                    !trimmedSize && styles.fileInfoTextWrapperCentered\n                )}\n                aria-live=\"polite\"\n                aria-atomic=\"true\"\n                data-testid=\"file-info-bar\"\n            >\n                {trimmedName && (\n                    <Typography.BodyBL\n                        className={styles.fileInfoFileName}\n                        weight=\"semibold\"\n                        data-testid=\"file-info-name\"\n                    >\n                        {trimmedName}\n                    </Typography.BodyBL>\n                )}\n                {trimmedSize && (\n                    <Typography.BodyMD\n                        className={styles.fileInfoFileSize}\n                        data-testid=\"file-info-size\"\n                    >\n                        {trimmedSize}\n                    </Typography.BodyMD>\n                )}\n            </div>\n        );\n    };\n\n    const renderThumbnails = () => {\n        return (\n            <div\n                className={styles.thumbnailContainer}\n                ref={thumbnailContainerRef}\n                aria-hidden=\"true\"\n                data-testid=\"thumbnail-container\"\n            >\n                <div className={styles.thumbnailWrapper}>\n                    {items.map((item, index) => {\n                        const src = isCustomItem(item)\n                            ? item.thumbnailSrc\n                            : item.thumbnailSrc ?? item.src;\n                        return (\n                            <div\n                                className={styles.thumbnailItemContainer}\n                                key={index}\n                            >\n                                <div\n                                    className={styles.thumbnailItem}\n                                    data-active={index === currentSlide}\n                                    data-testid=\"thumbnail-item\"\n                                    onClick={() => goToSlide(index)}\n                                    ref={(el) =>\n                                        (thumbnailRefs.current[index] = el)\n                                    }\n                                >\n                                    {src ? (\n                                        <StatefulImage\n                                            className={styles.thumbnailImage}\n                                            src={src}\n                                            alt={`Thumbnail ${index + 1}`}\n                                            fit=\"cover\"\n                                        />\n                                    ) : (\n                                        <ImagePlaceholder\n                                            className={\n                                                styles.slidePlaceholderImage\n                                            }\n                                        />\n                                    )}\n                                </div>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        );\n    };\n\n    return (\n        <ModalV2\n            {...otherProps}\n            data-testid=\"image-carousel-modal\"\n            aria-label={hasAnyItemLabel ? \"Carousel\" : \"Image carousel\"}\n            show={show}\n            disableInitialFocus\n        >\n            <div className={styles.carouselModalContent}>\n                <div className={styles.imageGalleryContainer}>\n                    <div className={styles.imageGalleryWrapper}>\n                        <div\n                            className={styles.imageGallerySwipe}\n                            ref={containerRef}\n                            onTouchStart={handleTouchStart}\n                            onTouchMove={handleTouchMove}\n                            onTouchEnd={handleTouchEnd}\n                        >\n                            {renderSlides()}\n                        </div>\n\n                        {!hideNavigation && (\n                            <>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonLeft\n                                    )}\n                                    ref={prevArrowButtonRef}\n                                    aria-label={`Previous ${carouselItemNoun}`}\n                                    data-testid=\"prev-btn\"\n                                    onClick={goToPrevSlide}\n                                >\n                                    <ChevronLeftIcon aria-hidden />\n                                </ClickableIcon>\n                                <ClickableIcon\n                                    className={clsx(\n                                        styles.iconButton,\n                                        styles.arrowButton,\n                                        styles.arrowButtonRight\n                                    )}\n                                    ref={nextArrowButtonRef}\n                                    aria-label={`Next ${carouselItemNoun}`}\n                                    data-testid=\"forward-btn\"\n                                    onClick={goToNextSlide}\n                                >\n                                    <ChevronRightIcon aria-hidden />\n                                </ClickableIcon>\n                            </>\n                        )}\n\n                        {!hideCounter && (\n                            <div className={styles.boxChip} aria-hidden=\"true\">\n                                <Typography.BodyXS\n                                    className={styles.chip}\n                                    weight=\"semibold\"\n                                    data-testid=\"carousel-counter\"\n                                >{`${currentSlide + 1}/${\n                                    items.length\n                                }`}</Typography.BodyXS>\n                            </div>\n                        )}\n                    </div>\n\n                    {!hideThumbnail && renderThumbnails()}\n                </div>\n                <div\n                    className={styles.topActionButtons}\n                    ref={topActionButtonsRef}\n                    data-has-file-info={hasFileInfo}\n                >\n                    {hasFileInfo && renderFileInfo()}\n                    {!hideMagnifier && !isCustomItem(currentItem) && (\n                        <ClickableIcon\n                            className={styles.iconButton}\n                            aria-label={zoom === 1 ? \"Zoom in\" : \"Zoom out\"}\n                            onClick={handleMagnifier}\n                        >\n                            {zoom === 1 ? (\n                                <MagnifierPlusIcon aria-hidden />\n                            ) : (\n                                <MagnifierMinusIcon aria-hidden />\n                            )}\n                        </ClickableIcon>\n                    )}\n\n                    {onDelete && (\n                        <ClickableIcon\n                            className={clsx(\n                                styles.iconButton,\n                                styles.iconButtonError\n                            )}\n                            aria-label={`Delete ${\n                                (isCustomItem(currentItem) &&\n                                    currentItem.itemLabel?.trim()) ||\n                                \"image\"\n                            }`}\n                            data-testid=\"delete-btn\"\n                            onClick={handleDelete}\n                        >\n                            <BinIcon aria-hidden />\n                        </ClickableIcon>\n                    )}\n\n                    <ClickableIcon\n                        className={styles.iconButton}\n                        aria-label={\n                            hasAnyItemLabel\n                                ? \"Close carousel\"\n                                : \"Close image carousel\"\n                        }\n                        onClick={onClose}\n                    >\n                        <CrossIcon aria-hidden />\n                    </ClickableIcon>\n                </div>\n            </div>\n        </ModalV2>\n    );\n};\n\nexport const FullscreenImageCarousel = forwardRef<\n    FullscreenImageCarouselRef,\n    FullscreenImageCarouselProps\n>(Component);\n"],"names":["isCustomItem","item","type","Component","_a","ref","items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show","otherProps","__rest","currentSlide","setCurrentSlide","useStateCallback","imagesDimension","setImageDimension","useState","zoom","setZoom","startX","setStartX","endX","setEndX","containerRef","useRef","thumbnailRefs","zoomRefs","imageRef","topActionButtonsRef","prevArrowButtonRef","nextArrowButtonRef","thumbnailContainerRef","diff","currentItem","hasAnyItemLabel","some","itemLabel","trim","carouselItemNoun","hasFileInfo","useMemo","fileName","fileSize","_b","useApplyStyle","styles.tokens","topActionButtons","insetTop","formatUnitValue","top","insetLeft","left","insetRight","right","arrowButton","thumbnailContainer","insetBottom","bottom","getItemAriaLabel","useCallback","index","itemTypeLabel","prefix","alt","positionLabel","length","useImperativeHandle","currentItemIndex","setCurrentItem","goToSlide","goToPrevItem","goToPrevSlide","goToNextItem","goToNextSlide","useEventListener","e","key","useEffect","current","focus","scrollIntoView","behavior","inline","handleZoom","state","scale","setDimension","src","height","width","oldState","Object","assign","getZoomRatio","imageDimension","clientHeight","clientWidth","isImgLandscapeRelativeToDevice","resetTransform","prev","slide","clearAnnouncer","announce","_jsx","ModalV2","disableInitialFocus","_jsxs","className","styles.carouselModalContent","children","styles.imageGalleryContainer","styles.imageGalleryWrapper","styles.imageGallerySwipe","onTouchStart","touches","clientX","onTouchMove","onTouchEnd","Math","abs","offsetWidth","undefined","styles.imageGallerySlides","style","transform","map","isActive","isActiveOrAdjacent","styles.imageGallerySlide","styles.focusableImageRegion","tabIndex","renderContent","ImagePlaceholder","styles.slidePlaceholderImage","TransformWrapper","el","panning","disabled","initialScale","onZoom","onZoomStop","onWheel","TransformComponent","StatefulImage","styles.slideImage","placeholder","fit","retrieveImageDimension","_Fragment","ClickableIcon","clsx","styles.iconButton","styles.arrowButton","styles.arrowButtonLeft","onClick","ChevronLeftIcon","styles.arrowButtonRight","ChevronRightIcon","styles.boxChip","Typography","BodyXS","styles.chip","weight","styles.thumbnailContainer","styles.thumbnailWrapper","thumbnailSrc","styles.thumbnailItemContainer","styles.thumbnailItem","styles.thumbnailImage","styles.topActionButtons","trimmedName","trimmedSize","styles.fileInfoTextWrapper","styles.fileInfoTextWrapperCentered","BodyBL","styles.fileInfoFileName","BodyMD","styles.fileInfoFileSize","renderFileInfo","zoomRatio","centerView","_d","_c","MagnifierPlusIcon","MagnifierMinusIcon","styles.iconButtonError","BinIcon","CrossIcon","FullscreenImageCarousel","forwardRef"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-.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(
+@layer fds{.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(
@@ -72,4 +72,4 @@
     );}
 .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;}
+.f17g5ble{color:var(--fds-colour-text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}}

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

@@ -1,3 +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;}
+@layer fds{.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%;}
+.d1w2ubkx{width:100%;height:100%;}}

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

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

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

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

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

@@ -0,0 +1,5 @@
+@layer fds{.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/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),o=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),i=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),a=require("./avatar/avatar.js"),n=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),h=require("./dashed-border/dashed-border.js"),c=require("./data-table/data-table.js"),T=require("./date-input/date-input.js"),q=require("./date-navigator/date-navigator.js"),j=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),b=require("./drawer/drawer.js"),k=require("./e-signature/e-signature.js"),V=require("./error-display/error-display.js"),v=require("./error-display/helper.js"),_=require("./example/example.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),I=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),C=require("./footer/footer.js"),D=require("./form/index.js"),P=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),f=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),w=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),A=require("./input-nested-multi-select/input-nested-multi-select.js"),E=require("./input-nested-select/input-nested-select.js"),N=require("./input-range-select/input-range-select.js"),W=require("./input-range-slider/input-range-slider.js"),G=require("./input-select/input-select.js"),O=require("./input-slider/input-slider.js"),H=require("./input-textarea/textarea.js"),Q=require("./language-switcher/language-switcher.js"),U=require("./layout/index.js"),z=require("./link-list/link-list.js"),K=require("./markup/markup.js"),X=require("./masked-input/masked-input.js"),Y=require("./masthead/masthead.js"),J=require("./menu/menu.js"),Z=require("./modal/index.js"),$=require("./modal-v2/index.js"),ee=require("./navbar/navbar.js"),re=require("./notification-banner/notification-banner.js"),te=require("./notification-banner/notification-banner-hoc.js"),oe=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),se=require("./pagination/pagination.js"),ae=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),pe=require("./popover/popover.js"),ue=require("./popover/popover-inline/popover-inline.js"),le=require("./popover/popover-trigger.js"),de=require("./predictive-text-input/predictive-text-input.js"),xe=require("./progress-indicator/progress-indicator.js"),me=require("./radio-button/radio-button.js"),ge=require("./select-histogram/select-histogram.js"),he=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),Te=require("./smart-app-banner/smart-app-banner.js"),qe=require("./tab/tab.js"),je=require("./table/table.js"),Se=require("./tag/tag.js"),be=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Ve=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),_e=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Ie=require("./theme/tokens/font.js"),Me=require("./theme/tokens/media-query.js"),Ce=require("./theme/tokens/motion.js"),De=require("./theme/tokens/radius.js"),Pe=require("./theme/tokens/shadow.js"),fe=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),we=require("./theme/utils/font.js"),Re=require("./theme/utils/token-resolver.js"),Ae=require("./theme/utils/use-apply-styles.js"),Ee=require("./theme/utils/use-design-token.js"),Ne=require("./theme/utils/use-media-query.js"),We=require("./time-range-picker/time-range-picker.js"),Ge=require("./time-slot-bar/time-slot-bar.js"),Oe=require("./time-slot-bar-week/time-slot-bar-week.js"),He=require("./time-slot-week-view/time-slot-week-view.js"),Qe=require("./timeline/timeline.js"),Ue=require("./timepicker/timepicker.js"),ze=require("./timetable/timetable.js"),Ke=require("./toast/toast.js"),Xe=require("./toggle/toggle.js"),Ye=require("./typography/index.js"),Je=require("./uneditable-section/index.js"),Ze=require("./unit-number/unit-number-input.js"),$e=require("./v3_theme/index.js"),er=require("./v3_theme/ds-theme-provider.js"),rr=require("./v3_theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=o.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=a.Avatar,exports.Badge=n.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=h.DashedBorder,exports.DataTable=c.DataTable,exports.DateInput=T.DateInput,exports.DateNavigator=q.DateNavigator,exports.DateRangeInput=j.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=b.Drawer,exports.ESignature=k.ESignature,exports.ErrorDisplay=V.ErrorDisplay,exports.ErrorDisplayHelper=v.ErrorDisplayHelper,exports.Example=_.Example,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=I.FileUpload,exports.Filter=M.Filter,exports.Footer=C.Footer,exports.Form=D.Form,exports.Component=P.Component,exports.FullscreenImageCarousel=P.FullscreenImageCarousel,exports.HistogramSlider=f.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=w.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=A.InputNestedMultiSelect,exports.InputNestedSelect=E.InputNestedSelect,exports.InputRangeSelect=N.InputRangeSelect,exports.InputRangeSlider=W.InputRangeSlider,exports.InputSelect=G.InputSelect,exports.InputSlider=O.InputSlider,exports.Textarea=H.Textarea,exports.LanguageSwitcher=Q.LanguageSwitcher,exports.Layout=U.Layout,exports.LinkList=z.LinkList,exports.Markup=K.Markup,exports.MaskedInput=X.MaskedInput,exports.Masthead=Y.Masthead,exports.Menu=J.Menu,exports.MenuTrigger=J.MenuTrigger,exports.Modal=Z.Modal,exports.ModalV2=$.ModalV2,exports.Navbar=ee.Navbar,exports.NBComponent=re.NBComponent,exports.NotificationBanner=re.NotificationBanner,exports.withNotificationBanner=te.withNotificationBanner,exports.OtpInput=oe.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=se.Pagination,exports.PhoneNumberInput=ae.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=pe.Popover,exports.PopoverInline=ue.PopoverInline,exports.PopoverTrigger=le.PopoverTrigger,exports.PredictiveTextInput=de.PredictiveTextInput,exports.ProgressIndicator=xe.ProgressIndicator,exports.RadioButton=me.RadioButton,exports.SelectHistogram=ge.SelectHistogram,exports.Sidenav=he.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=Te.SmartAppBanner,exports.Tab=qe.Tab,exports.Table=je.Table,exports.Tag=Se.Tag,exports.TextList=be.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Ve.useInheritedThemeScope,exports.useTheme=Ve.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=_e.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Ie.Font,exports.FontSpec=Ie.FontSpec,exports.MediaQuery=Me.MediaQuery,exports.Motion=Ce.Motion,exports.Radius=De.Radius,exports.Shadow=Pe.Shadow,exports.Spacing=fe.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.extractFdsCssVariableName=Le.extractFdsCssVariableName,exports.formatUnitValue=Le.formatUnitValue,exports.getInheritedInlineCssVariables=Le.getInheritedInlineCssVariables,exports.normalizeCssLengthValue=Le.normalizeCssLengthValue,exports.parseCSSVariableValue=Le.parseCSSVariableValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.generateFont=we.generateFont,exports.generateFontProperties=we.generateFontProperties,exports.getEffectiveTokenOrCustom=Re.getEffectiveTokenOrCustom,exports.getResolvedValue=Re.getResolvedValue,exports.getTokenOrDefault=Re.getTokenOrDefault,exports.isTokenFromSet=Re.isTokenFromSet,exports.isTokenWithPrefix=Re.isTokenWithPrefix,exports.toCssValue=Re.toCssValue,exports.useApplyStyle=Ae.useApplyStyle,exports.useDesignToken=Ee.useDesignToken,exports.useResolvedTokenValue=Ee.useResolvedTokenValue,exports.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT=Ne.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,exports.useMaxWidthMediaQuery=Ne.useMaxWidthMediaQuery,exports.useMediaQuery=Ne.useMediaQuery,exports.useMinWidthMediaQuery=Ne.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ne.useResolvedBreakpointToken,exports.TimeRangePicker=We.TimeRangePicker,exports.TimeSlotBar=Ge.TimeSlotBar,exports.TimeSlotBarWeek=Oe.TimeSlotBarWeek,exports.TimeSlotWeekView=He.TimeSlotWeekView,exports.Timeline=Qe.Timeline,exports.Timepicker=Ue.Timepicker,exports.TimeTable=ze.TimeTable,exports.Toast=Ke.Toast,exports.Toggle=Xe.Toggle,exports.Typography=Ye.Typography,exports.UneditableSection=Je.UneditableSection,exports.UnitNumberInput=Ze.UnitNumberInput,exports.V3_A11yPlaygroundTheme=$e.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=$e.V3_BookingSGTheme,exports.V3_Border=$e.V3_Border,exports.V3_Breakpoint=$e.V3_Breakpoint,exports.V3_CCubeTheme=$e.V3_CCubeTheme,exports.V3_Colour=$e.V3_Colour,exports.V3_Font=$e.V3_Font,exports.V3_IMDATheme=$e.V3_IMDATheme,exports.V3_LifeSGTheme=$e.V3_LifeSGTheme,exports.V3_MediaQuery=$e.V3_MediaQuery,exports.V3_Motion=$e.V3_Motion,exports.V3_MyLegacyTheme=$e.V3_MyLegacyTheme,exports.V3_OneServiceTheme=$e.V3_OneServiceTheme,exports.V3_PATheme=$e.V3_PATheme,exports.V3_RBSTheme=$e.V3_RBSTheme,exports.V3_Radius=$e.V3_Radius,exports.V3_SGWDigitalLobbyTheme=$e.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=$e.V3_SGWDigitalLobbyThemeBase,exports.V3_SMGSTheme=$e.V3_SMGSTheme,exports.V3_SPFTheme=$e.V3_SPFTheme,exports.V3_Shadow=$e.V3_Shadow,exports.V3_Spacing=$e.V3_Spacing,exports.V3_SupportGoWhereTheme=$e.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=$e.V3_SupportGoWhereThemeBase,exports.V3_DSThemeProvider=er.V3_DSThemeProvider,exports.createThemeWithColourMode=rr.createThemeWithColourMode,exports.getSystemColourMode=rr.getSystemColourMode,exports.useDSTheme=rr.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),o=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),a=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),c=require("./dashed-border/dashed-border.js"),q=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),b=require("./date-navigator/date-navigator.js"),h=require("./date-range-input/date-range-input.js"),T=require("./divider/divider.js"),k=require("./drawer/drawer.js"),S=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),I=require("./error-display/helper.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),M=require("./file-upload/file-upload.js"),w=require("./filter/filter.js"),D=require("./footer/footer.js"),P=require("./form/index.js"),f=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),C=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),N=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),E=require("./input-nested-multi-select/input-nested-multi-select.js"),A=require("./input-nested-select/input-nested-select.js"),H=require("./input-range-select/input-range-select.js"),Q=require("./input-range-slider/input-range-slider.js"),U=require("./input-select/input-select.js"),V=require("./input-slider/input-slider.js"),W=require("./input-textarea/textarea.js"),O=require("./language-switcher/language-switcher.js"),G=require("./layout/index.js"),Y=require("./link-list/link-list.js"),_=require("./markup/markup.js"),z=require("./masked-input/masked-input.js"),J=require("./masthead/masthead.js"),K=require("./menu/menu.js"),X=require("./modal/index.js"),Z=require("./modal-v2/index.js"),$=require("./navbar/navbar.js"),ee=require("./notification-banner/notification-banner.js"),re=require("./notification-banner/notification-banner-hoc.js"),te=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),oe=require("./pagination/pagination.js"),se=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),ae=require("./popover/popover.js"),pe=require("./popover/popover-inline/popover-inline.js"),ue=require("./popover/popover-trigger.js"),le=require("./predictive-text-input/predictive-text-input.js"),de=require("./progress-indicator/progress-indicator.js"),xe=require("./radio-button/radio-button.js"),me=require("./select-histogram/select-histogram.js"),ge=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),qe=require("./smart-app-banner/smart-app-banner.js"),je=require("./tab/tab.js"),be=require("./table/table.js"),he=require("./tag/tag.js"),Te=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Se=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),Ie=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Me=require("./theme/tokens/font.js"),we=require("./theme/tokens/media-query.js"),De=require("./theme/tokens/motion.js"),Pe=require("./theme/tokens/radius.js"),fe=require("./theme/tokens/shadow.js"),Ce=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),Ne=require("./theme/utils/use-apply-styles.js"),Re=require("./theme/utils/use-design-token.js"),Ee=require("./theme/utils/use-media-query.js"),Ae=require("./time-range-picker/time-range-picker.js"),He=require("./time-slot-bar/time-slot-bar.js"),Qe=require("./time-slot-bar-week/time-slot-bar-week.js"),Ue=require("./time-slot-week-view/time-slot-week-view.js"),Ve=require("./timeline/timeline.js"),We=require("./timepicker/timepicker.js"),Oe=require("./timetable/timetable.js"),Ge=require("./toast/toast.js"),Ye=require("./toggle/toggle.js"),_e=require("./typography/index.js"),ze=require("./uneditable-section/index.js"),Je=require("./unit-number/unit-number-input.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.LoadingSpinner=o.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=a.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=c.DashedBorder,exports.DataTable=q.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=b.DateNavigator,exports.DateRangeInput=h.DateRangeInput,exports.Divider=T.Divider,exports.Drawer=k.Drawer,exports.ESignature=S.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=I.ErrorDisplayHelper,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=M.FileUpload,exports.Filter=w.Filter,exports.Footer=D.Footer,exports.Form=P.Form,exports.Component=f.Component,exports.FullscreenImageCarousel=f.FullscreenImageCarousel,exports.HistogramSlider=C.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=N.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=E.InputNestedMultiSelect,exports.InputNestedSelect=A.InputNestedSelect,exports.InputRangeSelect=H.InputRangeSelect,exports.InputRangeSlider=Q.InputRangeSlider,exports.InputSelect=U.InputSelect,exports.InputSlider=V.InputSlider,exports.Textarea=W.Textarea,exports.LanguageSwitcher=O.LanguageSwitcher,exports.Layout=G.Layout,exports.LinkList=Y.LinkList,exports.Markup=_.Markup,exports.MaskedInput=z.MaskedInput,exports.Masthead=J.Masthead,exports.Menu=K.Menu,exports.MenuTrigger=K.MenuTrigger,exports.Modal=X.Modal,exports.ModalV2=Z.ModalV2,exports.Navbar=$.Navbar,exports.NBComponent=ee.NBComponent,exports.NotificationBanner=ee.NotificationBanner,exports.withNotificationBanner=re.withNotificationBanner,exports.OtpInput=te.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=oe.Pagination,exports.PhoneNumberInput=se.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=ae.Popover,exports.PopoverInline=pe.PopoverInline,exports.PopoverTrigger=ue.PopoverTrigger,exports.PredictiveTextInput=le.PredictiveTextInput,exports.ProgressIndicator=de.ProgressIndicator,exports.RadioButton=xe.RadioButton,exports.SelectHistogram=me.SelectHistogram,exports.Sidenav=ge.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=qe.SmartAppBanner,exports.Tab=je.Tab,exports.Table=be.Table,exports.Tag=he.Tag,exports.TextList=Te.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Se.useInheritedThemeScope,exports.useTheme=Se.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=Ie.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Me.Font,exports.FontSpec=Me.FontSpec,exports.MediaQuery=we.MediaQuery,exports.Motion=De.Motion,exports.Radius=Pe.Radius,exports.Shadow=fe.Shadow,exports.Spacing=Ce.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.formatUnitValue=Le.formatUnitValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.useApplyStyle=Ne.useApplyStyle,exports.useDesignToken=Re.useDesignToken,exports.useMaxWidthMediaQuery=Ee.useMaxWidthMediaQuery,exports.useMediaQuery=Ee.useMediaQuery,exports.useMinWidthMediaQuery=Ee.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ee.useResolvedBreakpointToken,exports.TimeRangePicker=Ae.TimeRangePicker,exports.TimeSlotBar=He.TimeSlotBar,exports.TimeSlotBarWeek=Qe.TimeSlotBarWeek,exports.TimeSlotWeekView=Ue.TimeSlotWeekView,exports.Timeline=Ve.Timeline,exports.Timepicker=We.Timepicker,exports.TimeTable=Oe.TimeTable,exports.Toast=Ge.Toast,exports.Toggle=Ye.Toggle,exports.Typography=_e.Typography,exports.UneditableSection=ze.UneditableSection,exports.UnitNumberInput=Je.UnitNumberInput;
 //# sourceMappingURL=index.js.map

package/cjs/input/input.styles_1cblor0.css

@@ -1,4 +1,4 @@
-.in7cu42{width:100%;height:calc(3rem - 2px);}
+@layer fds{.in7cu42{width:100%;height:calc(3rem - 2px);}
 .igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
 .i13ih4tu{padding-left:var(--fds-spacing-16);}
 .itgr0ej{padding-right:var(--fds-spacing-16);}
@@ -9,4 +9,4 @@
 .d7twtqb{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;width:100%;}
 .dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
 .d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
-.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}}

package/cjs/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),i=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(a);const j=(a,b)=>{var{addon:j,error:q,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,"aria-label":O}=a,R=e.__rest(a,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,placeholder:L="Select",displayValueExtractor:P,"data-selector-testid":G,options:V,selectedOption:M,onSelectOption:$,optionsLoadState:F,optionTruncationType:W,onRetry:Z,onHideOptions:z,onShowOptions:J,dropdownZIndex:K,dropdownRootNode:Q,"aria-label":U}=j.attributes,{position:X="left"}=j,[Y,ee]=i.useState(M),[re,ae]=i.useState(!1),[ie,se]=i.useState(!1),te=l.useId(),le=`${te}-listbox`,de=`${te}-instruction`,oe=`${te}-combobox-label`,ne=`${te}-textbox-label`,ue=i.useRef(null),ce=i.useRef(null);i.useEffect((()=>{ee(M)}),[M]);const pe=()=>{if(Y)return P?P(Y):N?N(Y):Y.toString()},he=e=>{e?null==J||J():null==z||z()},be=(e,r)=>{var a;null===(a=ce.current)||void 0===a||a.focus(),ee(e),ae(!1),he(!1),null==$||$(e,r)},xe=()=>{re&&(ae(!1),he(!1))},je=()=>{ae(!0),he(!0),se(!0)},qe=e=>{ae(!1),he(!1),"click"!==e&&(se(!1),null==v||v())},me=()=>{var e;null===(e=ce.current)||void 0===e||e.focus(),ae(!1),he(!1)},fe=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:ce,disabled:y,expanded:re,listboxId:le,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,oe),"aria-describedby":t.concatIds(S,de),"aria-invalid":T,"data-position":X,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:Y?r.jsx(p.ValueLabel,{children:pe()}):r.jsx(p.PlaceholderLabel,{children:L})})}),r.jsx(t.VisuallyHidden,{id:de,children:"Press space to open options"})]}),ye=()=>r.jsx(d.DropdownList,{listboxId:le,listItems:V,onSelectItem:be,onDismiss:xe,valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,selectedItems:Y?[Y]:[],itemsLoadState:F,itemTruncationType:W,onRetry:Z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:ie,disabled:y,readOnly:f,error:q,ref:ue,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{ie||re||se(!0)},onBlur:e=>{ie&&!re&&ue.current&&!ue.current.contains(e.relatedTarget)&&(se(!1),null==v||v())},"data-position":X,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:oe,children:U}),r.jsx("div",{"data-testid":G,className:h.fieldSelector,children:f?Y?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:pe()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:re,renderElement:fe,renderDropdown:ye,onOpen:je,onClose:qe,onDismiss:me,clickToToggle:!0,offset:8,alignment:"right"===X?"right":"left",fitAvailableHeight:!0,customZIndex:K,rootNode:Q,positionRef:ue})}),r.jsx("div",{"data-position":X,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:O}),r.jsx("div",{"data-position":X,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T}))})]})})},q=b(i).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),a=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(i);const j=(i,b)=>{var{addon:j,error:q,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,"aria-label":O}=i,R=e.__rest(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,placeholder:L="Select",displayValueExtractor:P,"data-selector-testid":G,options:V,selectedOption:M,onSelectOption:$,optionsLoadState:F,optionTruncationType:W,onRetry:Z,onHideOptions:z,onShowOptions:J,dropdownZIndex:K,dropdownRootNode:Q,"aria-label":U}=j.attributes,{position:X="left"}=j,[Y,ee]=a.useState(M),[re,ie]=a.useState(!1),[ae,se]=a.useState(!1),te=l.useId(),le=`${te}-listbox`,de=`${te}-instruction`,oe=`${te}-combobox-label`,ne=`${te}-textbox-label`,ue=a.useRef(null),ce=a.useRef(null);a.useEffect((()=>{ee(M)}),[M]);const pe=()=>{if(Y)return P?P(Y):N?N(Y):Y.toString()},he=e=>{e?null==J||J():null==z||z()},be=(e,r)=>{var i;null===(i=ce.current)||void 0===i||i.focus(),ee(e),ie(!1),he(!1),null==$||$(e,r)},xe=()=>{re&&(ie(!1),he(!1))},je=()=>{ie(!0),he(!0),se(!0)},qe=e=>{ie(!1),he(!1),"click"!==e&&(se(!1),null==v||v())},me=()=>{var e;null===(e=ce.current)||void 0===e||e.focus(),ie(!1),he(!1)},fe=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:ce,disabled:y,expanded:re,listboxId:le,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,oe),"aria-describedby":t.concatIds(S,de),"aria-invalid":T,"data-position":X,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:Y?r.jsx(p.ValueLabel,{children:pe()}):r.jsx(p.PlaceholderLabel,{children:L})})}),r.jsx(t.VisuallyHidden,{id:de,children:"Press space to open options"})]}),ye=()=>r.jsx(d.DropdownList,{listboxId:le,listItems:V,onSelectItem:be,onDismiss:xe,valueExtractor:N,listExtractor:k,enableSearch:A,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:D,onSearch:H,selectedItems:Y?[Y]:[],itemsLoadState:F,itemTruncationType:W,onRetry:Z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:ae,disabled:y,readOnly:f,error:q,ref:ue,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{ae||re||se(!0)},onBlur:e=>{ae&&!re&&ue.current&&!ue.current.contains(e.relatedTarget)&&(se(!1),null==v||v())},"data-position":X,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:oe,children:U}),r.jsx("div",{"data-testid":G,className:h.fieldSelector,children:f?Y?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":T,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:pe()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:re,renderElement:fe,renderDropdown:ye,onOpen:je,onClose:qe,onDismiss:me,clickToToggle:!0,offset:8,alignment:"right"===X?"right":"left",fitAvailableHeight:!0,customZIndex:K,rootNode:Q,positionRef:ue})}),r.jsx("div",{"data-position":X,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:O}),r.jsx("div",{"data-position":X,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ne),"aria-describedby":S,"aria-invalid":T}))})]})})},q=b(a).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
 //# sourceMappingURL=input-group-list-addon.js.map

package/cjs/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.fieldInput,\n                        noBorder && styles.fieldInputNoBorder,\n                        readOnly && styles.fieldInputReadOnly\n                    )}\n                >\n                    <Input\n                        ref={ref}\n                        {...otherProps}\n                        readOnly={readOnly}\n                        disabled={disabled}\n                        error={error}\n                        onChange={handleInputChange}\n                        data-testid=\"input\"\n                        styleType=\"no-border\"\n                        aria-labelledby={concatIds(\n                            ariaLabelledBy,\n                            textboxLabelId\n                        )}\n                        aria-describedby={ariaDescribedBy}\n                        aria-invalid={ariaInvalid}\n                    />\n                </div>\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.fieldInput,\n                        noBorder && styles.fieldInputNoBorder,\n                        readOnly && styles.fieldInputReadOnly\n                    )}\n                >\n                    <Input\n                        ref={ref}\n                        {...otherProps}\n                        readOnly={readOnly}\n                        disabled={disabled}\n                        error={error}\n                        onChange={handleInputChange}\n                        data-testid=\"input\"\n                        styleType=\"no-border\"\n                        aria-labelledby={concatIds(\n                            ariaLabelledBy,\n                            textboxLabelId\n                        )}\n                        aria-describedby={ariaDescribedBy}\n                        aria-invalid={ariaInvalid}\n                    />\n                </div>\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/cjs/input-group/input-group-list-addon.styles_17iuqtw.css

@@ -1,4 +1,4 @@
-.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+@layer fds{.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
 .e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
 .faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
 .f96umbl{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
@@ -6,4 +6,4 @@
 .fioonlm{padding:0;}
 .s1b40hsu{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;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
 .d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
-.d181f48m{display:none;}
+.d181f48m{display:none;}}

package/cjs/input-group/input-group.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./input-group.styles_fpy81r.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
+"use strict";require("./input-group.styles_bqye6f.css");exports.addonWrapper="afvd13",exports.labelAddonContainer="l1s6ick6",exports.noAddonWrapper="nx53mj4";
 //# sourceMappingURL=input-group.styles.js.map

package/cjs/input-group/input-group.styles_bqye6f.css

@@ -0,0 +1,3 @@
+@layer fds{.afvd13{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;width:100%;padding:0 var(--fds-spacing-16);}.afvd13[data-read-only="true"]{padding:0;}.afvd13[data-no-border="true"]{padding:0;}.afvd13[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.nx53mj4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:0 var(--fds-spacing-16);}.nx53mj4[data-read-only="true"]{padding:0;}.nx53mj4[data-no-border="true"]{padding:0;}
+.l1s6ick6{position:relative;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;margin-right:var(--fds-spacing-12);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-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.l1s6ick6 svg{height:1em;width:1em;}.l1s6ick6[data-disabled="true"]{color:var(--fds-colour-text-subtler);}.l1s6ick6[data-read-only="true"]{margin-right:var(--fds-spacing-4);}.l1s6ick6[data-position="right"]{margin-right:0;margin-left:var(--fds-spacing-12);}.l1s6ick6[data-position="right"][data-read-only="true"]{margin-right:0;margin-left:var(--fds-spacing-4);}}