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

package/cjs/file-upload/file-list-item/file-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport { memo, useContext, useEffect, useRef, useState } from \"react\";\n\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ErrorIconButton,\n    ExtendedNameSection,\n    FileSizeSection,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = (value: string) => {\n        if (!truncateText) return value;\n\n        const widthOfElement =\n            detailSectionRef && detailSectionRef.current\n                ? detailSectionRef.current.getBoundingClientRect().width\n                : 0;\n\n        return StringHelper.truncateOneLine(\n            value,\n            widthOfElement,\n            widthOfElement / 2,\n            widthOfElement / 2 / 8, // Arbitrary\n            16 // Font size\n        );\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <ItemDescriptionText>{description}</ItemDescriptionText>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <ItemText>{fileSize}</ItemText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <ItemText>{fileSize}</ItemText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <ItemText>{fileSize}</ItemText>\n            </FileSizeSection>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else if (thumbnailImageDataUrl) {\n            content = renderWithThumbnail(thumbnailImageDataUrl);\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={!!thumbnailImageDataUrl}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <ErrorIconButton\n                    onClick={handleDelete}\n                    data-testid={`${id}-error-delete-button`}\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                >\n                    <CrossIcon aria-hidden />\n                </ErrorIconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                        >\n                            <PencilIcon aria-hidden />\n                        </IconButton>\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                    >\n                        <BinIcon aria-hidden />\n                    </IconButton>\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","useEffect","getTruncatedText","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","ItemText","weight","ItemDescriptionText","Item","Object","assign","ref","$sortable","$disabled","$focusType","DragHandleIcon","$active","Box","$focused","$loading","$editable","content","NameSection","DesktopErrorMessage","ErrorIcon","FileSizeSection","MobileErrorMessage","FileListItemThumbnail","ExtendedNameSection","renderWithThumbnail","$hideInMobile","ContentSection","$hasThumbnail","renderContents","ErrorIconButton","onClick","CrossIcon","ProgressBar","IconButton","type","styleType","sizeType","onKeyDown","PencilIcon","BinIcon","ActionContainer","$error","renderActions"],"mappings":"ioBAoCA,MA6RaA,EAAeC,EAAAA,MA7RV,EACdC,WACAC,WACAC,WACAC,eACAC,WACAC,WACAC,WACAC,kBAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,YACJA,EAAWC,SACXA,EAAW,EAACC,aACZA,EAAYC,sBACZA,EAAqBC,aACrBA,GAAe,GACff,GACGgB,EAAeC,GAAoBC,cACpCC,SAAEA,GAAaC,EAAAA,WAAWC,sBAG1BC,WAAEA,EAAUC,UAAEA,EAASC,WAAEA,EAAUC,UAAEA,EAASC,WAAEA,GAClDC,EAAAA,YAAY,CAAEnB,OACZoB,EAAmBC,EAAAA,OAAuB,MAC1CC,EAAQ,CACVL,UAAWM,EAAAA,IAAIC,UAAUC,SAASR,GAClCC,cAGEQ,+BACFJ,SACGR,GACAC,GAIDY,EAAYvB,EAAW,EACvBwB,EAAWC,EAAAA,iBAAiBC,sBAAsB5B,GAClD6B,EAA2BpB,EAC3BA,IAAaX,EACT,OACA,SACJ,OAKNgC,EAAAA,WAAU,KACNvB,EAAiBwB,EAAiBhC,GAAM,GACzC,CAACN,IAKJ,MAAMuC,EAAe,KACjBpC,GAAU,EAGRqC,EAAa,KACXpC,GACAA,GACJ,EAGEqC,EAAiBC,IAKf3C,GACA2C,EAAMC,iBACV,EAMEL,EAAoBM,IACtB,IAAKhC,EAAc,OAAOgC,EAE1B,MAAMC,EACFpB,GAAoBA,EAAiBqB,QAC/BrB,EAAiBqB,QAAQC,wBAAwBC,MACjD,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,EAGCM,EAAgB,IAAMlD,KAAce,EAEpCoC,EAAmB,MAAQrD,IAAaG,EAKxCmD,EAAwB,IAC1BC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,SAAQ,CAACC,OAAQnD,EAAc,WAAa,UAASgD,SACjD3C,IAEJL,GACGiD,EAAAA,IAACG,EAAAA,8BAAqBpD,OA8IlC,OACI8C,EAAAA,KAACO,EAAAA,KAAIC,OAAAC,OAAA,CACD1D,GAAIA,EACJ2D,IAAK3C,EAAU4C,UACJb,IAAkBc,UAClBf,IAAegB,WACd/B,GACPgB,IAAqBrB,EAAgB,CAAA,aAEzCqB,KACGK,EAAAA,IAACW,EAAAA,eAAc,CAAA,cACE,GAAG/D,0BACL8C,IAAekB,QACH,SAAdjC,IAGjBkB,EAAAA,KAACgB,EAAAA,IAAG,CAAAC,SACwB,SAAdnC,WACA1B,EAAY8D,SACZxC,EAASkC,UACRf,IAAesB,UACf3E,YA3GA,MACnB,IAAI4E,EAUJ,OAPIA,EADAhE,EArDJ4C,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIF,OAACqB,EAAAA,YAAW,CAACX,IAAKvC,EAAgB+B,SAAA,CAC7BH,IACA3C,GACG4C,EAAAA,KAACsB,EAAAA,oBAAmB,CAACjB,OAAO,WAAUH,SAAA,CAClCC,EAAAA,IAACoB,EAAAA,8BACAnE,QAIb+C,EAAAA,IAACqB,EAAAA,gBAAe,CAAAtB,SACZC,EAAAA,IAACC,EAAAA,SAAQ,CAAAF,SAAEvB,MAEdvB,GACG4C,EAAAA,KAACyB,EAAAA,mBAAkB,CAACpB,OAAO,qBACvBF,EAAAA,IAACoB,EAAAA,UAAS,CAAA,eAAA,IACTnE,QAuCFC,EAjCa,CAACA,GACzB2C,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACuB,wBAAqB,CAClBrE,sBAAuBA,EAAqB,cAC/B,GAAGN,gBAEpBiD,EAAAA,KAAC2B,EAAAA,+BACGxB,EAAAA,IAACkB,EAAAA,aAAYX,IAAKvC,EAAgB+B,SAC7BH,MAELI,EAAAA,IAACqB,kBAAe,CAAAtB,SACZC,MAACC,EAAAA,SAAQ,CAAAF,SAAEvB,YAuBTiD,CAAoBvE,GAhBlC2C,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,MAACkB,EAAAA,YAAW,CAACX,IAAKvC,EAAgB+B,SAC7BH,MAELI,EAAAA,IAACqB,EAAAA,gBAAe,CAAAK,cAAgBnD,EAASwB,SACrCC,EAAAA,IAACC,WAAQ,CAAAF,SAAEvB,SAiBfwB,EAAAA,IAAC2B,EAAAA,eAAc,CAAAC,gBAAkB1E,EAAqB6C,SACjDkB,GACY,EA+FZY,IACCpF,GA5FQ,MAClB,IAAIwE,EAwDJ,OArDIA,EADAhE,EAEI+C,EAAAA,IAAC8B,kBAAe,CACZC,QAASjD,EAAY,cACR,GAAGlC,qCACJ,UAAUC,aAAgBI,IAAc8C,SAEpDC,EAAAA,IAACgC,EAAAA,UAAS,CAAA,eAAA,MAGXzD,EAEHyB,EAAAA,IAACiC,eACGjF,SAAUA,EAAQ,cACL,GAAGJ,mBAKpBiD,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CACK1D,GACG2D,EAAAA,IAACkC,aAAU,CAAA,cAEM,GAAGtF,gBAAgB,cACpB,OACZuF,KAAK,SACLC,UAAU,QACVC,SAAS,qBACG,QAAQxF,IACpBL,SAAUkD,IACVqC,QAAShD,EACTuD,UAAWtD,EAAae,SAExBC,EAAAA,IAACuC,aAAU,CAAA,eAAA,KAXP,QAcZvC,MAACkC,EAAAA,WAAU,CAAA,cAEM,GAAGtF,gCACJ,OACZuF,KAAK,SACLC,UAAU,QACVC,SAAS,QAAO,aACJ,UAAUxF,IACtBL,SAAUkD,IACVqC,QAASjD,EACTwD,UAAWtD,EAAae,SAExBC,EAAAA,IAACwC,EAAAA,QAAO,CAAA,eAAA,KAXJ,aAkBhBxC,EAAAA,IAACyC,EAAAA,gBAAe,CAAAzB,UACD3E,EAAQqG,SACTzF,WACAsB,EAASwB,SAElBkB,GACa,EA4BA0B,SAEf"}
+{"version":3,"file":"file-list-item.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.tsx"],"sourcesContent":["import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { BinIcon } from \"@lifesg/react-icons/bin\";\nimport { PencilIcon } from \"@lifesg/react-icons/pencil\";\nimport {\n    memo,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { ProgressBar } from \"../../shared/progress-bar\";\nimport { StringHelper } from \"../../util\";\nimport { FileUploadContext } from \"../context\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { ItemFocusType } from \"./file-list-item.styles\";\nimport * as styles from \"./file-list-item.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item-thumbnail\";\nimport type { FileListItemProps } from \"./types\";\n\ninterface Props extends FileListItemProps {\n    readOnly?: boolean | undefined;\n}\n\nconst {\n    ActionContainer,\n    Box,\n    ContentSection,\n    DesktopErrorMessage,\n    DragHandleIcon,\n    ErrorIcon,\n    ExtendedNameSection,\n    FileSizeSection,\n    FileSizeText,\n    IconButton,\n    Item,\n    ItemDescriptionText,\n    ItemText,\n    MobileErrorMessage,\n    NameSection,\n} = styles;\n\nconst Component = ({\n    fileItem,\n    editable,\n    sortable,\n    wrapperWidth,\n    disabled,\n    readOnly,\n    onDelete,\n    onEditClick,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const {\n        id,\n        name,\n        size,\n        description,\n        progress = 1,\n        errorMessage,\n        thumbnailImageDataUrl,\n        truncateText = true,\n    } = fileItem;\n    const [formattedName, setFormattedName] = useState<string>();\n    const { activeId } = useContext(FileUploadContext);\n\n    // Sortable mechanism\n    const { attributes, listeners, setNodeRef, transform, transition } =\n        useSortable({ id });\n    const detailSectionRef = useRef<HTMLDivElement>(null);\n    const style = {\n        transform: CSS.Translate.toString(transform),\n        transition,\n    };\n\n    const sortableProps = {\n        style,\n        ...attributes,\n        ...listeners,\n    };\n\n    // Local variables\n    const isLoading = progress < 1;\n    const fileSize = FileUploadHelper.formatFileSizeDisplay(size);\n    const focusType: ItemFocusType = activeId\n        ? activeId === id\n            ? \"self\"\n            : \"others\"\n        : \"none\";\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getTruncatedText = useCallback(\n        (value: string) => {\n            if (!truncateText) return value;\n\n            const widthOfElement =\n                detailSectionRef && detailSectionRef.current\n                    ? detailSectionRef.current.getBoundingClientRect().width\n                    : 0;\n\n            return StringHelper.truncateOneLine(\n                value,\n                widthOfElement,\n                widthOfElement / 2,\n                widthOfElement / 2 / 8, // Arbitrary\n                16 // Font size\n            );\n        },\n        [truncateText]\n    );\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setFormattedName(getTruncatedText(name));\n    }, [wrapperWidth, getTruncatedText, name]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDelete = () => {\n        onDelete();\n    };\n\n    const handleEdit = () => {\n        if (onEditClick) {\n            onEditClick();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        /**\n         * Circumvent issue of keydown action activating the sort mechanism\n         * rather than the actual action\n         */\n        if (sortable) {\n            event.stopPropagation();\n        }\n    };\n\n    const shouldDisable = () => disabled || !!activeId;\n\n    const shouldEnableSort = () => !!sortable && !readOnly;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderNameDescription = () => (\n        <>\n            <ItemText weight={description ? \"semibold\" : \"regular\"}>\n                {formattedName}\n            </ItemText>\n            {description && (\n                <ItemDescriptionText>{description}</ItemDescriptionText>\n            )}\n        </>\n    );\n\n    const renderErrorState = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n                {errorMessage && (\n                    <DesktopErrorMessage weight=\"semibold\">\n                        <ErrorIcon aria-hidden />\n                        {errorMessage}\n                    </DesktopErrorMessage>\n                )}\n            </NameSection>\n            <FileSizeSection>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n            {errorMessage && (\n                <MobileErrorMessage weight=\"semibold\">\n                    <ErrorIcon aria-hidden />\n                    {errorMessage}\n                </MobileErrorMessage>\n            )}\n        </>\n    );\n\n    const renderWithThumbnail = (thumbnailImageDataUrl: string) => (\n        <>\n            <FileListItemThumbnail\n                thumbnailImageDataUrl={thumbnailImageDataUrl}\n                fileType={fileItem.type}\n                data-testid={`${id}-thumbnail`}\n            />\n            <ExtendedNameSection>\n                <NameSection ref={detailSectionRef}>\n                    {renderNameDescription()}\n                </NameSection>\n                <FileSizeSection>\n                    <FileSizeText>{fileSize}</FileSizeText>\n                </FileSizeSection>\n            </ExtendedNameSection>\n        </>\n    );\n\n    const renderDefault = () => (\n        <>\n            <NameSection ref={detailSectionRef}>\n                {renderNameDescription()}\n            </NameSection>\n            <FileSizeSection $hideInMobile={isLoading}>\n                <FileSizeText>{fileSize}</FileSizeText>\n            </FileSizeSection>\n        </>\n    );\n\n    const renderContents = () => {\n        let content: JSX.Element;\n        const shouldShowThumbnail =\n            !!thumbnailImageDataUrl ||\n            fileItem.type === FileUploadHelper.PDF_MIME_TYPE;\n\n        if (errorMessage) {\n            content = renderErrorState();\n        } else if (shouldShowThumbnail) {\n            content = renderWithThumbnail(thumbnailImageDataUrl || \"\");\n        } else {\n            content = renderDefault();\n        }\n\n        return (\n            <ContentSection $hasThumbnail={shouldShowThumbnail}>\n                {content}\n            </ContentSection>\n        );\n    };\n\n    const renderActions = () => {\n        let content: JSX.Element;\n\n        if (errorMessage) {\n            content = (\n                <IconButton\n                    data-testid={`${id}-error-delete-button`}\n                    data-no-dnd=\"true\"\n                    type=\"button\"\n                    styleType=\"light\"\n                    sizeType=\"small\"\n                    aria-label={`delete ${name}, error: ${errorMessage}`}\n                    onClick={handleDelete}\n                >\n                    <BinIcon aria-hidden />\n                </IconButton>\n            );\n        } else if (isLoading) {\n            content = (\n                <ProgressBar\n                    progress={progress}\n                    data-testid={`${id}-progress-bar`}\n                />\n            );\n        } else {\n            content = (\n                <>\n                    {editable && (\n                        <IconButton\n                            key=\"edit\"\n                            data-testid={`${id}-edit-button`}\n                            data-no-dnd=\"true\"\n                            type=\"button\"\n                            styleType=\"light\"\n                            sizeType=\"small\"\n                            aria-label={`edit ${name}`}\n                            disabled={shouldDisable()}\n                            onClick={handleEdit}\n                            onKeyDown={handleKeyDown}\n                            icon={<PencilIcon aria-hidden />}\n                        />\n                    )}\n                    <IconButton\n                        key=\"delete\"\n                        data-testid={`${id}-delete-button`}\n                        data-no-dnd=\"true\"\n                        type=\"button\"\n                        styleType=\"light\"\n                        sizeType=\"small\"\n                        aria-label={`delete ${name}`}\n                        disabled={shouldDisable()}\n                        onClick={handleDelete}\n                        onKeyDown={handleKeyDown}\n                        icon={<BinIcon aria-hidden />}\n                    />\n                </>\n            );\n        }\n\n        return (\n            <ActionContainer\n                $editable={editable}\n                $error={!!errorMessage}\n                $loading={isLoading}\n            >\n                {content}\n            </ActionContainer>\n        );\n    };\n\n    return (\n        <Item\n            id={id}\n            ref={setNodeRef}\n            $sortable={shouldEnableSort()}\n            $disabled={shouldDisable()}\n            $focusType={focusType}\n            {...(shouldEnableSort() ? sortableProps : {})}\n        >\n            {shouldEnableSort() && (\n                <DragHandleIcon\n                    data-testid={`${id}-drag-handle`}\n                    $disabled={shouldDisable()}\n                    $active={focusType === \"self\"}\n                />\n            )}\n            <Box\n                $focused={focusType === \"self\"}\n                $error={!!errorMessage}\n                $loading={isLoading}\n                $disabled={shouldDisable()}\n                $editable={editable}\n            >\n                {renderContents()}\n                {!readOnly && renderActions()}\n            </Box>\n        </Item>\n    );\n};\n\nexport const FileListItem = memo(Component);\n"],"names":["ActionContainer","Box","ContentSection","DesktopErrorMessage","DragHandleIcon","ErrorIcon","ExtendedNameSection","FileSizeSection","FileSizeText","IconButton","Item","ItemDescriptionText","ItemText","MobileErrorMessage","NameSection","styles","FileListItem","memo","fileItem","editable","sortable","wrapperWidth","disabled","readOnly","onDelete","onEditClick","id","name","size","description","progress","errorMessage","thumbnailImageDataUrl","truncateText","formattedName","setFormattedName","useState","activeId","useContext","FileUploadContext","attributes","listeners","setNodeRef","transform","transition","useSortable","detailSectionRef","useRef","style","CSS","Translate","toString","sortableProps","isLoading","fileSize","FileUploadHelper","formatFileSizeDisplay","focusType","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","handleDelete","handleEdit","handleKeyDown","event","stopPropagation","shouldDisable","shouldEnableSort","renderNameDescription","_jsxs","_Fragment","children","_jsx","weight","Object","assign","ref","$sortable","$disabled","$focusType","$active","$focused","$loading","$editable","content","shouldShowThumbnail","type","PDF_MIME_TYPE","FileListItemThumbnail","fileType","renderWithThumbnail","$hideInMobile","$hasThumbnail","renderContents","styleType","sizeType","onClick","BinIcon","ProgressBar","onKeyDown","icon","PencilIcon","$error","renderActions"],"mappings":"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"}

package/cjs/file-upload/file-list-item/file-list-item.styles.js

@@ -1,4 +1,4 @@
-"use strict";var e=require("@lifesg/react-icons/drag-handle"),i=require("@lifesg/react-icons/exclamation-circle-fill"),o=require("styled-components"),r=require("../../icon-button/icon-button.js"),t=require("../../shared/clickable-icon/clickable-icon.js"),n=require("../../typography/index.js"),a=require("../../v3_theme/index.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=d(o);const l=s.default.li`
+"use strict";var e=require("@lifesg/react-icons/drag-handle"),i=require("@lifesg/react-icons/exclamation-circle-fill"),o=require("styled-components"),r=require("../../button/button.js"),t=require("../../typography/index.js"),a=require("../../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(o);const s=d.default.li`
     display: flex;
     align-items: center;
     width: 100%;
@@ -23,7 +23,7 @@
                 // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations
                 touch-action: manipulation;
             `:void 0}
-`,c=s.default(e.DragHandleIcon)`
+`,l=d.default(e.DragHandleIcon)`
     margin-right: ${a.V3_Spacing["spacing-16"]};
     height: 1.5rem;
     width: 1.5rem;
@@ -34,7 +34,7 @@
             `:e.$disabled?o.css`
                 color: ${a.V3_Colour["icon-disabled"]};
             `:void 0};
-`,g=s.default.div`
+`,c=d.default.div`
     background: ${a.V3_Colour["bg-primary-subtlest"]};
     border: ${a.V3_Border["width-010"]} ${a.V3_Border.solid}
         ${a.V3_Colour.border};
@@ -64,7 +64,7 @@
                     align-items: flex-start;
                 }
             `}}
-`,p=s.default.div`
+`,p=d.default.div`
     display: flex;
     flex: 1;
     align-items: center;
@@ -81,12 +81,12 @@
                     align-items: center;
                 }
             `}}
-`,u=s.default.div`
+`,g=d.default.div`
     display: flex;
     flex: 1;
     flex-direction: column;
     width: 100%;
-`,m=s.default.div`
+`,u=d.default.div`
     display: flex;
     flex: 1;
     align-items: center;
@@ -96,7 +96,7 @@
         align-items: flex-start;
         width: 100%;
     }
-`,f=s.default.div`
+`,m=d.default.div`
     display: flex;
     width: 5rem;
     margin-left: ${a.V3_Spacing["spacing-8"]};
@@ -113,16 +113,19 @@
                     justify-content: flex-start;
                 `}
     }
-`,$=s.default(n.Typography.BodyMD)``,h=s.default($)`
+`,$=d.default(t.Typography.BodyMD)`
+    color: ${a.V3_Colour["text-subtler"]};
+`,f=d.default(t.Typography.BodyMD)``,x=d.default(t.Typography.BodyMD)`
     margin-top: ${a.V3_Spacing["spacing-4"]};
-`,x=s.default(i.ExclamationCircleFillIcon)`
+`,h=d.default(i.ExclamationCircleFillIcon)`
     height: 1lh;
     width: 1em;
     flex-shrink: 0;
     color: ${a.V3_Colour["icon-error-strong"]};
-`,b=s.default(n.Typography.BodySM)`
+`;d.default(t.Typography.BodySM)`
+    color: ${a.V3_Colour["text-error"]};
+`;const y=d.default(t.Typography.BodySM)`
     color: ${a.V3_Colour["text-error"]};
-`,y=s.default(b)`
     margin-top: ${a.V3_Spacing["spacing-4"]};
     display: flex;
     gap: ${a.V3_Spacing["spacing-4"]};
@@ -131,7 +134,8 @@
         display: none;
         visibility: hidden;
     }
-`,_=s.default(b)`
+`,b=d.default(t.Typography.BodySM)`
+    color: ${a.V3_Colour["text-error"]};
     display: none;
     visibility: hidden;
 
@@ -141,7 +145,7 @@
         visibility: visible;
         margin-top: ${a.V3_Spacing["spacing-8"]};
     }
-`,V=s.default.div`
+`,_=d.default.div`
     width: 6rem;
     margin-left: ${a.V3_Spacing["spacing-32"]};
     display: flex;
@@ -161,20 +165,11 @@
                     align-self: flex-end;
                 `:void 0}
     }
-`,M=s.default(r.IconButton)`
+`,V=d.default(r.Button)`
     min-width: unset;
 
     &:not(:last-child) {
         margin-right: ${a.V3_Spacing["spacing-16"]};
     }
-`,v=s.default(t.ClickableIcon)`
-    height: 2.5rem;
-    width: 2.5rem;
-    padding: unset;
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-        color: ${a.V3_Colour.icon};
-    }
-`;exports.ActionContainer=V,exports.BaseErrorMessage=b,exports.Box=g,exports.ContentSection=p,exports.DesktopErrorMessage=y,exports.DragHandleIcon=c,exports.ErrorIcon=x,exports.ErrorIconButton=v,exports.ExtendedNameSection=m,exports.FileSizeSection=f,exports.IconButton=M,exports.Item=l,exports.ItemDescriptionText=h,exports.ItemText=$,exports.MobileErrorMessage=_,exports.NameSection=u;
+`;exports.ActionContainer=_,exports.Box=c,exports.ContentSection=p,exports.DesktopErrorMessage=y,exports.DragHandleIcon=l,exports.ErrorIcon=h,exports.ExtendedNameSection=u,exports.FileSizeSection=m,exports.FileSizeText=$,exports.IconButton=V,exports.Item=s,exports.ItemDescriptionText=x,exports.ItemText=f,exports.MobileErrorMessage=b,exports.NameSection=g;
 //# sourceMappingURL=file-list-item.styles.js.map

package/cjs/file-upload/file-list-item/file-list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { IconButton as DSIconButton } from \"../../icon-button\";\nimport { ClickableIcon } from \"../../shared/clickable-icon\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\nexport const ItemDescriptionText = styled(ItemText)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(BaseErrorMessage)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(BaseErrorMessage)`\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const ErrorIconButton = styled(ClickableIcon)`\n    height: 2.5rem;\n    width: 2.5rem;\n    padding: unset;\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n        color: ${V3_Colour[\"icon\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","ItemText","Typography","BodyMD","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BaseErrorMessage","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton","ErrorIconButton","ClickableIcon"],"mappings":"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"}
+{"version":3,"file":"file-list-item.styles.js","sources":["../../../../src/file-upload/file-list-item/file-list-item.styles.tsx"],"sourcesContent":["import { DragHandleIcon as DSDragHandleIcon } from \"@lifesg/react-icons/drag-handle\";\nimport { ExclamationCircleFillIcon } from \"@lifesg/react-icons/exclamation-circle-fill\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button as DSIconButton } from \"../../button\";\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\nexport type ItemFocusType = \"self\" | \"others\" | \"none\";\ninterface ItemStyleProps {\n    $sortable: boolean;\n    $disabled?: boolean | undefined;\n    $focusType: ItemFocusType;\n}\n\ninterface DragHandleIconStyleProps {\n    $disabled?: boolean | undefined;\n    $active?: boolean | undefined;\n}\n\ninterface BoxStyleProps {\n    $error?: boolean | undefined;\n    $disabled?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $loading?: boolean | undefined;\n    $editable?: boolean | undefined;\n}\n\ninterface ContentSectionStyleProps {\n    $hasThumbnail?: boolean | undefined;\n}\n\ninterface ActionContainerStyleProps {\n    $editable?: boolean | undefined;\n    $error?: boolean | undefined;\n    $loading?: boolean | undefined;\n}\n\ninterface FileSizeSectionStyleProps {\n    $hideInMobile?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Item = styled.li<ItemStyleProps>`\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border: none;\n\n    &:not(:last-child) {\n        margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$disabled && props.$focusType === \"none\") {\n            // Show disabled cursor only if no dragging is happening\n            return css`\n                cursor: not-allowed;\n            `;\n        } else if (props.$sortable && props.$focusType === \"self\") {\n            return css`\n                cursor: grabbing;\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        } else if (props.$sortable) {\n            return css`\n                &:hover {\n                    cursor: grab;\n                }\n                // Following recommendation by the library for touch events\n                // https://docs.dndkit.com/api-documentation/sensors/touch#recommendations\n                touch-action: manipulation;\n            `;\n        }\n    }}\n`;\n\nexport const DragHandleIcon = styled(\n    DSDragHandleIcon\n)<DragHandleIconStyleProps>`\n    margin-right: ${V3_Spacing[\"spacing-16\"]};\n    height: 1.5rem;\n    width: 1.5rem;\n    color: ${V3_Colour[\"icon\"]};\n\n    ${(props) => {\n        if (props.$active) {\n            return css`\n                color: ${V3_Colour[\"icon-primary\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"icon-disabled\"]};\n            `;\n        }\n    }};\n`;\n\nexport const Box = styled.div<BoxStyleProps>`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    align-items: center;\n    width: 100%;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        padding: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${(props) => {\n        if (props.$focused) {\n            return css`\n                border-color: ${V3_Colour[\"border-focus\"]};\n                box-shadow: ${V3_Shadow[\"xs-focus-strong\"]};\n            `;\n        } else if (props.$disabled) {\n            return css`\n                border-color: ${V3_Colour[\"border-disabled\"]};\n            `;\n        } else if (props.$error) {\n            return css`\n                background: ${V3_Colour[\"bg-error\"]};\n                border-color: ${V3_Colour[\"border-error\"]};\n            `;\n        }\n    }}\n\n    ${(props) => {\n        if (!props.$error && (props.$loading || props.$editable)) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: column;\n                    align-items: flex-start;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const ContentSection = styled.div<ContentSectionStyleProps>`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        width: 100%;\n        align-items: flex-start;\n    }\n\n    ${(props) => {\n        if (props.$hasThumbnail) {\n            return css`\n                ${V3_MediaQuery.MaxWidth.md} {\n                    flex-direction: row;\n                    align-items: center;\n                }\n            `;\n        }\n    }}\n`;\n\nexport const NameSection = styled.div`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    width: 100%;\n`;\n\nexport const ExtendedNameSection = styled.div`\n    display: flex;\n    flex: 1;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n    }\n`;\n\nexport const FileSizeSection = styled.div<FileSizeSectionStyleProps>`\n    display: flex;\n    width: 5rem;\n    margin-left: ${V3_Spacing[\"spacing-8\"]};\n    justify-content: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        ${(props) => {\n            if (props.$hideInMobile) {\n                return css`\n                    display: none;\n                    visibility: hidden;\n                `;\n            } else {\n                return css`\n                    width: 100%;\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-8\"]};\n                    justify-content: flex-start;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const FileSizeText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const ItemText = styled(Typography.BodyMD)``;\n\nexport const ItemDescriptionText = styled(Typography.BodyMD)`\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n`;\n\nexport const ErrorIcon = styled(ExclamationCircleFillIcon)`\n    height: 1lh;\n    width: 1em;\n    flex-shrink: 0;\n    color: ${V3_Colour[\"icon-error-strong\"]};\n`;\n\nexport const BaseErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n`;\n\nexport const DesktopErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    margin-top: ${V3_Spacing[\"spacing-4\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-4\"]};\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const MobileErrorMessage = styled(Typography.BodySM)`\n    color: ${V3_Colour[\"text-error\"]};\n    display: none;\n    visibility: hidden;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: flex;\n        gap: ${V3_Spacing[\"spacing-4\"]};\n        visibility: visible;\n        margin-top: ${V3_Spacing[\"spacing-8\"]};\n    }\n`;\n\nexport const ActionContainer = styled.div<ActionContainerStyleProps>`\n    width: 6rem;\n    margin-left: ${V3_Spacing[\"spacing-32\"]};\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: fit-content;\n\n        ${(props) => {\n            if (props.$loading && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    width: 100%;\n                `;\n            } else if (props.$editable && !props.$error) {\n                return css`\n                    margin-left: 0;\n                    margin-top: ${V3_Spacing[\"spacing-16\"]};\n                    align-self: flex-end;\n                `;\n            }\n        }}\n    }\n`;\n\nexport const IconButton = styled(DSIconButton)`\n    min-width: unset;\n\n    &:not(:last-child) {\n        margin-right: ${V3_Spacing[\"spacing-16\"]};\n    }\n`;\n"],"names":["Item","styled","li","V3_Spacing","props","$disabled","$focusType","css","$sortable","DragHandleIcon","DSDragHandleIcon","V3_Colour","$active","Box","div","V3_Border","V3_Radius","V3_MediaQuery","MaxWidth","md","$focused","V3_Shadow","$error","$loading","$editable","ContentSection","$hasThumbnail","NameSection","ExtendedNameSection","FileSizeSection","$hideInMobile","FileSizeText","Typography","BodyMD","ItemText","ItemDescriptionText","ErrorIcon","ExclamationCircleFillIcon","BodySM","DesktopErrorMessage","MobileErrorMessage","ActionContainer","IconButton","DSIconButton"],"mappings":"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"}

package/cjs/file-upload/file-upload.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./context.js"),l=require("./dropzone.js"),i=require("./file-list.js"),n=require("./file-upload.styles.js");exports.FileUpload=({styleType:o="bordered",fileItems:s,title:a,description:d,maxFiles:u,warning:c,className:p,name:x,id:h,"data-testid":j,accept:m,capture:f,multiple:b,disabled:g,sortable:y=!1,fileDescriptionMaxLength:v,editableFileItems:D=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:U,onDelete:q,onEdit:B,onSort:T})=>{const L={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},z=t.useRef(null),w=t.useRef(null),[A,M]=t.useState(),S=()=>!(!u||!s)&&s.length>=u;return e.jsx(r.FileUploadContext.Provider,{value:{activeId:A,setActiveId:M},children:e.jsxs(l.FileUploadDropzone,{ref:z,onChange:e=>{var t;!g&&U&&(U(e),null===(t=w.current)||void 0===t||t.focus())},id:h?`${h}-dropzone`:"dropzone",accept:m,capture:f,border:"bordered"===o,className:p,"data-testid":j,name:x,multiple:b,disabled:g||S()||F,children:[!(!a&&!d)&&e.jsxs(n.TextContainer,{children:[a?"string"==typeof a?e.jsx(n.Title,{children:a}):e.jsx(n.TitleContainer,{children:a}):null,d?"string"==typeof d?e.jsx(n.Description,{children:d}):e.jsx(n.DescriptionContainer,{children:d}):null]}),!!c&&e.jsx(n.WarningAlert,{type:"warning",children:c}),e.jsx(i.FileList,{ref:w,fileItems:s,editableFileItems:D,fileDescriptionMaxLength:v,sortable:y,disabled:g,readOnly:F,onItemDelete:e=>{var t;q&&(q(e),null===(t=w.current)||void 0===t||t.focus())},onItemUpdate:e=>{B&&B(e)},onSort:e=>{T&&T(e)}}),C&&e.jsx(n.ErrorAlert,{type:"error",children:C}),!F&&e.jsxs(n.UploadButtonContainer,{children:[e.jsx(n.UploadButton,{type:"button",styleType:"secondary",disabled:!!A||g||S(),onClick:e=>{g||(e.preventDefault(),z.current&&z.current.openFileDialog())},children:L.uploadButton}),e.jsx(n.UploadButtonText,{weight:"semibold",children:"or drop them here"})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./context.js"),l=require("./dropzone.js"),i=require("./file-list.js"),n=require("./file-upload.styles.js");exports.FileUpload=({styleType:o="bordered",fileItems:s,title:a,description:d,maxFiles:u,warning:c,className:p,name:x,id:b,"data-testid":h,accept:j,capture:m,multiple:f,disabled:y,sortable:g=!1,fileDescriptionMaxLength:v,editableFileItems:D=!1,errorMessage:C,readOnly:F,customLabels:I,onChange:T,onDelete:U,onEdit:q,onSort:z})=>{const B={uploadButton:(null==I?void 0:I.uploadButtonLabel)||"Upload files"},L=t.useRef(null),S=t.useRef(null),[w,A]=t.useState(),M=()=>!(!u||!s)&&s.length>=u;return e.jsx(r.FileUploadContext.Provider,{value:{activeId:w,setActiveId:A},children:e.jsxs(l.FileUploadDropzone,{ref:L,onChange:e=>{var t;!y&&T&&(T(e),null===(t=S.current)||void 0===t||t.focus())},id:b?`${b}-dropzone`:"dropzone",accept:j,capture:m,border:"bordered"===o,className:p,"data-testid":h,name:x,multiple:f,disabled:y||M()||F,children:[!(!a&&!d)&&e.jsxs(n.TextContainer,{children:[a?"string"==typeof a?e.jsx(n.Title,{children:a}):e.jsx(n.TitleContainer,{baseTextSize:"body-baseline",children:a}):null,d?"string"==typeof d?e.jsx(n.Description,{children:d}):e.jsx(n.DescriptionContainer,{baseTextSize:"body-md",children:d}):null]}),!!c&&e.jsx(n.WarningAlert,{type:"warning",children:c}),e.jsx(i.FileList,{ref:S,fileItems:s,editableFileItems:D,fileDescriptionMaxLength:v,sortable:g,disabled:y,readOnly:F,onItemDelete:e=>{var t;U&&(U(e),null===(t=S.current)||void 0===t||t.focus())},onItemUpdate:e=>{q&&q(e)},onSort:e=>{z&&z(e)}}),C&&e.jsx(n.ErrorAlert,{type:"error",children:C}),!F&&e.jsxs(n.UploadButtonContainer,{children:[e.jsx(n.UploadButton,{type:"button",styleType:"secondary",disabled:!!w||y||M(),onClick:e=>{y||(e.preventDefault(),L.current&&L.current.openFileDialog())},children:B.uploadButton}),e.jsx(n.UploadButtonText,{weight:"semibold",children:"or drop them here"})]})]})})};
 //# sourceMappingURL=file-upload.js.map

package/cjs/file-upload/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return <TitleContainer>{title}</TitleContainer>;\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return <DescriptionContainer>{description}</DescriptionContainer>;\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"4MAqB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAAA,OAAwB,MACtCC,EAAcD,EAAAA,OAAoB,OACjCE,EAAUC,GAAeC,aA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EA8BvD,OACI+B,EAAAA,IAACC,EAAAA,kBAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAAAA,KAACQ,gBAAa,CAAAT,SAAA,CAvCrBrC,EAIgB,iBAAVA,EACAiC,EAAAA,IAACc,EAAAA,MAAK,CAAAV,SAAErC,IAGZiC,EAAAA,IAACe,EAAAA,eAAc,CAAAX,SAAErC,IAPb,KAWNC,EAIsB,iBAAhBA,EACAgC,EAAAA,IAACgB,EAAAA,YAAW,CAAAZ,SAAEpC,IAGlBgC,EAAAA,IAACiB,EAAAA,qBAAoB,CAAAb,SAAEpC,IAPnB,UA+BAE,GACC8B,EAAAA,IAACkB,EAAAA,cAAaC,KAAK,UAASf,SAAElC,IAElC8B,EAAAA,IAACoB,EAAAA,SAAQ,CACLb,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVsC,aAhGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA6FYY,aA/EUC,IAClBrC,GACAA,EAAOqC,EACX,EA6EYpC,OA1EIqC,IACZrC,GACAA,EAAOqC,EACX,IAyES3C,GACGkB,EAAAA,IAAC0B,EAAAA,WAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAAAA,KAACsB,EAAAA,sBAAqB,CAAAvB,SAAA,CAClBJ,EAAAA,IAAC4B,EAAAA,aAAY,CACTT,KAAK,SACLtD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9B+B,QAvGpBC,IAEKpD,IACDoD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAgGoD5B,SAE/Bf,EAAOC,eAEZU,EAAAA,IAACiC,EAAAA,iBAAgB,CAACC,OAAO,WAAU9B,SAAA,6BAMtB"}
+{"version":3,"file":"file-upload.js","sources":["../../../src/file-upload/file-upload.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\n\nimport { FileUploadContext } from \"./context\";\nimport type { DropzoneElement } from \"./dropzone\";\nimport { FileUploadDropzone } from \"./dropzone\";\nimport type { FileListRef } from \"./file-list\";\nimport { FileList } from \"./file-list\";\nimport {\n    Description,\n    DescriptionContainer,\n    ErrorAlert,\n    TextContainer,\n    Title,\n    TitleContainer,\n    UploadButton,\n    UploadButtonContainer,\n    UploadButtonText,\n    WarningAlert,\n} from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\nexport const FileUpload = ({\n    styleType = \"bordered\",\n    fileItems,\n    title,\n    description,\n    maxFiles,\n    warning,\n    className,\n    name,\n    id,\n    \"data-testid\": testId,\n    accept,\n    capture,\n    multiple,\n    disabled,\n    sortable = false,\n    fileDescriptionMaxLength,\n    editableFileItems = false,\n    errorMessage,\n    readOnly,\n    customLabels,\n    onChange,\n    onDelete,\n    onEdit,\n    onSort,\n}: FileUploadProps) => {\n    const labels = {\n        uploadButton: customLabels?.uploadButtonLabel || \"Upload files\",\n    };\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const dropzoneRef = useRef<DropzoneElement>(null);\n    const fileListRef = useRef<FileListRef>(null);\n    const [activeId, setActiveId] = useState<string>();\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (files: File[]) => {\n        if (!disabled && onChange) {\n            onChange(files);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleItemDelete = (item: FileItemProps) => {\n        if (onDelete) {\n            onDelete(item);\n            fileListRef.current?.focus();\n        }\n    };\n\n    const handleUploadButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!disabled) {\n            event.preventDefault();\n            if (dropzoneRef.current) {\n                dropzoneRef.current.openFileDialog();\n            }\n        }\n    };\n\n    const handleItemUpdate = (updatedItem: FileItemProps) => {\n        if (onEdit) {\n            onEdit(updatedItem);\n        }\n    };\n\n    const handleSort = (updatedItems: FileItemProps[]) => {\n        if (onSort) {\n            onSort(updatedItems);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const reachedMaxFiles = () => {\n        return maxFiles && fileItems ? fileItems.length >= maxFiles : false;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderTitle = () => {\n        if (!title) {\n            return null;\n        }\n\n        if (typeof title === \"string\") {\n            return <Title>{title}</Title>;\n        }\n\n        return (\n            <TitleContainer baseTextSize=\"body-baseline\">\n                {title}\n            </TitleContainer>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return <Description>{description}</Description>;\n        }\n\n        return (\n            <DescriptionContainer baseTextSize=\"body-md\">\n                {description}\n            </DescriptionContainer>\n        );\n    };\n\n    return (\n        <FileUploadContext.Provider value={{ activeId, setActiveId }}>\n            <FileUploadDropzone\n                ref={dropzoneRef}\n                onChange={handleChange}\n                id={id ? `${id}-dropzone` : \"dropzone\"}\n                accept={accept}\n                capture={capture}\n                border={styleType === \"bordered\"}\n                className={className}\n                data-testid={testId}\n                name={name}\n                multiple={multiple}\n                disabled={disabled || reachedMaxFiles() || readOnly}\n            >\n                {!!(title || description) && (\n                    <TextContainer>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </TextContainer>\n                )}\n                {!!warning && (\n                    <WarningAlert type=\"warning\">{warning}</WarningAlert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    sortable={sortable}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    onItemDelete={handleItemDelete}\n                    onItemUpdate={handleItemUpdate}\n                    onSort={handleSort}\n                />\n                {errorMessage && (\n                    <ErrorAlert type=\"error\">{errorMessage}</ErrorAlert>\n                )}\n                {!readOnly && (\n                    <UploadButtonContainer>\n                        <UploadButton\n                            type=\"button\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                        >\n                            {labels.uploadButton}\n                        </UploadButton>\n                        <UploadButtonText weight=\"semibold\">\n                            or drop them here\n                        </UploadButtonText>\n                    </UploadButtonContainer>\n                )}\n            </FileUploadDropzone>\n        </FileUploadContext.Provider>\n    );\n};\n"],"names":["styleType","fileItems","title","description","maxFiles","warning","className","name","id","testId","accept","capture","multiple","disabled","sortable","fileDescriptionMaxLength","editableFileItems","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","reachedMaxFiles","length","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","files","_a","current","focus","border","TextContainer","Title","TitleContainer","baseTextSize","Description","DescriptionContainer","WarningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","ErrorAlert","UploadButtonContainer","UploadButton","onClick","event","preventDefault","openFileDialog","UploadButtonText","weight"],"mappings":"4MAqB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,eACAC,WACAC,eACAC,WACAC,WACAC,SACAC,aAEA,MAAMC,EAAS,CACXC,cAAcN,eAAAA,EAAcO,oBAAqB,gBAK/CC,EAAcC,EAAAA,OAAwB,MACtCC,EAAcD,EAAAA,OAAoB,OACjCE,EAAUC,GAAeC,aA6C1BC,EAAkB,OACb7B,IAAYH,IAAYA,EAAUiC,QAAU9B,EAsCvD,OACI+B,EAAAA,IAACC,EAAAA,kBAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKf,EACLP,SAnFUuB,WACb9B,GAAYO,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAgFQtC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACToC,OAAsB,aAAd/C,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYoB,KAAqBf,eAEvChB,IAASC,IACTqC,EAAAA,KAACQ,gBAAa,CAAAT,SAAA,CA/CrBrC,EAIgB,iBAAVA,EACAiC,EAAAA,IAACc,EAAAA,MAAK,CAAAV,SAAErC,IAIfiC,EAAAA,IAACe,EAAAA,eAAc,CAACC,aAAa,gBAAeZ,SACvCrC,IATE,KAeNC,EAIsB,iBAAhBA,EACAgC,EAAAA,IAACiB,EAAAA,YAAW,CAAAb,SAAEpC,IAIrBgC,EAAAA,IAACkB,EAAAA,qBAAoB,CAACF,aAAa,UAASZ,SACvCpC,IATE,UAmCAE,GACC8B,EAAAA,IAACmB,EAAAA,cAAaC,KAAK,UAAShB,SAAElC,IAElC8B,EAAAA,IAACqB,EAAAA,SAAQ,CACLd,IAAKb,EACL5B,UAAWA,EACXe,kBAAmBA,EACnBD,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVK,SAAUA,EACVuC,aAxGUC,UAClBrC,IACAA,EAASqC,GACU,QAAnBd,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAqGYa,aAvFUC,IAClBtC,GACAA,EAAOsC,EACX,EAqFYrC,OAlFIsC,IACZtC,GACAA,EAAOsC,EACX,IAiFS5C,GACGkB,EAAAA,IAAC2B,EAAAA,WAAU,CAACP,KAAK,QAAOhB,SAAEtB,KAE5BC,GACEsB,EAAAA,KAACuB,EAAAA,sBAAqB,CAAAxB,SAAA,CAClBJ,EAAAA,IAAC6B,EAAAA,aAAY,CACTT,KAAK,SACLvD,UAAU,YACVa,WACMiB,GAAYjB,GAAYoB,IAE9BgC,QA/GpBC,IAEKrD,IACDqD,EAAMC,iBACFxC,EAAYkB,SACZlB,EAAYkB,QAAQuB,iBAE5B,EAwGoD7B,SAE/Bf,EAAOC,eAEZU,EAAAA,IAACkC,EAAAA,iBAAgB,CAACC,OAAO,WAAU/B,SAAA,6BAMtB"}

package/cjs/file-upload/file-upload.styles.js

@@ -1,43 +1,41 @@
-"use strict";var t=require("styled-components"),e=require("../alert/alert.js"),o=require("../button/button.js"),r=require("../shared/html-content/html-content.js"),i=require("../typography/index.js"),n=require("../v3_theme/index.js");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=a(t);const d=l.default.div`
+"use strict";var t=require("styled-components"),e=require("../alert/alert.js"),r=require("../button/button.js"),o=require("../markup/markup.js"),i=require("../typography/index.js"),a=require("../v3_theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var l=n(t);const d=l.default.div`
     display: flex;
     flex-direction: column;
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-    gap: ${n.V3_Spacing["spacing-8"]};
-`,p=l.default(i.Typography.BodyBL)``,s=l.default.div`
-    color: ${n.V3_Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-baseline"})}
-`,u=l.default(i.Typography.BodyMD)`
-    color: ${n.V3_Colour["text-subtler"]};
-`,x=l.default.div`
-    color: ${n.V3_Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
+    margin-bottom: ${a.V3_Spacing["spacing-32"]};
+    gap: ${a.V3_Spacing["spacing-8"]};
+`,p=l.default(i.Typography.BodyBL)``,u=l.default(o.Markup)`
+    color: ${a.V3_Colour.text};
+`,s=l.default(i.Typography.BodyMD)`
+    color: ${a.V3_Colour["text-subtler"]};
+`,x=l.default(o.Markup)`
+    color: ${a.V3_Colour.text};
 `,c=l.default(e.Alert)`
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-`,y=l.default.div`
+    margin-bottom: ${a.V3_Spacing["spacing-32"]};
+`,g=l.default.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 
-    ${n.V3_MediaQuery.MaxWidth.md} {
+    ${a.V3_MediaQuery.MaxWidth.md} {
         align-items: flex-start;
     }
-`,m=l.default(o.Button.Small)`
+`,m=l.default(r.Button.Small)`
     width: 10rem;
 
-    ${n.V3_MediaQuery.MaxWidth.md} {
+    ${a.V3_MediaQuery.MaxWidth.md} {
         width: 100%;
     }
-`,g=l.default(i.Typography.BodyMD)`
-    color: ${n.V3_Colour["text-subtler"]};
-    margin-top: ${n.V3_Spacing["spacing-8"]};
+`,f=l.default(i.Typography.BodyMD)`
+    color: ${a.V3_Colour["text-subtler"]};
+    margin-top: ${a.V3_Spacing["spacing-8"]};
     width: 10rem;
     text-align: center;
-    ${n.V3_MediaQuery.MaxWidth.md} {
+    ${a.V3_MediaQuery.MaxWidth.md} {
         display: none;
         visibility: hidden;
     }
-`,f=l.default(e.Alert)`
-    margin-bottom: ${n.V3_Spacing["spacing-32"]};
-`;exports.Description=u,exports.DescriptionContainer=x,exports.ErrorAlert=f,exports.TextContainer=d,exports.Title=p,exports.TitleContainer=s,exports.UploadButton=m,exports.UploadButtonContainer=y,exports.UploadButtonText=g,exports.WarningAlert=c;
+`,y=l.default(e.Alert)`
+    margin-bottom: ${a.V3_Spacing["spacing-32"]};
+`;exports.Description=s,exports.DescriptionContainer=x,exports.ErrorAlert=y,exports.TextContainer=d,exports.Title=p,exports.TitleContainer=u,exports.UploadButton=m,exports.UploadButtonContainer=g,exports.UploadButtonText=f,exports.WarningAlert=c;
 //# sourceMappingURL=file-upload.styles.js.map

package/cjs/file-upload/file-upload.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-baseline\" })}\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled.div`\n    color: ${V3_Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const UploadButtonContainer = styled.div`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","V3_Spacing","Title","Typography","BodyBL","TitleContainer","V3_Colour","text","applyHtmlContentStyle","textSize","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","V3_MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"6TAWO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;;qBAGlBC,EAAAA,WAAW;WACrBA,EAAAA,WAAW;EAGTC,EAAQH,EAAAA,QAAOI,aAAWC,OAAO,GAEjCC,EAAiBN,EAAAA,QAAOC,GAAG;aAC3BM,EAAAA,UAAUC;MACjBC,wBAAsB,CAAEC,SAAU;EAG3BC,EAAcX,EAAAA,QAAOI,aAAWQ,OAAO;aACvCL,EAAAA,UAAU;EAGVM,EAAuBb,EAAAA,QAAOC,GAAG;aACjCM,EAAAA,UAAUC;MACjBC,wBAAsB,CAAEC,SAAU;EAG3BI,EAAed,EAAAA,QAAOe,EAAAA,MAAM;qBACpBb,EAAAA,WAAW;EAGnBc,EAAwBhB,EAAAA,QAAOC,GAAG;;;;;;MAMzCgB,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;MAG1CL,EAAAA,cAAcC,SAASC;;;EAKhBI,EAAmBvB,EAAAA,QAAOI,aAAWQ,OAAO;aAC5CL,EAAAA,UAAU;kBACLL,EAAAA,WAAW;;;MAGvBe,EAAAA,cAAcC,SAASC;;;;EAMhBK,EAAaxB,EAAAA,QAAOe,EAAAA,MAAM;qBAClBb,EAAAA,WAAW;"}
+{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled(Markup)`\n    color: ${V3_Colour.text};\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled(Markup)`\n    color: ${V3_Colour.text};\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n\nexport const UploadButtonContainer = styled.div`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${V3_MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-subtler\"]};\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${V3_MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${V3_Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","V3_Spacing","Title","Typography","BodyBL","TitleContainer","Markup","V3_Colour","text","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","V3_MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"0SAWO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;;qBAGlBC,EAAAA,WAAW;WACrBA,EAAAA,WAAW;EAGTC,EAAQH,EAAAA,QAAOI,aAAWC,OAAO,GAEjCC,EAAiBN,EAAAA,QAAOO,EAAAA,OAAO;aAC/BC,EAAAA,UAAUC;EAGVC,EAAcV,EAAAA,QAAOI,aAAWO,OAAO;aACvCH,EAAAA,UAAU;EAGVI,EAAuBZ,EAAAA,QAAOO,EAAAA,OAAO;aACrCC,EAAAA,UAAUC;EAGVI,EAAeb,EAAAA,QAAOc,EAAAA,MAAM;qBACpBZ,EAAAA,WAAW;EAGnBa,EAAwBf,EAAAA,QAAOC,GAAG;;;;;;MAMzCe,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAenB,EAAAA,QAAOoB,SAAOC,MAAM;;;MAG1CL,EAAAA,cAAcC,SAASC;;;EAKhBI,EAAmBtB,EAAAA,QAAOI,aAAWO,OAAO;aAC5CH,EAAAA,UAAU;kBACLN,EAAAA,WAAW;;;MAGvBc,EAAAA,cAAcC,SAASC;;;;EAMhBK,EAAavB,EAAAA,QAAOc,EAAAA,MAAM;qBAClBZ,EAAAA,WAAW;"}

package/cjs/file-upload/helper.js

@@ -1,2 +1,2 @@
-"use strict";exports.FileUploadHelper=class{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}};
+"use strict";class e{static formatFileSizeDisplay(e){if(!e||0===e)return"0 KB";const i=Math.floor(Math.log(e)/Math.log(1024));return`${Number(e/Math.pow(1024,i)).toFixed(0)} ${["B","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}`}static isSupportedImageType(e){return["image/avif","image/gif","image/jpeg","image/png","image/svg+xml","image/webp"].includes(e)}}e.PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",exports.FileUploadHelper=e;
 //# sourceMappingURL=helper.js.map

package/cjs/file-upload/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n}\n"],"names":["formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes"],"mappings":"4CAEW,4BAAOA,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC"}
+{"version":3,"file":"helper.js","sources":["../../../src/file-upload/helper.ts"],"sourcesContent":["export class FileUploadHelper {\n    public static readonly PDF_MIME_TYPE = \"application/pdf\";\n    public static readonly PDF_ICON_URL =\n        \"https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg\";\n\n    // Adapted from https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-size-to-kb-mb-gb-in-javascript\n    public static formatFileSizeDisplay(size?: number) {\n        if (!size || size === 0) return \"0 KB\";\n\n        const sizes = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n\n        const index: number = Math.floor(Math.log(size) / Math.log(1024));\n\n        const value = Number(size / Math.pow(1024, index)).toFixed(0);\n        const measurement = sizes[index];\n\n        return `${value} ${measurement}`;\n    }\n\n    public static isSupportedImageType(type: string): boolean {\n        /** Currently only images supported by html <img> */\n        const acceptedImageTypes = [\n            \"image/avif\",\n            \"image/gif\",\n            \"image/jpeg\",\n            \"image/png\",\n            \"image/svg+xml\",\n            \"image/webp\",\n        ];\n\n        return acceptedImageTypes.includes(type);\n    }\n}\n"],"names":["FileUploadHelper","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes","PDF_MIME_TYPE","PDF_ICON_URL"],"mappings":"mBAAaA,EAMF,4BAAOC,CAAsBC,GAChC,IAAKA,GAAiB,IAATA,EAAY,MAAO,OAEhC,MAEMC,EAAgBC,KAAKC,MAAMD,KAAKE,IAAIJ,GAAQE,KAAKE,IAAI,OAK3D,MAAO,GAHOC,OAAOL,EAAOE,KAAKI,IAAI,KAAML,IAAQM,QAAQ,MAJ7C,CAAC,IAAK,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAKpCN,IAG9B,CAEO,2BAAOO,CAAqBC,GAW/B,MAT2B,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD,EACvC,EA9BuBX,EAAAa,cAAgB,kBAChBb,EAAAc,aACnB"}

package/cjs/filter/filter-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@react-spring/web"),r=require("../external/lodash/isNil.js"),n=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),l=require("../form/form-label-addon.js"),d=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js");var o=require("./filter-context.js"),c=require("./filter-item.styles.js");const u=u=>{var h,{collapsible:m=!0,initialExpanded:x=!1,expanded:p,onExpandChange:j,minimisable:b=!1,minimisedHeight:v,showDivider:f=!0,showMobileDivider:g=!0,title:y,addon:q,children:$}=u,I=e.__rest(u,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children"]);const{mode:w,rootNode:M}=n.useContext(o.FilterContext),D="mobile"===w,[F,C]=n.useState(O()),[E,H]=n.useState(b),N=!D&&m,S=s.useResizeDetector(),V=s.useResizeDetector(),_=t.useSpring({height:F?S.height:0}),k=E?null!=v?v:Math.min(.5*(null!==(h=V.height)&&void 0!==h?h:0),216):V.height,z=n.useRef(a.SimpleIdGenerator.generate()),B=`${z.current}-content`,R=`${z.current}-title`;n.useEffect((()=>{C(O())}),[m,p]),n.useEffect((()=>{H(b)}),[b]);function O(){return!!D||(r.default(p)?!m||x:p)}return i.jsxs(c.FilterItemWrapper,{$isMobile:D,$collapsible:N,"aria-labelledby":R,children:[i.jsx(c.Divider,{$isMobile:D,$showDivider:f,$showMobileDivider:g}),(y||N)&&i.jsxs(c.FilterItemHeader,{$isMobile:D,children:[y&&i.jsxs(c.FilterItemTitle,{id:R,"data-testid":"filter-item-title",$isMobile:D,children:[y," ",q&&("popover"===(null==q?void 0:q.type)?i.jsx(l.PopoverAddon,{addon:q,rootNode:D?M:void 0}):null)]}),N&&i.jsxs(c.FilterItemExpandButton,{"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const e=!F;r.default(p)&&C(e),j&&j(e)},"aria-expanded":F,"aria-disabled":!N,"aria-controls":B,children:[y&&i.jsx(d.VisuallyHidden,{children:y}),i.jsx(c.ChevronIcon,{$expanded:F,"aria-hidden":!0})]})]}),i.jsx(c.ExpandableItem,{id:B,"data-testid":"expandable-container","data-expanded":F,style:_,inert:d.inertValue(!F),children:i.jsx("div",{ref:S.ref,children:i.jsxs(c.FilterItemBody,Object.assign({},I,{children:[i.jsx(c.MinimisableContent,{"data-testid":"minimisable-container",$height:k,$minimisable:b,children:i.jsx("div",{ref:V.ref,children:i.jsx("div",{"data-id":"content-container",children:"function"==typeof $?$(w,{minimised:E}):$})})}),b&&i.jsxs(c.FilterItemMinimiseButton,{"data-id":"minimise-button",styleType:"link",type:"button",onClick:()=>{H(!E)},children:[i.jsx(d.VisuallyHidden,{children:`view ${E?"more":"less"} in ${y}`}),i.jsxs("span",{"aria-hidden":!0,children:["View ",E?"more":"less"]})]})]}))})})]})};u.displayName="Filter.Item",exports.FilterItem=u;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@react-spring/web"),r=require("../external/lodash/isNil.js"),n=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),l=require("../form/form-label-addon.js"),d=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./filter-context.js"),c=require("./filter-item.styles.js");const u=u=>{var h,{collapsible:m=!0,initialExpanded:x=!1,expanded:p,onExpandChange:j,minimisable:b=!1,minimisedHeight:v,showDivider:f=!0,showMobileDivider:g=!0,title:q,addon:y,children:$}=u,I=e.__rest(u,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children"]);const{mode:w,rootNode:M}=n.useContext(o.FilterContext),D="mobile"===w,[F,C]=n.useState(R()),[E,H]=n.useState(b),N=!D&&m,V=s.useResizeDetector(),_=s.useResizeDetector(),k=t.useSpring({height:F?V.height:0}),z=E?null!=v?v:Math.min(.5*(null!==(h=_.height)&&void 0!==h?h:0),216):_.height,B=a.useId(),S=`${B}-content`,O=`${B}-title`;n.useEffect((()=>{C(R())}),[m,p]),n.useEffect((()=>{H(b)}),[b]);function R(){return!!D||(r.default(p)?!m||x:p)}return i.jsxs(c.FilterItemWrapper,{$isMobile:D,$collapsible:N,"aria-labelledby":O,children:[i.jsx(c.Divider,{$isMobile:D,$showDivider:f,$showMobileDivider:g}),(q||N)&&i.jsxs(c.FilterItemHeader,{$isMobile:D,children:[q&&i.jsxs(c.FilterItemTitle,{id:O,"data-testid":"filter-item-title",$isMobile:D,children:[q," ",y&&("popover"===(null==y?void 0:y.type)?i.jsx(l.PopoverAddon,{addon:y,rootNode:D?M:void 0}):null)]}),N&&i.jsxs(c.FilterItemExpandButton,{"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const e=!F;r.default(p)&&C(e),j&&j(e)},"aria-expanded":F,"aria-disabled":!N,"aria-controls":S,children:[q&&i.jsx(d.VisuallyHidden,{children:q}),i.jsx(c.ChevronIcon,{$expanded:F,"aria-hidden":!0})]})]}),i.jsx(c.ExpandableItem,{id:S,"data-testid":"expandable-container","data-expanded":F,style:k,inert:d.inertValue(!F),children:i.jsx("div",{ref:V.ref,children:i.jsxs(c.FilterItemBody,Object.assign({},I,{children:[i.jsx(c.MinimisableContent,{"data-testid":"minimisable-container",$height:z,$minimisable:b,children:i.jsx("div",{ref:_.ref,children:i.jsx("div",{"data-id":"content-container",children:"function"==typeof $?$(w,{minimised:E}):$})})}),b&&i.jsxs(c.FilterItemMinimiseButton,{"data-id":"minimise-button",styleType:"link",type:"button",onClick:()=>{H(!E)},children:[i.jsx(d.VisuallyHidden,{children:`view ${E?"more":"less"} in ${q}`}),i.jsxs("span",{"aria-hidden":!0,children:["View ",E?"more":"less"]})]})]}))})})]})};u.displayName="Filter.Item",exports.FilterItem=u;
 //# sourceMappingURL=filter-item.js.map

package/cjs/filter/filter-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item.js","sources":["../../../src/filter/filter-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    ChevronIcon,\n    Divider,\n    ExpandableItem,\n    FilterItemBody,\n    FilterItemExpandButton,\n    FilterItemHeader,\n    FilterItemMinimiseButton,\n    FilterItemTitle,\n    FilterItemWrapper,\n    MinimisableContent,\n} from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min((contentResizeDetector.height ?? 0) * 0.5, 216)\n        : contentResizeDetector.height;\n    const internalId = useRef(SimpleIdGenerator.generate());\n    const contentId = `${internalId.current}-content`;\n    const titleId = `${internalId.current}-title`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <FilterItemWrapper\n            $isMobile={isMobile}\n            $collapsible={collapsible}\n            aria-labelledby={titleId}\n        >\n            <Divider\n                $isMobile={isMobile}\n                $showDivider={showDivider}\n                $showMobileDivider={showMobileDivider}\n            />\n            {(title || collapsible) && (\n                <FilterItemHeader $isMobile={isMobile}>\n                    {title && (\n                        <FilterItemTitle\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            $isMobile={isMobile}\n                        >\n                            {title} {addon && renderAddon()}\n                        </FilterItemTitle>\n                    )}\n                    {collapsible && (\n                        <FilterItemExpandButton\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronIcon $expanded={expanded} aria-hidden />\n                        </FilterItemExpandButton>\n                    )}\n                </FilterItemHeader>\n            )}\n            <ExpandableItem\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <FilterItemBody {...otherProps}>\n                        <MinimisableContent\n                            data-testid=\"minimisable-container\"\n                            $height={contentHeight}\n                            $minimisable={minimisable}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </MinimisableContent>\n                        {minimisable && (\n                            <FilterItemMinimiseButton\n                                data-id=\"minimise-button\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </FilterItemMinimiseButton>\n                        )}\n                    </FilterItemBody>\n                </div>\n            </ExpandableItem>\n        </FilterItemWrapper>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useRef","SimpleIdGenerator","generate","contentId","current","titleId","useEffect","isNil","_jsxs","FilterItemWrapper","$isMobile","_jsx","Divider","$showDivider","$showMobileDivider","FilterItemHeader","FilterItemTitle","id","type","PopoverAddon","undefined","FilterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronIcon","$expanded","ExpandableItem","style","inert","inertValue","ref","FilterItemBody","Object","assign","MinimisableContent","$height","$minimisable","minimised","FilterItemMinimiseButton","styleType","displayName"],"mappings":"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"}
+{"version":3,"file":"filter-item.js","sources":["../../../src/filter/filter-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    ChevronIcon,\n    Divider,\n    ExpandableItem,\n    FilterItemBody,\n    FilterItemExpandButton,\n    FilterItemHeader,\n    FilterItemMinimiseButton,\n    FilterItemTitle,\n    FilterItemWrapper,\n    MinimisableContent,\n} from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min((contentResizeDetector.height ?? 0) * 0.5, 216)\n        : contentResizeDetector.height;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const titleId = `${internalId}-title`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <FilterItemWrapper\n            $isMobile={isMobile}\n            $collapsible={collapsible}\n            aria-labelledby={titleId}\n        >\n            <Divider\n                $isMobile={isMobile}\n                $showDivider={showDivider}\n                $showMobileDivider={showMobileDivider}\n            />\n            {(title || collapsible) && (\n                <FilterItemHeader $isMobile={isMobile}>\n                    {title && (\n                        <FilterItemTitle\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            $isMobile={isMobile}\n                        >\n                            {title} {addon && renderAddon()}\n                        </FilterItemTitle>\n                    )}\n                    {collapsible && (\n                        <FilterItemExpandButton\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronIcon $expanded={expanded} aria-hidden />\n                        </FilterItemExpandButton>\n                    )}\n                </FilterItemHeader>\n            )}\n            <ExpandableItem\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <FilterItemBody {...otherProps}>\n                        <MinimisableContent\n                            data-testid=\"minimisable-container\"\n                            $height={contentHeight}\n                            $minimisable={minimisable}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </MinimisableContent>\n                        {minimisable && (\n                            <FilterItemMinimiseButton\n                                data-id=\"minimise-button\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </FilterItemMinimiseButton>\n                        )}\n                    </FilterItemBody>\n                </div>\n            </ExpandableItem>\n        </FilterItemWrapper>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useId","contentId","titleId","useEffect","isNil","_jsxs","FilterItemWrapper","$isMobile","_jsx","Divider","$showDivider","$showMobileDivider","FilterItemHeader","FilterItemTitle","id","type","PopoverAddon","undefined","FilterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronIcon","$expanded","ExpandableItem","style","inert","inertValue","ref","FilterItemBody","Object","assign","MinimisableContent","$height","$minimisable","minimised","FilterItemMinimiseButton","styleType","displayName"],"mappings":"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"}

package/cjs/filter/filter-modal.styles.js

@@ -1,30 +1,30 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),o=require("../button-with-icon/button-with-icon.js"),i=require("../v3_theme/index.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=n(t);const a=r.default.div`
-    background-color: ${i.V3_Colour["bg-strong"]};
+"use strict";var t=require("styled-components"),e=require("../button/button.js"),o=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=i(t);const n=r.default.div`
+    background-color: ${o.V3_Colour["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,l=r.default.div`
-    background-color: ${i.V3_Colour.bg};
+`,a=r.default.div`
+    background-color: ${o.V3_Colour.bg};
     height: 100%;
     width: 100%;
-`,u=r.default.div`
+`,l=r.default.div`
     height: 100%;
 `,d=r.default.div`
     display: flex;
     align-items: center;
-    background-color: ${i.V3_Colour.bg};
+    background-color: ${o.V3_Colour.bg};
     ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,s=r.default.h2`
-    ${i.V3_Font["heading-xs-semibold"]}
+`,u=r.default.h2`
+    ${o.V3_Font["heading-xs-semibold"]}
     flex: 1;
     text-align: center;
-    margin: ${i.V3_Spacing["spacing-24"]} 0;
-`,c=r.default(e.Button.Small)`
+    margin: ${o.V3_Spacing["spacing-24"]} 0;
+`,p=r.default(e.Button.Small)`
     background-color: transparent;
     height: 100%;
-    padding: ${i.V3_Spacing["spacing-24"]} ${i.V3_Spacing["spacing-20"]};
-`,p=r.default(o.ButtonWithIcon.Default)`
+    padding: ${o.V3_Spacing["spacing-24"]} ${o.V3_Spacing["spacing-20"]};
+`,s=r.default(e.Button)`
     width: 100%;
-`;exports.FilterButton=p,exports.FilterClearButton=c,exports.FilterHeader=d,exports.FilterTitle=s,exports.FloatingWrapper=u,exports.MobileContainer=a,exports.MobileOverlayContainer=l;
+`;exports.FilterButton=s,exports.FilterClearButton=p,exports.FilterHeader=d,exports.FilterTitle=u,exports.FloatingWrapper=l,exports.MobileContainer=n,exports.MobileOverlayContainer=a;
 //# sourceMappingURL=filter-modal.styles.js.map

package/cjs/filter/filter-modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { V3_Colour, V3_Font, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${V3_Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${V3_Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","V3_Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","V3_Font","V3_Spacing","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"2PAiBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,UAAU;;;;;EAOrBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,UAAc;;;EAKzBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,UAAc;MAC/BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,QAAQ;;;cAGAC,EAAAA,WAAW;EAGZC,EAAoBZ,EAAAA,QAAOa,SAAOC,MAAM;;;eAGtCH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;EAOzCI,EAAef,EAAAA,QAAOgB,iBAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { V3_Colour, V3_Font, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${V3_Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${V3_Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(Button)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","V3_Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","V3_Font","V3_Spacing","FilterClearButton","Button","Small","FilterButton"],"mappings":"sMAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,UAAU;;;;;EAOrBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,UAAc;;;EAKzBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,UAAc;MAC/BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,QAAQ;;;cAGAC,EAAAA,WAAW;EAGZC,EAAoBZ,EAAAA,QAAOa,SAAOC,MAAM;;;eAGtCH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;EAOzCI,EAAef,EAAAA,QAAOa,EAAAA,OAAO;;"}