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

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"),i=require("./dropzone.js"),l=require("./file-list.js"),n=require("./file-upload.styles.js");exports.FileUpload=({styleType:o="bordered",fileItems:s,title:d,description:a,maxFiles:c,warning:u,className:p,name:x,id:h,"data-testid":j,accept:b,capture:m,multiple:f,disabled:g,sortable:y=!1,fileDescriptionMaxLength:v,editableFileItems:D=!1,descriptionRequired:q=!0,descriptionLabel:C,errorMessage:F,readOnly:I,customLabels:U,onChange:L,onDelete:B,onEdit:T,onSort:z})=>{const R={uploadButton:(null==U?void 0:U.uploadButtonLabel)||"Upload files"},w=t.useRef(null),A=t.useRef(null),[M,S]=t.useState(),E=()=>!(!c||!s)&&s.length>=c;return e.jsx(r.FileUploadContext.Provider,{value:{activeId:M,setActiveId:S},children:e.jsxs(i.FileUploadDropzone,{ref:w,onChange:e=>{var t;!g&&L&&(L(e),null===(t=A.current)||void 0===t||t.focus())},id:h?`${h}-dropzone`:"dropzone",accept:b,capture:m,border:"bordered"===o,className:p,"data-testid":j,name:x,multiple:f,disabled:g||E()||I,children:[!(!d&&!a)&&e.jsxs(n.TextContainer,{children:[d?"string"==typeof d?e.jsx(n.Title,{children:d}):e.jsx(n.TitleContainer,{children:d}):null,a?"string"==typeof a?e.jsx(n.Description,{children:a}):e.jsx(n.DescriptionContainer,{children:a}):null]}),!!u&&e.jsx(n.WarningAlert,{type:"warning",children:u}),e.jsx(l.FileList,{ref:A,fileItems:s,editableFileItems:D,descriptionRequired:q,descriptionLabel:C,fileDescriptionMaxLength:v,sortable:y,disabled:g,readOnly:I,onItemDelete:e=>{var t;B&&(B(e),null===(t=A.current)||void 0===t||t.focus())},onItemUpdate:e=>{T&&T(e)},onSort:e=>{z&&z(e)}}),F&&e.jsx(n.ErrorAlert,{type:"error",children:F}),!I&&e.jsxs(n.UploadButtonContainer,{children:[e.jsx(n.UploadButton,{type:"button",styleType:"secondary",disabled:!!M||g||E(),onClick:e=>{g||(e.preventDefault(),w.current&&w.current.openFileDialog())},children:R.uploadButton}),e.jsx(n.UploadButtonText,{weight:"semibold",children:"or drop them here"})]})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("../alert/alert.js"),l=require("../button/button.js"),i=require("../markup/markup.js"),s=require("../typography/index.js"),a=require("./context.js"),n=require("./dropzone.js"),o=require("./file-list/file-list.js"),d=require("./file-upload.styles.js");exports.FileUpload=({styleType:u="bordered",fileItems:c,title:p,description:m,maxFiles:h,warning:y,className:x,name:b,id:j,"data-testid":g,accept:f,capture:v,multiple:q,disabled:B,sortable:N=!1,fileDescriptionMaxLength:D,editableFileItems:T=!1,descriptionRequired:C=!0,descriptionLabel:F,errorMessage:I,readOnly:L,customLabels:M,onChange:k,onDelete:z,onEdit:A,onSort:S})=>{const U={uploadButton:(null==M?void 0:M.uploadButtonLabel)||"Upload files"},w=r.useRef(null),R=r.useRef(null),[O,E]=r.useState(),P=e=>{var r;if(void 0===h)return e;const t=null!==(r=null==c?void 0:c.length)&&void 0!==r?r:0,l=Math.max(h-t,0);return e.slice(0,l)},$=()=>!(!h||!c)&&c.length>=h;return e.jsx(a.FileUploadContext.Provider,{value:{activeId:O,setActiveId:E},children:e.jsxs(n.FileUploadDropzone,{ref:w,onChange:e=>{var r;const t=P(e);!B&&k&&t.length>0&&(k(t),null===(r=R.current)||void 0===r||r.focus())},id:j?`${j}-dropzone`:"dropzone",accept:f,capture:v,border:"bordered"===u,className:x,"data-testid":g,name:b,multiple:q,disabled:B||$()||L,children:[!(!p&&!m)&&e.jsxs("div",{className:d.textContainer,children:[p?"string"==typeof p?e.jsx(s.Typography.BodyBL,{children:p}):e.jsx(i.Markup,{className:d.markupContainer,baseTextSize:"body-baseline",children:p}):null,m?"string"==typeof m?e.jsx(s.Typography.BodyMD,{className:d.description,children:m}):e.jsx(i.Markup,{className:d.markupContainer,baseTextSize:"body-md",children:m}):null]}),!!y&&e.jsx(t.Alert,{className:d.warningAlert,type:"warning",children:y}),e.jsx(o.FileList,{ref:R,fileItems:c,editableFileItems:T,descriptionRequired:C,descriptionLabel:F,fileDescriptionMaxLength:D,sortable:N,disabled:B,readOnly:L,onItemDelete:e=>{var r;z&&(z(e),null===(r=R.current)||void 0===r||r.focus())},onItemUpdate:e=>{A&&A(e)},onSort:e=>{S&&S(e)}}),I&&e.jsx(t.Alert,{className:d.errorAlert,type:"error",children:I}),!L&&e.jsxs("div",{className:d.uploadButtonContainer,children:[e.jsx(l.Button,{type:"button",sizeType:"small",styleType:"secondary",disabled:!!O||B||$(),onClick:e=>{B||(e.preventDefault(),w.current&&w.current.openFileDialog())},className:d.uploadButton,children:U.uploadButton}),e.jsx(s.Typography.BodyMD,{className:d.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\";\nimport { FileUploadContext } from \"./context\";\nimport { DropzoneElement, FileUploadDropzone } from \"./dropzone\";\nimport { FileList, FileListRef } 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 { 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    descriptionRequired = true,\n    descriptionLabel,\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                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\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","descriptionRequired","descriptionLabel","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":"4MAkB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,uBAAsB,EACtBC,mBACAC,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,OACb/B,IAAYH,IAAYA,EAAUmC,QAAUhC,EA8BvD,OACIiC,EAAAA,IAACC,EAAAA,kBAAkBC,UAASC,MAAO,CAAER,WAAUC,eAAaQ,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKf,EACLP,SA3EUuB,WACbhC,GAAYS,IACbA,EAASuB,GACU,QAAnBC,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EAwEQxC,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACTsC,OAAsB,aAAdjD,EACRM,UAAWA,gBACEG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYsB,KAAqBf,EAAQqB,SAAA,IAE/CvC,IAASC,IACTuC,EAAAA,KAACQ,EAAAA,cAAa,CAAAT,SAAA,CAvCrBvC,EAIgB,iBAAVA,EACAmC,EAAAA,IAACc,EAAAA,MAAK,CAAAV,SAAEvC,IAGZmC,EAAAA,IAACe,EAAAA,eAAc,CAAAX,SAAEvC,IAPb,KAWNC,EAIsB,iBAAhBA,EACAkC,EAAAA,IAACgB,EAAAA,YAAW,CAAAZ,SAAEtC,IAGlBkC,EAAAA,IAACiB,EAAAA,qBAAoB,CAAAb,SAAEtC,IAPnB,UA+BAE,GACCgC,MAACkB,EAAAA,aAAY,CAACC,KAAK,UAASf,SAAEpC,IAElCgC,EAAAA,IAACoB,YACGb,IAAKb,EACL9B,UAAWA,EACXe,kBAAmBA,EACnBC,oBAAqBA,EACrBC,iBAAkBA,EAClBH,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVO,SAAUA,EACVsC,aAlGUC,UAClBpC,IACAA,EAASoC,GACU,QAAnBb,EAAAf,EAAYgB,eAAO,IAAAD,GAAAA,EAAEE,QACzB,EA+FYY,aAjFUC,IAClBrC,GACAA,EAAOqC,EACX,EA+EYpC,OA5EIqC,IACZrC,GACAA,EAAOqC,EACX,IA2ES3C,GACGkB,EAAAA,IAAC0B,EAAAA,WAAU,CAACP,KAAK,QAAOf,SAAEtB,KAE5BC,GACEsB,EAAAA,KAACsB,EAAAA,sBAAqB,CAAAvB,SAAA,CAClBJ,EAAAA,IAAC4B,EAAAA,aAAY,CACTT,KAAK,SACLxD,UAAU,YACVa,WACMmB,GAAYnB,GAAYsB,IAE9B+B,QAzGpBC,IAEKtD,IACDsD,EAAMC,iBACFvC,EAAYkB,SACZlB,EAAYkB,QAAQsB,iBAE5B,EAkGoD5B,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 { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { Typography } from \"../typography\";\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 * as styles from \"./file-upload.styles\";\nimport type { FileItemProps, FileUploadProps } from \"./types\";\n\n// @catalog\n/**\n * Allows user to upload images via drag-and-drop or a native file dialog.\n * @keywords attachment, file, upload\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    descriptionRequired = true,\n    descriptionLabel,\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        const filesToProcess = limitIncomingFiles(files);\n\n        if (!disabled && onChange && filesToProcess.length > 0) {\n            onChange(filesToProcess);\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 limitIncomingFiles = (files: File[]) => {\n        if (maxFiles === undefined) {\n            return files;\n        }\n\n        const existingItemsCount = fileItems?.length ?? 0;\n        const remainingSlots = Math.max(maxFiles - existingItemsCount, 0);\n\n        return files.slice(0, remainingSlots);\n    };\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 <Typography.BodyBL>{title}</Typography.BodyBL>;\n        }\n\n        return (\n            <Markup\n                className={styles.markupContainer}\n                baseTextSize=\"body-baseline\"\n            >\n                {title}\n            </Markup>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) {\n            return null;\n        }\n\n        if (typeof description === \"string\") {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {description}\n                </Typography.BodyMD>\n            );\n        }\n\n        return (\n            <Markup className={styles.markupContainer} baseTextSize=\"body-md\">\n                {description}\n            </Markup>\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                    <div className={styles.textContainer}>\n                        {renderTitle()}\n                        {renderDescription()}\n                    </div>\n                )}\n                {!!warning && (\n                    <Alert className={styles.warningAlert} type=\"warning\">\n                        {warning}\n                    </Alert>\n                )}\n                <FileList\n                    ref={fileListRef}\n                    fileItems={fileItems}\n                    editableFileItems={editableFileItems}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\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                    <Alert className={styles.errorAlert} type=\"error\">\n                        {errorMessage}\n                    </Alert>\n                )}\n                {!readOnly && (\n                    <div className={styles.uploadButtonContainer}>\n                        <Button\n                            type=\"button\"\n                            sizeType=\"small\"\n                            styleType=\"secondary\"\n                            disabled={\n                                !!activeId || disabled || reachedMaxFiles()\n                            }\n                            onClick={handleUploadButtonClick}\n                            className={styles.uploadButton}\n                        >\n                            {labels.uploadButton}\n                        </Button>\n                        <Typography.BodyMD\n                            className={styles.uploadButtonText}\n                            weight=\"semibold\"\n                        >\n                            or drop them here\n                        </Typography.BodyMD>\n                    </div>\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","descriptionRequired","descriptionLabel","errorMessage","readOnly","customLabels","onChange","onDelete","onEdit","onSort","labels","uploadButton","uploadButtonLabel","dropzoneRef","useRef","fileListRef","activeId","setActiveId","useState","limitIncomingFiles","files","undefined","existingItemsCount","_a","length","remainingSlots","Math","max","slice","reachedMaxFiles","_jsx","FileUploadContext","Provider","value","children","_jsxs","FileUploadDropzone","ref","filesToProcess","current","focus","border","styles.textContainer","Typography","BodyBL","Markup","styles.markupContainer","baseTextSize","BodyMD","styles.description","Alert","styles.warningAlert","type","FileList","onItemDelete","item","onItemUpdate","updatedItem","updatedItems","styles.errorAlert","styles.uploadButtonContainer","Button","sizeType","onClick","event","preventDefault","openFileDialog","styles.uploadButton","styles.uploadButtonText","weight"],"mappings":"2VAmB0B,EACtBA,YAAY,WACZC,YACAC,QACAC,cACAC,WACAC,UACAC,YACAC,OACAC,KACA,cAAeC,EACfC,SACAC,UACAC,WACAC,WACAC,YAAW,EACXC,2BACAC,qBAAoB,EACpBC,uBAAsB,EACtBC,mBACAC,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,aA+C1BC,EAAsBC,UACxB,QAAiBC,IAAbjC,EACA,OAAOgC,EAGX,MAAME,EAAsC,QAAjBC,EAAAtC,aAAS,EAATA,EAAWuC,cAAM,IAAAD,EAAAA,EAAI,EAC1CE,EAAiBC,KAAKC,IAAIvC,EAAWkC,EAAoB,GAE/D,OAAOF,EAAMQ,MAAM,EAAGH,EAAe,EAGnCI,EAAkB,OACbzC,IAAYH,IAAYA,EAAUuC,QAAUpC,EA6CvD,OACI0C,EAAAA,IAACC,EAAAA,kBAAkBC,SAAQ,CAACC,MAAO,CAAEjB,WAAUC,eAAaiB,SACxDC,EAAAA,KAACC,EAAAA,mBAAkB,CACfC,IAAKxB,EACLP,SAvGUc,UAClB,MAAMkB,EAAiBnB,EAAmBC,IAErCvB,GAAYS,GAAYgC,EAAed,OAAS,IACjDlB,EAASgC,GACU,QAAnBf,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EAkGQhD,GAAIA,EAAK,GAAGA,aAAgB,WAC5BE,OAAQA,EACRC,QAASA,EACT8C,OAAsB,aAAdzD,EACRM,UAAWA,EAAS,cACPG,EACbF,KAAMA,EACNK,SAAUA,EACVC,SAAUA,GAAYgC,KAAqBzB,EAAQ8B,SAAA,IAE/ChD,IAASC,IACTgD,EAAAA,KAAA,MAAA,CAAK7C,UAAWoD,EAAAA,cAAoBR,SAAA,CAtD3ChD,EAIgB,iBAAVA,EACA4C,EAAAA,IAACa,EAAAA,WAAWC,OAAM,CAAAV,SAAEhD,IAI3B4C,EAAAA,IAACe,SAAM,CACHvD,UAAWwD,EAAAA,gBACXC,aAAa,yBAEZ7D,IAZE,KAkBNC,EAIsB,iBAAhBA,EAEH2C,EAAAA,IAACa,EAAAA,WAAWK,OAAM,CAAC1D,UAAW2D,cAAkBf,SAC3C/C,IAMT2C,EAAAA,IAACe,SAAM,CAACvD,UAAWwD,EAAAA,gBAAwBC,aAAa,mBACnD5D,IAbE,UAuCAE,GACCyC,EAAAA,IAACoB,EAAAA,MAAK,CAAC5D,UAAW6D,EAAAA,aAAqBC,KAAK,UAASlB,SAChD7C,IAGTyC,EAAAA,IAACuB,EAAAA,SAAQ,CACLhB,IAAKtB,EACL9B,UAAWA,EACXe,kBAAmBA,EACnBC,oBAAqBA,EACrBC,iBAAkBA,EAClBH,yBAA0BA,EAC1BD,SAAUA,EACVD,SAAUA,EACVO,SAAUA,EACVkD,aA9HUC,UAClBhD,IACAA,EAASgD,GACU,QAAnBhC,EAAAR,EAAYwB,eAAO,IAAAhB,GAAAA,EAAEiB,QACzB,EA2HYgB,aA7GUC,IAClBjD,GACAA,EAAOiD,EACX,EA2GYhD,OAxGIiD,IACZjD,GACAA,EAAOiD,EACX,IAuGSvD,GACG2B,EAAAA,IAACoB,EAAAA,MAAK,CAAC5D,UAAWqE,EAAAA,WAAmBP,KAAK,QAAOlB,SAC5C/B,KAGPC,GACE+B,EAAAA,KAAA,MAAA,CAAK7C,UAAWsE,EAAAA,sBAA4B1B,SAAA,CACxCJ,EAAAA,IAAC+B,EAAAA,OAAM,CACHT,KAAK,SACLU,SAAS,QACT9E,UAAU,YACVa,WACMmB,GAAYnB,GAAYgC,IAE9BkC,QAxIpBC,IAEKnE,IACDmE,EAAMC,iBACFpD,EAAY0B,SACZ1B,EAAY0B,QAAQ2B,iBAE5B,EAkIoB5E,UAAW6E,EAAAA,aAAmBjC,SAE7BxB,EAAOC,eAEZmB,EAAAA,IAACa,aAAWK,OAAM,CACd1D,UAAW8E,EAAAA,iBACXC,OAAO,WAAUnC,SAAA,6BAOR"}

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

@@ -1,43 +1,2 @@
-"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("../theme/index.js"),a=require("../typography/typography.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: ${i.Spacing["spacing-32"]};
-    gap: ${i.Spacing["spacing-8"]};
-`,p=l.default(a.Typography.BodyBL)``,s=l.default.div`
-    color: ${i.Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-baseline"})}
-`,u=l.default(a.Typography.BodyMD)`
-    color: ${i.Colour["text-subtler"]};
-`,x=l.default.div`
-    color: ${i.Colour.text};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
-`,c=l.default(e.Alert)`
-    margin-bottom: ${i.Spacing["spacing-32"]};
-`,y=l.default.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    ${i.MediaQuery.MaxWidth.md} {
-        align-items: flex-start;
-    }
-`,g=l.default(o.Button.Small)`
-    width: 10rem;
-
-    ${i.MediaQuery.MaxWidth.md} {
-        width: 100%;
-    }
-`,m=l.default(a.Typography.BodyMD)`
-    color: ${i.Colour["text-subtler"]};
-    margin-top: ${i.Spacing["spacing-8"]};
-    width: 10rem;
-    text-align: center;
-    ${i.MediaQuery.MaxWidth.md} {
-        display: none;
-        visibility: hidden;
-    }
-`,f=l.default(e.Alert)`
-    margin-bottom: ${i.Spacing["spacing-32"]};
-`;exports.Description=u,exports.DescriptionContainer=x,exports.ErrorAlert=f,exports.TextContainer=d,exports.Title=p,exports.TitleContainer=s,exports.UploadButton=g,exports.UploadButtonContainer=y,exports.UploadButtonText=m,exports.WarningAlert=c;
+"use strict";require("./file-upload.styles_9ffwcd.css");exports.description="dhybrj2",exports.errorAlert="emjmrml",exports.markupContainer="m7vp3hf",exports.textContainer="t9vodht",exports.uploadButton="u7dp799",exports.uploadButtonContainer="u723luu",exports.uploadButtonText="u1rz06ff",exports.warningAlert="wq1el8u";
 //# 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\";\nimport { Alert } from \"../alert\";\nimport { Button } from \"../button\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TextContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const Title = styled(Typography.BodyBL)``;\n\nexport const TitleContainer = styled.div`\n    color: ${Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-baseline\" })}\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const DescriptionContainer = styled.div`\n    color: ${Colour.text};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n`;\n\nexport const WarningAlert = styled(Alert)`\n    margin-bottom: ${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    ${MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const UploadButton = styled(Button.Small)`\n    width: 10rem;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const UploadButtonText = styled(Typography.BodyMD)`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const ErrorAlert = styled(Alert)`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n"],"names":["TextContainer","styled","div","Spacing","Title","Typography","BodyBL","TitleContainer","Colour","text","applyHtmlContentStyle","textSize","Description","BodyMD","DescriptionContainer","WarningAlert","Alert","UploadButtonContainer","MediaQuery","MaxWidth","md","UploadButton","Button","Small","UploadButtonText","ErrorAlert"],"mappings":"+TAUO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;;qBAGlBC,EAAAA,QAAQ;WAClBA,EAAAA,QAAQ;EAGNC,EAAQH,EAAAA,QAAOI,aAAWC,OAAO,GAEjCC,EAAiBN,EAAAA,QAAOC,GAAG;aAC3BM,EAAAA,OAAOC;MACdC,wBAAsB,CAAEC,SAAU;EAG3BC,EAAcX,EAAAA,QAAOI,aAAWQ,OAAO;aACvCL,EAAAA,OAAO;EAGPM,EAAuBb,EAAAA,QAAOC,GAAG;aACjCM,EAAAA,OAAOC;MACdC,wBAAsB,CAAEC,SAAU;EAG3BI,EAAed,EAAAA,QAAOe,EAAAA,MAAM;qBACpBb,EAAAA,QAAQ;EAGhBc,EAAwBhB,EAAAA,QAAOC,GAAG;;;;;;MAMzCgB,EAAAA,WAAWC,SAASC;;;EAKbC,EAAepB,EAAAA,QAAOqB,SAAOC,MAAM;;;MAG1CL,EAAAA,WAAWC,SAASC;;;EAKbI,EAAmBvB,EAAAA,QAAOI,aAAWQ,OAAO;aAC5CL,EAAAA,OAAO;kBACFL,EAAAA,QAAQ;;;MAGpBe,EAAAA,WAAWC,SAASC;;;;EAMbK,EAAaxB,EAAAA,QAAOe,EAAAA,MAAM;qBAClBb,EAAAA,QAAQ;"}
+{"version":3,"file":"file-upload.styles.js","sources":["../../../src/file-upload/file-upload.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../theme\";\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const markupContainer = css`\n    color: ${Colour.text};\n`;\n\nexport const description = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const warningAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const uploadButtonContainer = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n\n    ${MediaQuery.MaxWidth.md} {\n        align-items: flex-start;\n    }\n`;\n\nexport const uploadButton = css`\n    width: 10rem;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 100%;\n    }\n`;\n\nexport const uploadButtonText = css`\n    color: ${Colour[\"text-subtler\"]};\n    margin-top: ${Spacing[\"spacing-8\"]};\n    width: 10rem;\n    text-align: center;\n\n    ${MediaQuery.MaxWidth.md} {\n        display: none;\n        visibility: hidden;\n    }\n`;\n\nexport const errorAlert = css`\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n"],"names":[],"mappings":"uGAewB,6BAuCD,kCA3CK,gCAPF,+BA8BD,wCAXS,mCAmBL,gCAvBJ"}

package/cjs/file-upload/file-upload.styles_9ffwcd.css

@@ -0,0 +1,8 @@
+@layer fds{.t9vodht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:var(--fds-spacing-32);gap:var(--fds-spacing-8);}
+.m7vp3hf{color:var(--fds-colour-text);}
+.dhybrj2{color:var(--fds-colour-text-subtler);}
+.wq1el8u{margin-bottom:var(--fds-spacing-32);}
+.u723luu{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}:where(body.fds-breakpoint-md-max) .u723luu{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}
+.u7dp799{width:10rem;}:where(body.fds-breakpoint-md-max) .u7dp799{width:100%;}
+.u1rz06ff{color:var(--fds-colour-text-subtler);margin-top:var(--fds-spacing-8);width:10rem;text-align:center;}:where(body.fds-breakpoint-md-max) .u1rz06ff{display:none;visibility:hidden;}
+.emjmrml{margin-bottom:var(--fds-spacing-32);}}

package/cjs/file-upload/helper.js

@@ -1,2 +1,2 @@
-"use strict";var e;exports.FileUploadHelper=void 0,(e=exports.FileUploadHelper||(exports.FileUploadHelper={})).PDF_MIME_TYPE="application/pdf",e.PDF_ICON_URL="https://assets.life.gov.sg/react-design-system/img/upload/pdf.svg",e.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]}`},e.isSupportedImageType=e=>["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 namespace FileUploadHelper {\n    export const PDF_MIME_TYPE = \"application/pdf\";\n    export const 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    export const 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    export const isSupportedImageType = (type: string) => {\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","PDF_MIME_TYPE","PDF_ICON_URL","formatFileSizeDisplay","size","index","Math","floor","log","Number","pow","toFixed","isSupportedImageType","type","includes"],"mappings":"aAAA,IAAiBA,EAAAA,QAAAA,sBAAAA,GAAAA,EAAAA,QAAAA,mBAAAA,yBAAgB,CAAA,IAChBC,cAAgB,kBAChBD,EAAAE,aACT,oEAGSF,EAAAG,sBAAyBC,IAClC,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,IAEM,EAGvBL,EAAAY,qBAAwBC,GAEN,CACvB,aACA,YACA,aACA,YACA,gBACA,cAGsBC,SAASD"}
+{"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/addons/filter-item-checkbox-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import { FilterItemCheckboxOptionProps } from \"../types\";\nimport { FlattenedFilterOption } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : (option as any).label;\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","flattenedOptions","children","parentIndex","findIndex","i","filter","map","optionsExtractor","some"],"mappings":"aAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAsC9C,OApCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GACdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GACdA,EAAeG,MAChBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,yFAkB3B,CACpCE,EACAtB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnCuB,EAAgB,GAEhBC,EAAcF,EAAiBG,WAChCpB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBI,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIJ,EAAiBX,OAAQe,IAAK,CAC5D,MAAMrB,EAASiB,EAAiBI,GAGhC,IAAIR,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRa,EAASX,KAAKP,EAAOQ,aAMjC,CAEA,OAAOU,CAAQ,mCAzCqB,CACpCD,EACAtB,IAEOsB,EACFK,QAAQtB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjDgC,KAAKvB,GAAWA,EAAOT,mCAyCA,CAC5Ba,EACAoB,IAEOpB,EAAQqB,MAAMzB,IACjB,MAAMN,EAAuB8B,EACvBA,EAAiBxB,GAChBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}
+{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import type { FlattenedFilterOption } from \"./internal-types\";\nimport type { FilterItemCheckboxOptionProps } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).label;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","flattenedOptions","children","parentIndex","findIndex","i","filter","map","optionsExtractor","some"],"mappings":"aAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAyC9C,OAvCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GAEdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GAEdA,EAAeG,MAEhBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,yFAkB3B,CACpCE,EACAtB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnCuB,EAAgB,GAEhBC,EAAcF,EAAiBG,WAChCpB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBI,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIJ,EAAiBX,OAAQe,IAAK,CAC5D,MAAMrB,EAASiB,EAAiBI,GAGhC,IAAIR,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRa,EAASX,KAAKP,EAAOQ,aAMjC,CAEA,OAAOU,CAAQ,mCAzCqB,CACpCD,EACAtB,IAEOsB,EACFK,QAAQtB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjDgC,KAAKvB,GAAWA,EAAOT,mCAyCA,CAC5Ba,EACAoB,IAEOpB,EAAQqB,MAAMzB,IAEjB,MAAMN,EAAuB8B,EACvBA,EAAiBxB,GAEhBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}

package/cjs/filter/addons/filter-item-checkbox.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../filter-context.js"),r=require("./filter-item-checkbox-helpers.js"),s=require("./filter-item-checkbox.styles.js");const o=o=>{var{selectedOptions:a,options:c,showAsCheckboxInMobile:d=!1,minimisableOptions:h=!0,onSelect:u,labelExtractor:m,valueExtractor:g,useToggleContentWidth:b}=o,f=e.__rest(o,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:v}=l.useContext(n.FilterContext),[p,x]=l.useState(a||[]),[k,y]=l.useState(),[C,S]=l.useState(c.length),j=l.useRef(null),I=l.useRef(null),O=l.useMemo((()=>r.hasNestedOptions(c,(e=>e.options))),[c]),P="mobile"===v&&!d&&!O,E=l.useMemo((()=>r.flattenNestedOptions(c,[],g||(e=>e.value),m||(e=>e.label))),[c,g,m]),M=E.length,q=e=>()=>{const t=E.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=r.getAllDescendantChildren(E,t.keyPath),l=e.filter((e=>p.some((t=>F(t)===F(e)))));let i=[...p];l.length===e.length?i=i.filter((t=>!e.some((e=>F(e)===F(t))))):e.forEach((e=>{i.some((t=>F(t)===F(e)))||i.push(e)})),x(i),null==u||u(i)}else{const t=[...p],l=p.findIndex((t=>F(t)===F(e)));l>=0?t.splice(l,1):t.push(e),x(t),null==u||u(t)}},T=()=>{if(O)if(p.length>0)x([]),null==u||u([]);else{const e=E.filter((e=>!e.hasChildren)).map((e=>e.originalItem));x(e),null==u||u(e)}else{const e=p.length?[]:c;x(e),null==u||u(e)}},z=e=>t=>{!O||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),q(e)())},A=e=>()=>{O||q(e)()},$=e=>{if(!e.hasChildren)return{checked:p.some((t=>F(t)===F(e.originalItem))),indeterminate:!1};const t=r.getAllDescendantKeyPaths(E,e.keyPath).map((e=>E.find((t=>r.buildKeyPath(t.keyPath)===r.buildKeyPath(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),l=t.filter((e=>p.some((t=>F(t)===F(e)))));return{checked:l.length===t.length&&t.length>0,indeterminate:l.length>0&&l.length<t.length}},D=e=>{var t;return m?m(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},F=e=>{var t;return g?g(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},K=()=>{const e=I.current?I.current.offsetTop+I.current.clientHeight:void 0;y(e)},R=l.useCallback((()=>{if(!j.current)return void y(void 0);const e=Array.from(j.current.children);let t=0,l=0,i=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>i&&(l++,i=r,l>2))break;t=n}S(t),y(l>2?i-8:void 0)}),[]);l.useEffect((()=>{a!==p&&x(a||[])}),[a]),l.useEffect((()=>{P?R():K()}),[c]),i.useResizeDetector({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:j,onResize:P?R:K});const W=(e,l)=>{const{checked:i,indeterminate:n}=$(l);return t.jsx(s.StyledCheckbox,{displaySize:"small",checked:i,indeterminate:n,onChange:A(e),tabIndex:O?-1:void 0,"aria-hidden":O?"true":void 0})},_=()=>{var e;return M<3?null:t.jsx(s.SelectAllButton,{styleType:"link",type:"button",onClick:T,"aria-label":p.length?"Clear all selections":`Select all in ${(null===(e=j.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:p.length?"Clear all":"Select all"})};return t.jsx(s.StyledFilterItem,Object.assign({minimisable:!!h&&(P?!!k:M>5),minimisedHeight:k},f,{children:(e,{minimised:l})=>t.jsxs(t.Fragment,{children:[_(),t.jsx(s.Group,{role:O?"tree":"group","aria-label":f.title,"aria-multiselectable":!0,ref:j,$isMobileToggleMode:P,children:E.map(((e,i)=>P?((e,l,i)=>{const n=e.originalItem,r=D(n),o=F(n),a=!!p.find((e=>F(e)===o));return t.jsx(s.StyledToggle,{type:"checkbox",checked:a,$visible:!i||!!k&&l<=C,onChange:q(n),useContentWidth:b,children:r},o)})(e,i,l):((e,l,i)=>{const n=e.originalItem,o=D(n),{checked:a,indeterminate:c}=$(e),d=a||c,h=!i||l<5,u=O?{"aria-checked":c?"mixed":a,"aria-selected":!!a,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{};return t.jsxs(s.Item,Object.assign({as:O?"div":"label",role:O?"treeitem":void 0},u,{onClick:O?q(n):void 0,onKeyDown:z(n),tabIndex:O?0:void 0,$visible:h,$selected:d,$level:e.level,ref:4===l?I:void 0,children:[W(n,e),o]}),r.buildKeyPath(e.keyPath))})(e,i,l)))})]})}))};o.displayName="Filter.Checkbox",exports.FilterItemCheckbox=o;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("clsx"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),r=require("../../button/button.js"),s=require("../../checkbox/checkbox.js"),a=require("../../toggle/toggle.js"),o=require("../filter-context.js"),c=require("../filter-item.js"),u=require("./filter-item-checkbox.styles.js"),d=require("./filter-item-checkbox-helpers.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(l);const g=l=>{var{selectedOptions:h,options:g,showAsCheckboxInMobile:f=!1,minimisableOptions:b=!0,onSelect:x,labelExtractor:p,valueExtractor:k,useToggleContentWidth:v}=l,y=e.__rest(l,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:j}=i.useContext(o.FilterContext),[C,I]=i.useState(h||[]),[S,q]=i.useState(),[P,N]=i.useState(g.length),O=i.useRef(null),E=i.useRef(null),M=i.useMemo((()=>d.hasNestedOptions(g,(e=>e.options))),[g]),T="mobile"===j&&!f&&!M,z=i.useMemo((()=>d.flattenNestedOptions(g,[],k||(e=>e.value),p||(e=>e.label))),[g,k,p]),K=z.length,A=e=>()=>{const t=z.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=d.getAllDescendantChildren(z,t.keyPath),l=e.filter((e=>C.some((t=>W(t)===W(e)))));let i=[...C];l.length===e.length?i=i.filter((t=>!e.some((e=>W(e)===W(t))))):e.forEach((e=>{i.some((t=>W(t)===W(e)))||i.push(e)})),I(i),null==x||x(i)}else{const t=[...C],l=C.findIndex((t=>W(t)===W(e)));l>=0?t.splice(l,1):t.push(e),I(t),null==x||x(t)}},D=()=>{if(M)if(C.length>0)I([]),null==x||x([]);else{const e=z.filter((e=>!e.hasChildren)).map((e=>e.originalItem));I(e),null==x||x(e)}else{const e=C.length?[]:g;I(e),null==x||x(e)}},F=e=>t=>{!M||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),A(e)())},H=e=>()=>{M||A(e)()},R=e=>{if(!e.hasChildren)return{checked:C.some((t=>W(t)===W(e.originalItem))),indeterminate:!1};const t=d.getAllDescendantKeyPaths(z,e.keyPath).map((e=>z.find((t=>d.buildKeyPath(t.keyPath)===d.buildKeyPath(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),l=t.filter((e=>C.some((t=>W(t)===W(e)))));return{checked:l.length===t.length&&t.length>0,indeterminate:l.length>0&&l.length<t.length}},w=e=>{var t;return p?p(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},W=e=>{var t;return k?k(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},_=()=>{const e=E.current?E.current.offsetTop+E.current.clientHeight:void 0;q(e)},B=i.useCallback((()=>{if(!O.current)return void q(void 0);const e=Array.from(O.current.children);let t=0,l=0,i=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>i&&(l++,i=r,l>2))break;t=n}N(t),q(l>2?i-8:void 0)}),[]);i.useEffect((()=>{h!==C&&I(h||[])}),[h]),i.useEffect((()=>{T?B():_()}),[g]),n.useResizeDetector({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:O,onResize:T?B:_});const L=(e,l)=>{const{checked:i,indeterminate:n}=R(l);return t.jsx(s.Checkbox,{className:u.checkbox,displaySize:"small",checked:i,indeterminate:n,onChange:H(e),tabIndex:M?-1:void 0,"aria-hidden":M?"true":void 0})},$=()=>{var e;return K<3?null:t.jsx(r.Button,{className:u.selectAllButton,styleType:"link",type:"button",sizeType:"small",onClick:D,"aria-label":C.length?"Clear all selections":`Select all in ${(null===(e=O.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:C.length?"Clear all":"Select all"})};return t.jsx(c.FilterItem,Object.assign({minimisable:!!b&&(T?!!S:K>5),minimisedHeight:S},y,{className:m.default(u.filterItem,y.className),children:(e,{minimised:l})=>t.jsxs(t.Fragment,{children:[$(),t.jsx("div",{role:M?"tree":"group","aria-label":y.title,"aria-multiselectable":!0,ref:O,className:m.default(u.group,T&&u.groupMobileToggleMode),children:z.map(((e,i)=>T?((e,l,i)=>{const n=e.originalItem,r=w(n),s=W(n),o=!!C.find((e=>W(e)===s)),c=!i||!!S&&l<=P;return t.jsx(a.Toggle,{type:"checkbox",checked:o,className:m.default(!v&&u.toggle,!c&&u.toggleHidden),onChange:A(n),useContentWidth:v,children:r},s)})(e,i,l):((e,l,i)=>{const n=e.originalItem,r=w(n),{checked:s,indeterminate:a}=R(e),o=s||a,c=!i||l<5,h=M?{"aria-checked":a?"mixed":s,"aria-selected":!!s,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{},g=t=>{t&&e.level&&t.style.setProperty(u.tokens.item.level,String(e.level)),4===l&&(E.current=t)},f=m.default(u.item,!c&&u.itemHidden,o&&u.itemSelected),b=t.jsxs(t.Fragment,{children:[L(n,e),r]});return M?t.jsx("div",Object.assign({role:"treeitem"},h,{onClick:A(n),onKeyDown:F(n),tabIndex:0,className:f,ref:g,children:b}),d.buildKeyPath(e.keyPath)):t.jsx("label",{onKeyDown:F(n),className:f,ref:g,children:b},d.buildKeyPath(e.keyPath))})(e,i,l)))})]})}))};g.displayName="Filter.Checkbox",exports.FilterItemCheckbox=g;
 //# sourceMappingURL=filter-item-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.js","sources":["../../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import {\n    AriaAttributes,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { FilterContext } from \"../filter-context\";\nimport {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"../types\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport {\n    Group,\n    Item,\n    SelectAllButton,\n    StyledCheckbox,\n    StyledFilterItem,\n    StyledToggle,\n} from \"./filter-item-checkbox.styles\";\nimport { FlattenedFilterOption } from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLLabelElement>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                valueExtractor || ((item) => (item as any).value),\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <StyledCheckbox\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        return (\n            <Item\n                key={buildKeyPath(option.keyPath)}\n                as={isNested ? \"div\" : \"label\"}\n                role={isNested ? \"treeitem\" : undefined}\n                {...treeItemAriaAttributes}\n                onClick={isNested ? handleItemClick(originalItem) : undefined}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                tabIndex={isNested ? 0 : undefined}\n                $visible={isVisible}\n                $selected={isSelected}\n                $level={option.level}\n                ref={index === 4 ? lastVisibleElement : undefined}\n            >\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </Item>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        return (\n            <StyledToggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                $visible={\n                    !minimised ||\n                    (!!minimisedHeight && index <= lastVisibleElementIndex)\n                }\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </StyledToggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <SelectAllButton\n                styleType=\"link\"\n                type=\"button\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </SelectAllButton>\n        );\n    };\n\n    return (\n        <StyledFilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <Group\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        $isMobileToggleMode={isMobileToggleMode}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </Group>\n                </>\n            )}\n        </StyledFilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","StyledCheckbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","SelectAllButton","styleType","type","onClick","ariaLabel","StyledFilterItem","Object","assign","minimisable","_","minimised","_jsxs","_Fragment","Group","role","title","ref","$isMobileToggleMode","index","optionLabel","optionValue","StyledToggle","$visible","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","Item","as","onKeyDown","$selected","$level","renderCheckbox","displayName"],"mappings":"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"}
+{"version":3,"file":"filter-item-checkbox.js","sources":["../../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { AriaAttributes } from \"react\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../../button\";\nimport { Checkbox } from \"../../checkbox\";\nimport { Toggle } from \"../../toggle\";\nimport { FilterContext } from \"../filter-context\";\nimport { FilterItem } from \"../filter-item\";\nimport * as styles from \"./filter-item-checkbox.styles\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport type { FlattenedFilterOption } from \"./internal-types\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLElement | null>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                valueExtractor || ((item) => (item as any).value),\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <Checkbox\n                className={styles.checkbox}\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        const itemRef = (el: HTMLElement | null) => {\n            if (el && option.level) {\n                el.style.setProperty(\n                    styles.tokens.item.level,\n                    String(option.level)\n                );\n            }\n            if (index === 4) {\n                lastVisibleElement.current = el;\n            }\n        };\n\n        const itemClassName = clsx(\n            styles.item,\n            !isVisible && styles.itemHidden,\n            isSelected && styles.itemSelected\n        );\n\n        const itemContent = (\n            <>\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </>\n        );\n\n        if (isNested) {\n            return (\n                <div\n                    key={buildKeyPath(option.keyPath)}\n                    role=\"treeitem\"\n                    {...treeItemAriaAttributes}\n                    onClick={handleItemClick(originalItem)}\n                    onKeyDown={handleListItemKeyDown(originalItem)}\n                    tabIndex={0}\n                    className={itemClassName}\n                    ref={itemRef}\n                >\n                    {itemContent}\n                </div>\n            );\n        }\n\n        return (\n            <label\n                key={buildKeyPath(option.keyPath)}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                className={itemClassName}\n                ref={itemRef}\n            >\n                {itemContent}\n            </label>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        const isToggleVisible =\n            !minimised ||\n            (!!minimisedHeight && index <= lastVisibleElementIndex);\n        return (\n            <Toggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                className={clsx(\n                    !useToggleContentWidth && styles.toggle,\n                    !isToggleVisible && styles.toggleHidden\n                )}\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </Toggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <Button\n                className={styles.selectAllButton}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </Button>\n        );\n    };\n\n    return (\n        <FilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n            className={clsx(styles.filterItem, filterItemProps.className)}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <div\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        className={clsx(\n                            styles.group,\n                            isMobileToggleMode && styles.groupMobileToggleMode\n                        )}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </div>\n                </>\n            )}\n        </FilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","Checkbox","className","styles.checkbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","Button","styles.selectAllButton","styleType","type","sizeType","onClick","ariaLabel","FilterItem","Object","assign","minimisable","clsx","styles.filterItem","_","minimised","_jsxs","_Fragment","role","title","ref","styles.group","styles.groupMobileToggleMode","index","optionLabel","optionValue","isToggleVisible","Toggle","styles.toggle","styles.toggleHidden","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","itemRef","el","style","setProperty","styles.tokens","String","itemClassName","styles.item","styles.itemHidden","styles.itemSelected","itemContent","onKeyDown","renderCheckbox","displayName"],"mappings":"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"}

package/cjs/filter/addons/filter-item-checkbox.styles.js

@@ -1,73 +1,2 @@
-"use strict";var i=require("styled-components"),e=require("../../button/button.js"),a=require("../../checkbox/checkbox.js"),t=require("../../theme/index.js"),n=require("../../toggle/toggle.js"),g=require("../filter-item.js");function c(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var p=c(i);const l=p.default(g.FilterItem)`
-    padding: 0 0 ${t.Spacing["spacing-16"]};
-
-    [data-id="content-container"] {
-        position: relative; // to get the item position relative to this parent
-        padding: ${t.Spacing["spacing-8"]} ${t.Spacing["spacing-8"]} 0;
-
-        ${t.MediaQuery.MaxWidth.lg} {
-            padding: ${t.Spacing["spacing-16"]} ${t.Spacing["spacing-20"]}
-                ${t.Spacing["spacing-8"]};
-        }
-    }
-
-    [data-id="minimise-button"] {
-        margin: ${t.Spacing["spacing-8"]} ${t.Spacing["spacing-20"]} 0;
-    }
-`,s=p.default.div`
-    display: flex;
-    flex-direction: column;
-
-    ${t.MediaQuery.MaxWidth.lg} {
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: ${i=>i.$isMobileToggleMode?t.Spacing["spacing-16"]:0};
-    }
-`,r=p.default.label`
-    display: flex;
-    align-items: flex-start;
-    ${i=>!i.$visible&&"display: none;"}
-
-    position: relative;
-    width: 100%;
-    min-height: 1.5rem;
-    padding: ${t.Spacing["spacing-8"]} ${t.Spacing["spacing-12"]};
-    ${e=>e.$level&&i.css`
-            padding-left: calc(
-                ${t.Spacing["spacing-12"]} + ${e.$level} *
-                    ${t.Spacing["spacing-32"]}
-            );
-        `}
-
-    cursor: pointer;
-    ${t.Font["body-md-regular"]}
-    color: ${t.Colour.text};
-    ${e=>e.$selected&&i.css`
-            color: ${t.Colour["text-selected"]};
-        `}
-    ${t.MediaQuery.MaxWidth.lg} {
-        padding: ${t.Spacing["spacing-8"]};
-        ${e=>e.$level&&i.css`
-                padding-left: calc(
-                    ${t.Spacing["spacing-8"]} + ${e.$level} *
-                        ${t.Spacing["spacing-32"]}
-                );
-            `}
-    }
-`,o=p.default(a.Checkbox)`
-    flex-shrink: 0;
-    margin-right: ${t.Spacing["spacing-8"]};
-`,d=p.default(n.Toggle)`
-    ${i=>!i.$visible&&"visibility: hidden;"}
-    min-width: 5rem;
-`,$=p.default(e.Button.Small)`
-    height: fit-content;
-    padding: 0;
-    margin: ${t.Spacing["spacing-16"]} 0 ${t.Spacing["spacing-8"]}
-        ${t.Spacing["spacing-12"]};
-
-    ${t.MediaQuery.MaxWidth.lg} {
-        margin: 0 0 ${t.Spacing["spacing-16"]} 0;
-    }
-`;exports.Group=s,exports.Item=r,exports.SelectAllButton=$,exports.StyledCheckbox=o,exports.StyledFilterItem=l,exports.StyledToggle=d;
+"use strict";require("./filter-item-checkbox.styles_6nbpdl.css");exports.checkbox="c13wglju",exports.filterItem="f1m3a5f4",exports.group="g11488am",exports.groupMobileToggleMode="g1nnu0tt",exports.item="i4hhc1a",exports.itemHidden="i7vabkq",exports.itemSelected="i4eh8j6",exports.selectAllButton="sbvftpe",exports.toggle="twhh8xx",exports.toggleHidden="tb2fwos",exports.tokens={item:{level:"--fds-internal-filterItemCheckbox-item-level"}};
 //# sourceMappingURL=filter-item-checkbox.styles.js.map

package/cjs/filter/addons/filter-item-checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../../src/filter/addons/filter-item-checkbox.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Button } from \"../../button\";\nimport { Checkbox } from \"../../checkbox\";\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\nimport { Toggle } from \"../../toggle\";\nimport { FilterItem } from \"../filter-item\";\n\nexport const StyledFilterItem = styled(FilterItem)`\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n        ${MediaQuery.MaxWidth.lg} {\n            padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n                ${Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const Group = styled.div<{\n    $isMobileToggleMode: boolean;\n}>`\n    display: flex;\n    flex-direction: column;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: ${(props) =>\n            props.$isMobileToggleMode ? Spacing[\"spacing-16\"] : 0};\n    }\n`;\n\nexport const Item = styled.label<{\n    $visible: boolean;\n    $selected: boolean;\n    $level?: number;\n}>`\n    display: flex;\n    align-items: flex-start;\n    ${(props) => !props.$visible && \"display: none;\"}\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n    ${(props) =>\n        props.$level &&\n        css`\n            padding-left: calc(\n                ${Spacing[\"spacing-12\"]} + ${props.$level} *\n                    ${Spacing[\"spacing-32\"]}\n            );\n        `}\n\n    cursor: pointer;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n    ${(props) =>\n        props.$selected &&\n        css`\n            color: ${Colour[\"text-selected\"]};\n        `}\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-8\"]};\n        ${(props) =>\n            props.$level &&\n            css`\n                padding-left: calc(\n                    ${Spacing[\"spacing-8\"]} + ${props.$level} *\n                        ${Spacing[\"spacing-32\"]}\n                );\n            `}\n    }\n`;\n\nexport const StyledCheckbox = styled(Checkbox)`\n    flex-shrink: 0;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledToggle = styled(Toggle)<{ $visible: boolean }>`\n    ${(props) => !props.$visible && \"visibility: hidden;\"}\n    min-width: 5rem;\n`;\n\nexport const SelectAllButton = styled(Button.Small)`\n    height: fit-content;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["StyledFilterItem","styled","FilterItem","Spacing","MediaQuery","MaxWidth","lg","Group","div","props","$isMobileToggleMode","Item","label","$visible","$level","css","Font","Colour","$selected","StyledCheckbox","Checkbox","StyledToggle","Toggle","SelectAllButton","Button","Small"],"mappings":"0TAOaA,EAAmBC,EAAAA,QAAOC,EAAAA,WAAW;mBAC/BC,EAAAA,QAAQ;;;;mBAIRA,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;UAEzCC,EAAAA,WAAWC,SAASC;uBACPH,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;kBACtCA,EAAAA,QAAQ;;;;;kBAKRA,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;;EAIrCI,EAAQN,EAAAA,QAAOO,GAE1B;;;;MAIIJ,EAAAA,WAAWC,SAASC;;;eAGVG,GACJA,EAAMC,oBAAsBP,EAAAA,QAAQ,cAAgB;;EAInDQ,EAAOV,EAAAA,QAAOW,KAIzB;;;MAGKH,IAAWA,EAAMI,UAAY;;;;;eAKrBV,EAAAA,QAAQ,gBAAgBA,EAAAA,QAAQ;MACxCM,GACCA,EAAMK,QACNC,KAAG;;kBAEOZ,EAAAA,QAAQ,mBAAmBM,EAAMK;sBAC7BX,EAAAA,QAAQ;;;;;MAKxBa,EAAAA,KAAK;aACEC,EAAAA,OAAa;MACnBR,GACCA,EAAMS,WACNH,KAAG;qBACUE,EAAAA,OAAO;;MAEtBb,EAAAA,WAAWC,SAASC;mBACPH,EAAAA,QAAQ;UAChBM,GACCA,EAAMK,QACNC,KAAG;;sBAEOZ,EAAAA,QAAQ,kBAAkBM,EAAMK;0BAC5BX,EAAAA,QAAQ;;;;EAMrBgB,EAAiBlB,EAAAA,QAAOmB,EAAAA,SAAS;;oBAE1BjB,EAAAA,QAAQ;EAGfkB,EAAepB,EAAAA,QAAOqB,EAAAA,OAA8B;MAC1Db,IAAWA,EAAMI,UAAY;;EAIvBU,EAAkBtB,EAAAA,QAAOuB,SAAOC,MAAM;;;cAGrCtB,EAAAA,QAAQ,mBAAmBA,EAAAA,QAAQ;UACvCA,EAAAA,QAAQ;;MAEZC,EAAAA,WAAWC,SAASC;sBACJH,EAAAA,QAAQ;;"}
+{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    item: {\n        level: \"--fds-internal-filterItemCheckbox-item-level\",\n    },\n} as const;\n\nexport const filterItem = css`\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n        ${MediaQuery.MaxWidth.lg} {\n            padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n                ${Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const group = css`\n    display: flex;\n    flex-direction: column;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 0;\n    }\n`;\n\nexport const groupMobileToggleMode = css`\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const item = css`\n    ${tokens.item.level}: 0;\n\n    display: flex;\n    align-items: flex-start;\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n    padding-left: calc(\n        ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) *\n            ${Spacing[\"spacing-32\"]}\n    );\n\n    cursor: pointer;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-8\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) *\n                ${Spacing[\"spacing-32\"]}\n        );\n    }\n`;\n\nexport const itemHidden = css`\n    display: none;\n`;\n\nexport const itemSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n    flex-shrink: 0;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n    min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n    visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n    height: fit-content;\n    min-height: unset;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["item","level"],"mappings":"+GAiFqB,8BAvEE,yBAkBL,yCAWgB,wBAMjB,6BA4BM,+BAIE,kCAiBG,yBART,+BAIM,yBAtFH,CAClBA,KAAM,CACFC,MAAO"}

package/cjs/filter/addons/filter-item-checkbox.styles_6nbpdl.css

@@ -0,0 +1,16 @@
+@layer fds{.f1m3a5f4{padding:0 0 var(--fds-spacing-16);}.f1m3a5f4 [data-id="content-container"]{position:relative;padding:var(--fds-spacing-8) var(--fds-spacing-8) 0;}:where(body.fds-breakpoint-lg-max) .f1m3a5f4 [data-id="content-container"]{padding:var(--fds-spacing-16) var(--fds-spacing-20) var(--fds-spacing-8);}.f1m3a5f4 [data-id="minimise-button"]{margin:var(--fds-spacing-8) var(--fds-spacing-20) 0;}
+.g11488am{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-lg-max) .g11488am{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0;}
+:where(body.fds-breakpoint-lg-max) .g1nnu0tt{gap:var(--fds-spacing-16);}
+.i4hhc1a{--fds-internal-filterItemCheckbox-item-level:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;width:100%;min-height:1.5rem;padding:var(--fds-spacing-8) var(--fds-spacing-12);padding-left:calc(
+        var(--fds-spacing-12) + var(--fds-internal-filterItemCheckbox-item-level) *
+            var(--fds-spacing-32)
+    );cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4hhc1a{padding:var(--fds-spacing-8);padding-left:calc(
+            var(--fds-spacing-8) + var(--fds-internal-filterItemCheckbox-item-level) *
+                var(--fds-spacing-32)
+        );}
+.i7vabkq{display:none;}
+.i4eh8j6{color:var(--fds-colour-text-selected);}
+.c13wglju{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:var(--fds-spacing-8);}
+.twhh8xx{min-width:5rem;}
+.tb2fwos{visibility:hidden;}
+.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-height:unset;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}}

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

@@ -1 +1 @@
-{"version":3,"file":"filter-context.js","sources":["../../../src/filter/filter-context.tsx"],"sourcesContent":["import React, { RefObject } from \"react\";\nimport { Mode } from \"./types\";\n\ninterface IFilterContext {\n    mode: Mode;\n    rootNode: RefObject<HTMLDivElement>;\n}\n\nexport const FilterContext = React.createContext<IFilterContext>({\n    mode: \"default\",\n    rootNode: { current: null },\n});\n"],"names":["FilterContext","React","createContext","mode","rootNode","current"],"mappings":"qFAQO,MAAMA,sBAAgBC,QAAMC,cAA8B,CAC7DC,KAAM,UACNC,SAAU,CAAEC,QAAS"}
+{"version":3,"file":"filter-context.js","sources":["../../../src/filter/filter-context.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\n\nimport type { Mode } from \"./types\";\n\ninterface IFilterContext {\n    mode: Mode;\n    rootNode: RefObject<HTMLDivElement>;\n}\n\nexport const FilterContext = React.createContext<IFilterContext>({\n    mode: \"default\",\n    rootNode: { current: null },\n});\n"],"names":["FilterContext","React","createContext","mode","rootNode","current"],"mappings":"qFAUO,MAAMA,sBAAgBC,QAAMC,cAA8B,CAC7DC,KAAM,UACNC,SAAU,CAAEC,QAAS"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-left"),i=require("./filter-item-page.styles.js"),t=require("./filter.styles.js");const s=({onDismiss:s,onDone:l,children:n})=>e.jsxs(i.FilterItemPageContainer,{children:[e.jsx(t.FilterHeaderButton,{onClick:s,focusOutline:"browser",focusHighlight:!1,"aria-label":"Dismiss",children:e.jsx(r.ChevronLeftIcon,{})}),e.jsx(t.FilterBody,{children:n}),e.jsx(t.FilterFooter,{children:e.jsx(t.FilterDoneButton,{onClick:l,type:"button",children:"Done"})})]});s.displayName="Filter.Page",exports.FilterItemPage=s;
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-left"),t=require("../button/button.js"),s=require("../shared/clickable-icon/clickable-icon.js"),r=require("./filter.styles.js"),l=require("./filter-item-page.styles.js");const a=({onDismiss:a,onDone:n,children:c,"data-testid":o})=>e.jsxs("div",{className:l.filterItemPageContainer,"data-testid":o,children:[e.jsx(s.ClickableIcon,{className:r.filterHeaderButton,onClick:a,focusOutline:"browser",focusHighlight:!1,"aria-label":"Dismiss",children:e.jsx(i.ChevronLeftIcon,{})}),e.jsx("div",{className:r.filterBody,children:c}),e.jsx("div",{className:r.filterFooter,children:e.jsx(t.Button,{className:r.filterDoneButton,onClick:n,type:"button",children:"Done"})})]});a.displayName="Filter.Page",exports.FilterItemPage=a;
 //# sourceMappingURL=filter-item-page.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-page.js","sources":["../../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { FilterItemPageContainer } from \"./filter-item-page.styles\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\nimport { FilterPageProps } from \"./types\";\n\nexport const FilterItemPage = ({\n    onDismiss,\n    onDone,\n    children,\n}: FilterPageProps) => {\n    return (\n        <FilterItemPageContainer>\n            <FilterHeaderButton\n                onClick={onDismiss}\n                focusOutline=\"browser\"\n                focusHighlight={false}\n                aria-label=\"Dismiss\"\n            >\n                <ChevronLeftIcon />\n            </FilterHeaderButton>\n            <FilterBody>{children}</FilterBody>\n            <FilterFooter>\n                <FilterDoneButton onClick={onDone} type=\"button\">\n                    Done\n                </FilterDoneButton>\n            </FilterFooter>\n        </FilterItemPageContainer>\n    );\n};\n\nFilterItemPage.displayName = \"Filter.Page\";\n"],"names":["FilterItemPage","onDismiss","onDone","children","_jsxs","FilterItemPageContainer","_jsx","FilterHeaderButton","onClick","focusOutline","focusHighlight","ChevronLeftIcon","FilterBody","FilterFooter","FilterDoneButton","type","displayName"],"mappings":"wKAUO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,cAGIC,EAAAA,KAACC,EAAAA,wBAAuB,CAAAF,SAAA,CACpBG,EAAAA,IAACC,EAAAA,mBAAkB,CACfC,QAASP,EACTQ,aAAa,UACbC,gBAAgB,EAAK,aACV,UAASP,SAEpBG,EAAAA,IAACK,kBAAe,CAAA,KAEpBL,EAAAA,IAACM,EAAAA,WAAU,CAAAT,SAAEA,IACbG,MAACO,EAAAA,aAAY,CAAAV,SACTG,EAAAA,IAACQ,EAAAA,kBAAiBN,QAASN,EAAQa,KAAK,SAAQZ,SAAA,cAQhEH,EAAegB,YAAc"}
+{"version":3,"file":"filter-item-page.js","sources":["../../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as filterStyles from \"./filter.styles\";\nimport * as styles from \"./filter-item-page.styles\";\nimport type { FilterPageProps } from \"./types\";\n\nexport const FilterItemPage = ({\n    onDismiss,\n    onDone,\n    children,\n    \"data-testid\": dataTestId,\n}: FilterPageProps) => {\n    return (\n        <div\n            className={styles.filterItemPageContainer}\n            data-testid={dataTestId}\n        >\n            <ClickableIcon\n                className={filterStyles.filterHeaderButton}\n                onClick={onDismiss}\n                focusOutline=\"browser\"\n                focusHighlight={false}\n                aria-label=\"Dismiss\"\n            >\n                <ChevronLeftIcon />\n            </ClickableIcon>\n            <div className={filterStyles.filterBody}>{children}</div>\n            <div className={filterStyles.filterFooter}>\n                <Button\n                    className={filterStyles.filterDoneButton}\n                    onClick={onDone}\n                    type=\"button\"\n                >\n                    Done\n                </Button>\n            </div>\n        </div>\n    );\n};\n\nFilterItemPage.displayName = \"Filter.Page\";\n"],"names":["FilterItemPage","onDismiss","onDone","children","dataTestId","_jsxs","className","styles.filterItemPageContainer","_jsx","ClickableIcon","filterStyles.filterHeaderButton","onClick","focusOutline","focusHighlight","ChevronLeftIcon","filterStyles.filterBody","filterStyles.filterFooter","Button","filterStyles.filterDoneButton","type","displayName"],"mappings":"iQAQO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,WACA,cAAeC,KAGXC,OAAA,MAAA,CACIC,UAAWC,EAAAA,wBAA8B,cAC5BH,YAEbI,EAAAA,IAACC,EAAAA,cAAa,CACVH,UAAWI,EAAAA,mBACXC,QAASV,EACTW,aAAa,UACbC,gBAAgB,EAAK,aACV,UAASV,SAEpBK,EAAAA,IAACM,EAAAA,gBAAe,CAAA,KAEpBN,EAAAA,IAAA,MAAA,CAAKF,UAAWS,EAAAA,oBAA0BZ,IAC1CK,EAAAA,IAAA,MAAA,CAAKF,UAAWU,EAAAA,sBACZR,MAACS,EAAAA,OAAM,CACHX,UAAWY,mBACXP,QAAST,EACTiB,KAAK,SAAQhB,SAAA,cASjCH,EAAeoB,YAAc"}

package/cjs/filter/filter-item-page.styles.js

@@ -1,8 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=o(e).default.div`
-    background-color: ${t.Colour.bg};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`;exports.FilterItemPageContainer=r;
+"use strict";require("./filter-item-page.styles_17ewfrz.css");exports.filterItemPageContainer="f94l7xt";
 //# sourceMappingURL=filter-item-page.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-page.styles.js","sources":["../../../src/filter/filter-item-page.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// FILTER ITEM PAGE STYLES\n// =============================================================================\n\nexport const FilterItemPageContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":["FilterItemPageContainer","styled","div","Colour"],"mappings":"uJAOO,MAAMA,OAA0BC,QAAOC,GAAG;wBACzBC,EAAAA,OAAW;;;;;"}
+{"version":3,"file":"filter-item-page.styles.js","sources":["../../../src/filter/filter-item-page.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// FILTER ITEM PAGE STYLES\n// =============================================================================\n\nexport const filterItemPageContainer = css`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":[],"mappings":"oHAQoC"}

package/cjs/filter/filter-item-page.styles_17ewfrz.css

@@ -0,0 +1 @@
+@layer fds{.f94l7xt{background-color:var(--fds-colour-bg);height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}