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

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

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

Files changed (1304) hide show

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

	@@ -1 +1 @@
1	- {"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\nexport const FileUpload = ({\n styleType = \"bordered\",\n fileItems,\n title,\n description,\n maxFiles,\n warning,\n className,\n name,\n id,\n \"data-testid\": testId,\n accept,\n capture,\n multiple,\n disabled,\n sortable = false,\n fileDescriptionMaxLength,\n editableFileItems = false,\n errorMessage,\n readOnly,\n customLabels,\n onChange,\n onDelete,\n onEdit,\n onSort,\n}: FileUploadProps) => {\n const labels = {\n uploadButton: customLabels?.uploadButtonLabel \|\| \"Upload files\",\n };\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const dropzoneRef = useRef<DropzoneElement>(null);\n const fileListRef = useRef<FileListRef>(null);\n const [activeId, setActiveId] = useState<string>();\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (files: File[]) => {\n 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 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","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":"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"}
1	+ {"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\nexport const FileUpload = ({\n styleType = \"bordered\",\n fileItems,\n title,\n description,\n maxFiles,\n warning,\n className,\n name,\n id,\n \"data-testid\": testId,\n accept,\n capture,\n multiple,\n disabled,\n sortable = false,\n fileDescriptionMaxLength,\n editableFileItems = false,\n errorMessage,\n readOnly,\n customLabels,\n onChange,\n onDelete,\n onEdit,\n onSort,\n}: FileUploadProps) => {\n const labels = {\n uploadButton: customLabels?.uploadButtonLabel \|\| \"Upload files\",\n };\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const dropzoneRef = useRef<DropzoneElement>(null);\n const fileListRef = useRef<FileListRef>(null);\n const [activeId, setActiveId] = useState<string>();\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (files: File[]) => {\n 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 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","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":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./filter-item-checkbox.styles_18l87i2.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"}};
+"use strict";require("./filter-item-checkbox.styles_7degw7.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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 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":"~~gHAiFqB~~,8BAvEE,yBAkBL,yCAWgB,wBAMjB,6BA4BM,+BAIE,kCAiBG,yBART,+BAIM,yBAtFH,CAClBA,KAAM,CACFC,MAAO"}
1	+ {"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 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_18l87i2.css → filter-item-checkbox.styles_7degw7.css} RENAMED Viewed

@@ -4,7 +4,7 @@
 .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);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(
+    );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)
         );}

package/cjs/filter/filter-badge.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("../badge/badge.js");exports.FilterBadge=({count:a})=>void 0!==a&&a>0?e.jsx(r.Badge,{count:a,variant:"square-number","aria-label":`${a} selected`}):null;
2	+ //# sourceMappingURL=filter-badge.js.map

package/cjs/filter/filter-badge.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"filter-badge.js","sources":["../../../src/filter/filter-badge.tsx"],"sourcesContent":["import { Badge } from \"../badge\";\n\ninterface FilterBadgeProps {\n count?: number;\n}\n\nexport const FilterBadge = ({ count }: FilterBadgeProps) =>\n count !== undefined && count > 0 ? (\n <Badge\n count={count}\n variant=\"square-number\"\n aria-label={`${count} selected`}\n />\n ) : null;\n"],"names":["count","undefined","_jsx","Badge","variant"],"mappings":"mGAM2B,EAAGA,gBAChBC,IAAVD,GAAuBA,EAAQ,EAC3BE,EAAAA,IAACC,EAAAA,MAAK,CACFH,MAAOA,EACPI,QAAQ,6BACI,GAAGJ,eAEnB"}

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

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

	@@ -1 +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\";\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}: FilterPageProps) => {\n return (\n <div className={styles.filterItemPageContainer}>\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","_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,~~cAGIC~~,OAAA,MAAA,~~CAAKC~~,UAAWC,EAAAA,~~wBAA8BH~~,~~SAAA~~,~~CAC1CI~~,EAAAA,IAACC,EAAAA,cAAa,CACVH,UAAWI,EAAAA,mBACXC,~~QAAST~~,~~EACTU~~,aAAa,UACbC,gBAAgB,~~eACL~~,~~UAAST~~,~~SAEpBI~~,~~MAACM~~,EAAAA,~~sBAELN~~,EAAAA,IAAA,MAAA,CAAKF,UAAWS,~~sBAA0BX~~,~~IAC1CI~~,EAAAA,IAAA,MAAA,CAAKF,UAAWU,EAAAA,sBACZR,~~EAAAA~~,~~IAACS,~~EAAAA,OAAM,CACHX,UAAWY,mBACXP,~~QAASR~~,~~EACTgB~~,KAAK,~~SAAQf~~,SAAA,cASjCH,~~EAAemB~~,YAAc"}
1	+ {"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.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./filter-item.styles_1e3v6qq.css");exports.chevronIcon="cjime8m",exports.chevronIconExpanded="cl88d88",exports.divider="d136l108",exports.dividerMobile="d4x3x5q",exports.dividerVisible="d89ue12",exports.expandableItem="eqgs6og",exports.filterItemBody="fu0jz3r",exports.filterItemExpandButton="fe52bn7",exports.filterItemHeader="f1eimp3e",exports.filterItemHeaderMobile="f1b5woey",exports.filterItemMinimiseButton="fw516jj",exports.filterItemTitle="fxnpooo",exports.filterItemTitleMobile="f9puapc",exports.filterItemWrapper="f1afprn0",exports.filterItemWrapperDarker="fo96iku",exports.minimisableContent="m1n17l6q",exports.minimisableContentMinimisable="my7z4fl",exports.tokens={minimisableContent:{height:"--fds-internal-filter-minimisableContent-height"}};
+"use strict";require("./filter-item.styles_cphjnj.css");exports.chevronIcon="cjime8m",exports.chevronIconExpanded="cl88d88",exports.divider="d136l108",exports.dividerMobile="d4x3x5q",exports.dividerVisible="d89ue12",exports.expandableItem="eqgs6og",exports.filterItemBody="fu0jz3r",exports.filterItemExpandButton="fe52bn7",exports.filterItemHeader="f1eimp3e",exports.filterItemHeaderMobile="f1b5woey",exports.filterItemMinimiseButton="fw516jj",exports.filterItemTitle="fxnpooo",exports.filterItemTitleMobile="f9puapc",exports.filterItemWrapper="f1afprn0",exports.filterItemWrapperDarker="fo96iku",exports.minimisableContent="m1n17l6q",exports.minimisableContentMinimisable="my7z4fl",exports.tokens={minimisableContent:{height:"--fds-internal-filter-minimisableContent-height"}};
 //# sourceMappingURL=filter-item.styles.js.map

package/cjs/filter/filter-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-item.styles.js","sources":["../../../src/filter/filter-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\nexport const tokens = {\n minimisableContent: {\n height: \"--fds-internal-filter-minimisableContent-height\",\n },\n} as const;\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const filterItemWrapper = css`\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemWrapperDarker = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const divider = css`\n display: none;\n height: 1px;\n background-color: ${Colour[\"border\"]};\n`;\n\nexport const dividerVisible = css`\n display: block;\n`;\n\nexport const dividerMobile = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterItemHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemHeaderMobile = css`\n background-color: transparent;\n`;\n\nexport const filterItemExpandButton = css`\n margin: 0 0 0 auto;\n\n color: ${Colour[\"icon\"]};\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIcon = css`\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n\n transform: rotate(0deg);\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const filterItemTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n\n margin: ${Spacing[\"spacing-24\"]} 0;\n margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterItemTitleMobile = css`\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-subtle\"]};\n\n margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]} 0\n ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// CONTENT STYLES\n// =============================================================================\n\nexport const expandableItem = css`\n overflow: hidden;\n`;\n\nexport const filterItemBody = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const minimisableContent = css`\n ${tokens.minimisableContent.height}: initial;\n height: var(${tokens.minimisableContent.height});\n`;\n\nexport const minimisableContentMinimisable = css`\n overflow: hidden;\n`;\n\nexport const filterItemMinimiseButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["minimisableContent","height"],"mappings":"~~mGA4DwB~~,sCAQQ,0BA9CZ,iCAUM,iCAJC,iCAgEA,iCAIA,yCA7CQ,mCAXN,0CAOM,4CA8DE,kCArCT,wCAQM,oCAlEJ,2CAIM,qCAkFL,iDAKW,yBArGpB,CAClBA,mBAAoB,CAChBC,OAAQ"}
1	+ {"version":3,"file":"filter-item.styles.js","sources":["../../../src/filter/filter-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\nexport const tokens = {\n minimisableContent: {\n height: \"--fds-internal-filter-minimisableContent-height\",\n },\n} as const;\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const filterItemWrapper = css`\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemWrapperDarker = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const divider = css`\n display: none;\n height: 1px;\n background-color: ${Colour[\"border\"]};\n`;\n\nexport const dividerVisible = css`\n display: block;\n`;\n\nexport const dividerMobile = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterItemHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemHeaderMobile = css`\n background-color: transparent;\n`;\n\nexport const filterItemExpandButton = css`\n margin: 0 0 0 auto;\n\n color: ${Colour[\"icon\"]};\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIcon = css`\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n\n transform: rotate(0deg);\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const filterItemTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n\n margin: ${Spacing[\"spacing-24\"]} 0;\n margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterItemTitleMobile = css`\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-subtle\"]};\n\n margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]} 0\n ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// CONTENT STYLES\n// =============================================================================\n\nexport const expandableItem = css`\n overflow: hidden;\n`;\n\nexport const filterItemBody = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const minimisableContent = css`\n ${tokens.minimisableContent.height}: initial;\n height: var(${tokens.minimisableContent.height});\n`;\n\nexport const minimisableContentMinimisable = css`\n overflow: hidden;\n`;\n\nexport const filterItemMinimiseButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["minimisableContent","height"],"mappings":"kGA4DwB,sCAQQ,0BA9CZ,iCAUM,iCAJC,iCAgEA,iCAIA,yCA7CQ,mCAXN,0CAOM,4CA8DE,kCArCT,wCAQM,oCAlEJ,2CAIM,qCAkFL,iDAKW,yBArGpB,CAClBA,mBAAoB,CAChBC,OAAQ"}

package/{filter/filter-item.styles_1e3v6qq.css → cjs/filter/filter-item.styles_cphjnj.css} RENAMED Viewed

@@ -8,8 +8,8 @@
 .fe52bn7{margin:0 0 0 auto;color:var(--fds-colour-icon);}.fe52bn7:hover{color:var(--fds-colour-icon-hover);}
 .cjime8m{height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
 .cl88d88{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
-.fxnpooo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);margin:var(--fds-spacing-24) 0;margin-left:var(--fds-spacing-20);}
-.f9puapc{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtle);margin:var(--fds-spacing-24) var(--fds-spacing-20) 0 var(--fds-spacing-20);}
+.fxnpooo{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);margin:var(--fds-spacing-24) 0;margin-left:var(--fds-spacing-20);}
+.f9puapc{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtle);margin:var(--fds-spacing-24) var(--fds-spacing-20) 0 var(--fds-spacing-20);}
 .eqgs6og{overflow:hidden;}
 .fu0jz3r{padding:var(--fds-spacing-24) var(--fds-spacing-20);}
 .m1n17l6q{--fds-internal-filter-minimisableContent-height:initial;height:var(--fds-internal-filter-minimisableContent-height);}

package/cjs/filter/filter-modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("clsx"),s=require("../external/lodash/isNumber.js"),o=require("react"),n=require("../button/button.js"),a=require("../overlay/overlay.js"),u=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var m=require("./filter.styles.js"),f=require("./filter-context.js"),h=require("./filter-modal.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=b(r);const v=r=>{var{customLabels:b,onClear:v,onDone:x,onDismiss:p,onModalOpen:y,toggleFilterButtonStyle:g="light",clearButtonDisabled:q=!1,insets:B,children:F,toggleFilterButtonLabel:N,headerTitle:k,doneButtonLabel:C,className:T}=r,L=e.__rest(r,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel","className"]);const{context:D,refs:I}=l.useFloating(),O=o.useRef(null),H=o.useRef(null),M=o.useRef(null),[S,$]=o.useState(!1);c.useApplyStyle(H,{[h.tokens.filterHeader.insetTop]:s.default(null==B?void 0:B.top)?`${B.top}px`:null}),c.useApplyStyle(M,{[m.tokens.filterFooter.insetBottom]:s.default(null==B?void 0:B.bottom)?`${B.bottom}px`:null});const _={toggle:(null==b?void 0:b.toggleFilterButtonLabel)||N||"Filters",title:(null==b?void 0:b.headerTitle)||k||"Filters",done:(null==b?void 0:b.doneButtonLabel)||C||"Done",clear:(null==b?void 0:b.clearButtonLabel)||"Clear"};return o.useEffect((()=>{var e;S&&(null===(e=O.current)||void 0===e||e.focus())}),[S]),t.jsxs(f.FilterContext.Provider,{value:{mode:"mobile",rootNode:O},children:[t.jsx("div",Object.assign({className:T},L,{children:t.jsx(n.Button,{className:h.filterButton,"data-testid":"filter-show-button",styleType:g,onClick:()=>{$(!0),null==y||y()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:_.toggle})})),t.jsx(a.Overlay,{show:S,disableTransition:!0,children:t.jsx("div",{className:h.floatingWrapper,inert:u.inertValue(!S),children:t.jsx(l.FloatingFocusManager,{context:D,disabled:!S,children:t.jsx("div",{className:h.mobileOverlayContainer,"data-id":"filter-mobile","data-testid":"filter-mobile",ref:I.setFloating,children:t.jsxs("div",{className:h.mobileContainer,ref:O,tabIndex:0,children:[t.jsxs("div",{ref:H,className:j.default(h.filterHeader,s.default(null==B?void 0:B.top)&&h.filterHeaderWithInsetTop),children:[t.jsx(d.ClickableIcon,{className:m.filterHeaderButton,onClick:()=>{$(!1),null==p||p()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${_.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsx("h2",{className:h.filterTitle,children:_.title}),t.jsx(n.Button,{className:h.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==v?void 0:v(),disabled:q,"aria-label":`clear ${_.title}`,children:_.clear})]}),t.jsx("div",{className:m.filterBody,children:F}),t.jsx("div",{ref:M,className:j.default(m.filterFooter,s.default(null==B?void 0:B.bottom)&&m.filterFooterWithInsetBottom),children:t.jsx(n.Button,{className:m.filterDoneButton,onClick:()=>{$(!1),null==x||x()},children:_.done})})]})})})})})]})};v.displayName="Filter.Modal",exports.FilterModal=v;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("clsx"),s=require("../external/lodash/isNumber.js"),o=require("react"),n=require("../button/button.js"),a=require("../overlay/overlay.js"),u=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var f=require("./filter.styles.js"),m=require("./filter-badge.js"),h=require("./filter-context.js"),j=require("./filter-modal.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(r);const v=r=>{var{customLabels:b,onClear:v,onDone:g,onDismiss:p,onModalOpen:y,toggleFilterButtonStyle:q="light",clearButtonDisabled:B=!1,insets:F,count:N,children:k,toggleFilterButtonLabel:C,headerTitle:T,doneButtonLabel:L,className:D}=r,I=e.__rest(r,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel","className"]);const{context:O,refs:H}=l.useFloating(),M=o.useRef(null),S=o.useRef(null),$=o.useRef(null),[_,w]=o.useState(!1);c.useApplyStyle(S,{[j.tokens.filterHeader.insetTop]:s.default(null==F?void 0:F.top)?`${F.top}px`:null}),c.useApplyStyle($,{[f.tokens.filterFooter.insetBottom]:s.default(null==F?void 0:F.bottom)?`${F.bottom}px`:null});const R={toggle:(null==b?void 0:b.toggleFilterButtonLabel)||C||"Filters",title:(null==b?void 0:b.headerTitle)||T||"Filters",done:(null==b?void 0:b.doneButtonLabel)||L||"Done",clear:(null==b?void 0:b.clearButtonLabel)||"Clear"};return o.useEffect((()=>{var e;_&&(null===(e=M.current)||void 0===e||e.focus())}),[_]),t.jsxs(h.FilterContext.Provider,{value:{mode:"mobile",rootNode:M},children:[t.jsx("div",Object.assign({className:D},I,{children:t.jsx(n.Button,{className:j.filterButton,"data-testid":"filter-show-button",styleType:q,onClick:()=>{w(!0),null==y||y()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:t.jsxs("span",{className:j.filterToggleContent,children:[t.jsx("span",{children:R.toggle}),t.jsx(m.FilterBadge,{count:N})]})})})),t.jsx(a.Overlay,{show:_,disableTransition:!0,children:t.jsx("div",{className:j.floatingWrapper,inert:u.inertValue(!_),children:t.jsx(l.FloatingFocusManager,{context:O,disabled:!_,children:t.jsx("div",{className:j.mobileOverlayContainer,"data-id":"filter-mobile","data-testid":"filter-mobile",ref:H.setFloating,children:t.jsxs("div",{className:j.mobileContainer,ref:M,tabIndex:0,children:[t.jsxs("div",{ref:S,className:x.default(j.filterHeader,s.default(null==F?void 0:F.top)&&j.filterHeaderWithInsetTop),children:[t.jsx(d.ClickableIcon,{className:f.filterHeaderButton,onClick:()=>{w(!1),null==p||p()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${R.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsxs("div",{className:j.filterTitleGroup,children:[t.jsx("h2",{className:j.filterTitle,children:R.title}),t.jsx(m.FilterBadge,{count:N})]}),t.jsx(n.Button,{className:j.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==v?void 0:v(),disabled:B,"aria-label":`clear ${R.title}`,children:R.clear})]}),t.jsx("div",{className:f.filterBody,children:k}),t.jsx("div",{ref:$,className:x.default(f.filterFooter,s.default(null==F?void 0:F.bottom)&&f.filterFooterWithInsetBottom),children:t.jsx(n.Button,{className:f.filterDoneButton,onClick:()=>{w(!1),null==g||g()},children:R.done})})]})})})})})]})};v.displayName="Filter.Modal",exports.FilterModal=v;
 //# sourceMappingURL=filter-modal.js.map

package/cjs/filter/filter-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport isNumber from \"lodash/isNumber\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n customLabels,\n onClear,\n onDone,\n onDismiss,\n onModalOpen,\n toggleFilterButtonStyle = \"light\",\n clearButtonDisabled = false,\n insets,\n children,\n toggleFilterButtonLabel: _toggleFilterButtonLabel,\n headerTitle: _headerTitle,\n doneButtonLabel: _doneButtonLabel,\n className,\n ...otherProps\n}: FilterModalProps) => {\n const { context, refs } = useFloating();\n const nodeRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n\n const [visible, setVisible] = useState(false);\n\n useApplyStyle(headerRef, {\n [styles.tokens.filterHeader.insetTop]: isNumber(insets?.top)\n ? `${insets.top}px`\n : null,\n });\n\n useApplyStyle(footerRef, {\n [filterStyles.tokens.filterFooter.insetBottom]: isNumber(insets?.bottom)\n ? `${insets.bottom}px`\n : null,\n });\n\n const handleShow = () => setVisible(true);\n const handleDismiss = () => {\n setVisible(false);\n onDismiss?.();\n };\n const handleDone = () => {\n setVisible(false);\n onDone?.();\n };\n\n const handleShowFilter = () => {\n handleShow();\n onModalOpen?.();\n };\n\n const labels = {\n toggle:\n customLabels?.toggleFilterButtonLabel \|\|\n _toggleFilterButtonLabel \|\|\n \"Filters\",\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n done: customLabels?.doneButtonLabel \|\| _doneButtonLabel \|\| \"Done\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n useEffect(() => {\n if (visible) {\n nodeRef.current?.focus();\n }\n }, [visible]);\n\n return (\n <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n <div className={className} {...otherProps}>\n <Button\n className={styles.filterButton}\n data-testid=\"filter-show-button\"\n styleType={toggleFilterButtonStyle}\n onClick={handleShowFilter}\n type=\"button\"\n icon={<FilterIcon />}\n >\n {labels.toggle}\n </Button>\n </div>\n <Overlay show={visible} disableTransition>\n <div\n className={styles.floatingWrapper}\n inert={inertValue(!visible)}\n >\n <FloatingFocusManager context={context} disabled={!visible}>\n <div\n className={styles.mobileOverlayContainer}\n data-id=\"filter-mobile\"\n data-testid=\"filter-mobile\"\n ref={refs.setFloating}\n >\n <div\n className={styles.mobileContainer}\n ref={nodeRef}\n tabIndex={0}\n >\n <div\n ref={headerRef}\n className={clsx(\n styles.filterHeader,\n isNumber(insets?.top) &&\n styles.filterHeaderWithInsetTop\n )}\n >\n <ClickableIcon\n className={\n filterStyles.filterHeaderButton\n }\n onClick={handleDismiss}\n focusOutline=\"browser\"\n focusHighlight={false}\n aria-label={`close ${labels.title}`}\n >\n <CrossIcon />\n </ClickableIcon>\n <h2 className={styles.filterTitle}>\n {labels.title}\n </h2>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>\n {children}\n </div>\n <div\n ref={footerRef}\n className={clsx(\n filterStyles.filterFooter,\n isNumber(insets?.bottom) &&\n filterStyles.filterFooterWithInsetBottom\n )}\n >\n <Button\n className={\n filterStyles.filterDoneButton\n }\n onClick={handleDone}\n >\n {labels.done}\n </Button>\n </div>\n </div>\n </div>\n </FloatingFocusManager>\n </div>\n </Overlay>\n </FilterContext.Provider>\n );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","className","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","headerRef","footerRef","visible","setVisible","useState","useApplyStyle","styles.tokens","filterHeader","insetTop","isNumber","top","filterStyles.tokens","filterFooter","insetBottom","bottom","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","Button","styles.filterButton","styleType","onClick","type","icon","FilterIcon","Overlay","show","disableTransition","styles.floatingWrapper","inert","inertValue","FloatingFocusManager","disabled","styles.mobileOverlayContainer","ref","setFloating","styles.mobileContainer","tabIndex","clsx","styles.filterHeader","styles.filterHeaderWithInsetTop","ClickableIcon","filterStyles.filterHeaderButton","focusOutline","focusHighlight","CrossIcon","styles.filterTitle","styles.filterClearButton","sizeType","filterStyles.filterBody","filterStyles.filterFooter","filterStyles.filterFooterWithInsetBottom","filterStyles.filterDoneButton","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport isNumber from \"lodash/isNumber\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n customLabels,\n onClear,\n onDone,\n onDismiss,\n onModalOpen,\n toggleFilterButtonStyle = \"light\",\n clearButtonDisabled = false,\n insets,\n count,\n children,\n toggleFilterButtonLabel: _toggleFilterButtonLabel,\n headerTitle: _headerTitle,\n doneButtonLabel: _doneButtonLabel,\n className,\n ...otherProps\n}: FilterModalProps) => {\n const { context, refs } = useFloating();\n const nodeRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n\n const [visible, setVisible] = useState(false);\n\n useApplyStyle(headerRef, {\n [styles.tokens.filterHeader.insetTop]: isNumber(insets?.top)\n ? `${insets.top}px`\n : null,\n });\n\n useApplyStyle(footerRef, {\n [filterStyles.tokens.filterFooter.insetBottom]: isNumber(insets?.bottom)\n ? `${insets.bottom}px`\n : null,\n });\n\n const handleShow = () => setVisible(true);\n const handleDismiss = () => {\n setVisible(false);\n onDismiss?.();\n };\n const handleDone = () => {\n setVisible(false);\n onDone?.();\n };\n\n const handleShowFilter = () => {\n handleShow();\n onModalOpen?.();\n };\n\n const labels = {\n toggle:\n customLabels?.toggleFilterButtonLabel \|\|\n _toggleFilterButtonLabel \|\|\n \"Filters\",\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n done: customLabels?.doneButtonLabel \|\| _doneButtonLabel \|\| \"Done\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n useEffect(() => {\n if (visible) {\n nodeRef.current?.focus();\n }\n }, [visible]);\n\n return (\n <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n <div className={className} {...otherProps}>\n <Button\n className={styles.filterButton}\n data-testid=\"filter-show-button\"\n styleType={toggleFilterButtonStyle}\n onClick={handleShowFilter}\n type=\"button\"\n icon={<FilterIcon />}\n >\n <span className={styles.filterToggleContent}>\n <span>{labels.toggle}</span>\n <FilterBadge count={count} />\n </span>\n </Button>\n </div>\n <Overlay show={visible} disableTransition>\n <div\n className={styles.floatingWrapper}\n inert={inertValue(!visible)}\n >\n <FloatingFocusManager context={context} disabled={!visible}>\n <div\n className={styles.mobileOverlayContainer}\n data-id=\"filter-mobile\"\n data-testid=\"filter-mobile\"\n ref={refs.setFloating}\n >\n <div\n className={styles.mobileContainer}\n ref={nodeRef}\n tabIndex={0}\n >\n <div\n ref={headerRef}\n className={clsx(\n styles.filterHeader,\n isNumber(insets?.top) &&\n styles.filterHeaderWithInsetTop\n )}\n >\n <ClickableIcon\n className={\n filterStyles.filterHeaderButton\n }\n onClick={handleDismiss}\n focusOutline=\"browser\"\n focusHighlight={false}\n aria-label={`close ${labels.title}`}\n >\n <CrossIcon />\n </ClickableIcon>\n <div className={styles.filterTitleGroup}>\n <h2 className={styles.filterTitle}>\n {labels.title}\n </h2>\n <FilterBadge count={count} />\n </div>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>\n {children}\n </div>\n <div\n ref={footerRef}\n className={clsx(\n filterStyles.filterFooter,\n isNumber(insets?.bottom) &&\n filterStyles.filterFooterWithInsetBottom\n )}\n >\n <Button\n className={\n filterStyles.filterDoneButton\n }\n onClick={handleDone}\n >\n {labels.done}\n </Button>\n </div>\n </div>\n </div>\n </FloatingFocusManager>\n </div>\n </Overlay>\n </FilterContext.Provider>\n );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","className","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","headerRef","footerRef","visible","setVisible","useState","useApplyStyle","styles.tokens","filterHeader","insetTop","isNumber","top","filterStyles.tokens","filterFooter","insetBottom","bottom","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","Button","styles.filterButton","styleType","onClick","type","icon","FilterIcon","styles.filterToggleContent","FilterBadge","Overlay","show","disableTransition","styles.floatingWrapper","inert","inertValue","FloatingFocusManager","disabled","styles.mobileOverlayContainer","ref","setFloating","styles.mobileContainer","tabIndex","clsx","styles.filterHeader","styles.filterHeaderWithInsetTop","ClickableIcon","filterStyles.filterHeaderButton","focusOutline","focusHighlight","CrossIcon","styles.filterTitleGroup","styles.filterTitle","styles.filterClearButton","sizeType","filterStyles.filterBody","filterStyles.filterFooter","filterStyles.filterFooterWithInsetBottom","filterStyles.filterDoneButton","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./filter-modal.styles_e0ev97.css");exports.filterButton="fxpov9b",exports.filterClearButton="f14huz7l",exports.filterHeader="f1ijv0o9",exports.filterHeaderWithInsetTop="f50yopa",exports.filterTitle="f15rygha",exports.floatingWrapper="fidypou",exports.mobileContainer="m19agezm",exports.mobileOverlayContainer="m11wuwo8",exports.tokens={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}};
+"use strict";require("./filter-modal.styles_qw3xlg.css");exports.filterButton="flrfycx",exports.filterClearButton="f14zog8f",exports.filterHeader="f1ijv0o9",exports.filterHeaderWithInsetTop="f50yopa",exports.filterTitle="f14huz7l",exports.filterTitleGroup="f15rygha",exports.filterToggleContent="fxpov9b",exports.floatingWrapper="fidypou",exports.mobileContainer="m19agezm",exports.mobileOverlayContainer="m11wuwo8",exports.tokens={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}};
 //# sourceMappingURL=filter-modal.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterHeader: {\n insetTop: \"--fds-internal-filter-filterModalHeader-insetTop\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const mobileContainer = css`\n background-color: ${Colour[\"bg-strong\"]};\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nexport const mobileOverlayContainer = css`\n background-color: ${Colour[\"bg\"]};\n height: 100%;\n width: 100%;\n`;\n\nexport const floatingWrapper = css`\n height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterHeaderWithInsetTop = css`\n ${tokens.filterHeader.insetTop}: initial;\n padding-top: var(${tokens.filterHeader.insetTop});\n`;\n\nexport const filterTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n ~~flex~~: 1;\n ~~text~~-align: center;\n ~~margin~~: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n height: 100%;\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterButton = css`\n width: 100%;\n`;\n"],"names":["filterHeader","insetTop"],"mappings":"~~oGAgEyB~~,oCAVK,~~gCAlBL~~,4CAMY,~~8BAKb~~,~~mCAnBI~~,kCAdA,0CAQO,0BAlBb,CAClBA,aAAc,CACVC,SAAU"}
1	+ {"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterHeader: {\n insetTop: \"--fds-internal-filter-filterModalHeader-insetTop\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const mobileContainer = css`\n background-color: ${Colour[\"bg-strong\"]};\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nexport const mobileOverlayContainer = css`\n background-color: ${Colour[\"bg\"]};\n height: 100%;\n width: 100%;\n`;\n\nexport const floatingWrapper = css`\n height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterHeaderWithInsetTop = css`\n ${tokens.filterHeader.insetTop}: initial;\n padding-top: var(${tokens.filterHeader.insetTop});\n`;\n\nexport const filterTitleGroup = css`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${Spacing[\"spacing-8\"]};\n margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const filterTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const filterToggleContent = css`\n display: inline-flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n height: 100%;\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterButton = css`\n width: 100%;\n`;\n"],"names":["filterHeader","insetTop"],"mappings":"oGA6EyB,oCAVK,gCA/BL,4CAMY,8BAcb,oCATK,uCAcG,kCAjCJ,kCAdA,0CAQO,0BAlBb,CAClBA,aAAc,CACVC,SAAU"}

package/cjs/filter/filter-modal.styles_qw3xlg.css ADDED Viewed

@@ -0,0 +1,10 @@
+.m19agezm{background-color:var(--fds-colour-bg-strong);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;}
+.m11wuwo8{background-color:var(--fds-colour-bg);height:100%;width:100%;}
+.fidypou{height:100%;}
+.f1ijv0o9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fds-colour-bg);}
+.f50yopa{--fds-internal-filter-filterModalHeader-insetTop:initial;padding-top:var(--fds-internal-filter-filterModalHeader-insetTop);}
+.f15rygha{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;gap:var(--fds-spacing-8);margin:var(--fds-spacing-24) 0;}
+.f14huz7l{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);}
+.fxpov9b{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-8);}
+.f14zog8f{background-color:transparent;height:100%;padding:var(--fds-spacing-24) var(--fds-spacing-20);}
+.flrfycx{width:100%;}

package/cjs/filter/filter-sidebar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("clsx"),r=require("react"),i=require("../button/button.js"),a=require("./filter.styles.js"),s=require("./filter-context.js"),d=require("./filter-sidebar.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(l);const o=l=>{var{customLabels:n,onClear:o,clearButtonDisabled:u=!1,children:f,headerTitle:b,className:j}=l,m=e.__rest(l,["customLabels","onClear","clearButtonDisabled","children","headerTitle","className"]);const h=r.useRef(null),v={title:(null==n?void 0:n.headerTitle)||b||"Filters",clear:(null==n?void 0:n.clearButtonLabel)||"Clear"};return t.jsx(s.FilterContext.Provider,{value:{mode:"default",rootNode:h},children:t.jsxs("div",Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:h,className:c.default(d.desktopContainer,j)},m,{children:[t.jsxs("div",{className:d.filterHeader,children:[t.jsx("h2",{className:d.filterTitle,children:v.title}),t.jsx(i.Button,{className:d.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==o?void 0:o(),disabled:u,"aria-label":`clear ${v.title}`,children:v.clear})]}),t.jsx("div",{className:a.filterBody,children:f})]}))})};o.displayName="Filter.Sidebar",exports.FilterSidebar=o;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("clsx"),r=require("react"),i=require("../button/button.js"),s=require("./filter.styles.js"),a=require("./filter-badge.js"),d=require("./filter-context.js"),n=require("./filter-sidebar.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(l);const o=l=>{var{customLabels:c,onClear:o,clearButtonDisabled:f=!1,count:b,children:j,headerTitle:m,className:h}=l,v=e.__rest(l,["customLabels","onClear","clearButtonDisabled","count","children","headerTitle","className"]);const x=r.useRef(null),p={title:(null==c?void 0:c.headerTitle)||m||"Filters",clear:(null==c?void 0:c.clearButtonLabel)||"Clear"};return t.jsx(d.FilterContext.Provider,{value:{mode:"default",rootNode:x},children:t.jsxs("div",Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:x,className:u.default(n.desktopContainer,h)},v,{children:[t.jsxs("div",{className:n.filterHeader,children:[t.jsxs("div",{className:n.filterTitleGroup,children:[t.jsx("h2",{className:n.filterTitle,children:p.title}),t.jsx(a.FilterBadge,{count:b})]}),t.jsx(i.Button,{className:n.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==o?void 0:o(),disabled:f,"aria-label":`clear ${p.title}`,children:p.clear})]}),t.jsx("div",{className:s.filterBody,children:j})]}))})};o.displayName="Filter.Sidebar",exports.FilterSidebar=o;
 //# sourceMappingURL=filter-sidebar.js.map

package/cjs/filter/filter-sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-sidebar.styles\";\nimport type { FilterSidebarProps } from \"./types\";\n\nexport const FilterSidebar = ({\n customLabels,\n onClear,\n clearButtonDisabled = false,\n children,\n headerTitle: _headerTitle,\n className,\n ...otherProps\n}: FilterSidebarProps) => {\n const nodeRef = useRef<HTMLDivElement>(null);\n\n const labels = {\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n return (\n <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n <div\n data-id=\"filter-desktop\"\n data-testid=\"filter-desktop\"\n ref={nodeRef}\n className={clsx(styles.desktopContainer, className)}\n {...otherProps}\n >\n <div className={styles.filterHeader}>\n <h2 className={styles.filterTitle}>{labels.title}</h2>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>{children}</div>\n </div>\n </FilterContext.Provider>\n );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","children","headerTitle","_headerTitle","className","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","Object","assign","ref","clsx","styles.desktopContainer","styles.filterHeader","styles.filterTitle","Button","styles.filterClearButton","styleType","type","sizeType","onClick","disabled","filterStyles.filterBody","displayName"],"mappings":"~~qVASO~~,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,~~SAC3BA~~,EACAC,YAAaC,EAAYC,UACzBA,~~GAASP~~,~~EACNQ,~~EAAUC,~~EAAAA~~,~~OAAAT~~,~~EAPa~~,~~uFAS1B~~,~~MAAMU~~,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,~~OAAOZ~~,aAAY,EAAZA,~~EAAcI~~,cAAeC,GAAgB,UACpDQ,~~OAAOb~~,eAAAA,~~EAAcc~~,mBAAoB,SAG7C,OACIC,~~EAAAA~~,~~IAACC,~~EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASN,SACjEkB,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CAAA,UACY,iBAAgB,cACZ,iBACZC,IAAKf,EACLH,UAAWmB,EAAAA,QAAKC,EAAAA,iBAAyBpB,IACrCC,EAAU,CAAAJ,SAAA,CAEdkB,EAAAA,KAAA,MAAA,CAAKf,UAAWqB,~~EAAAA~~,~~aAAmBxB,~~SAAA,CAC/BY,~~MAAA~~,KAAA,CAAIT,~~UAAWsB~~,EAAAA,~~YAAkBzB~~,SAAGQ,EAAOC,QAC3CG,EAAAA,~~IAACc~~,EAAAA,~~OAAM~~,~~CACHvB~~,~~UAAWwB~~,EAAAA,kBACXC,UAAU,OACVC,KAAK,SACLC,SAAS,QACTC,QAAS,~~IAAMjC~~,aAAO,EAAPA,~~IACfkC~~,~~SAAUjC~~,EAAmB,aACjB,~~SAASS~~,EAAOC,~~QAAOT~~,~~SAElCQ,~~EAAOE,WAGhBE,EAAAA,IAAA,MAAA,CAAKT,~~UAAW8B~~,~~aAAuBjC~~,SAAGA,SAEzB,~~EAIjCL~~,~~EAAcuC~~,YAAc"}
1	+ {"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-sidebar.styles\";\nimport type { FilterSidebarProps } from \"./types\";\n\nexport const FilterSidebar = ({\n customLabels,\n onClear,\n clearButtonDisabled = false,\n count,\n children,\n headerTitle: _headerTitle,\n className,\n ...otherProps\n}: FilterSidebarProps) => {\n const nodeRef = useRef<HTMLDivElement>(null);\n\n const labels = {\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n return (\n <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n <div\n data-id=\"filter-desktop\"\n data-testid=\"filter-desktop\"\n ref={nodeRef}\n className={clsx(styles.desktopContainer, className)}\n {...otherProps}\n >\n <div className={styles.filterHeader}>\n <div className={styles.filterTitleGroup}>\n <h2 className={styles.filterTitle}>{labels.title}</h2>\n <FilterBadge count={count} />\n </div>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>{children}</div>\n </div>\n </FilterContext.Provider>\n );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","count","children","headerTitle","_headerTitle","className","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","Object","assign","ref","clsx","styles.desktopContainer","styles.filterHeader","styles.filterTitleGroup","styles.filterTitle","FilterBadge","Button","styles.filterClearButton","styleType","type","sizeType","onClick","disabled","filterStyles.filterBody","displayName"],"mappings":"oXAUO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,EAAYC,UACzBA,KACGC,EAAUC,SAAAV,EARa,CAAA,eAAA,UAAA,sBAAA,QAAA,WAAA,cAAA,cAU1B,MAAMW,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,OAAOb,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDQ,OAAOd,eAAAA,EAAce,mBAAoB,SAG7C,OACIC,MAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASN,SACjEkB,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CAAA,UACY,iBAAgB,cACZ,iBACZC,IAAKf,EACLH,UAAWmB,EAAAA,QAAKC,EAAAA,iBAAyBpB,IACrCC,EAAU,CAAAJ,SAAA,CAEdkB,EAAAA,KAAA,MAAA,CAAKf,UAAWqB,eAAmBxB,SAAA,CAC/BkB,EAAAA,YAAKf,UAAWsB,EAAAA,iBAAuBzB,SAAA,CACnCY,EAAAA,IAAA,KAAA,CAAIT,UAAWuB,EAAAA,YAAkB1B,SAAGQ,EAAOC,QAC3CG,EAAAA,IAACe,EAAAA,YAAW,CAAC5B,MAAOA,OAExBa,EAAAA,IAACgB,SAAM,CACHzB,UAAW0B,EAAAA,kBACXC,UAAU,OACVC,KAAK,SACLC,SAAS,QACTC,QAAS,IAAMpC,aAAO,EAAPA,IACfqC,SAAUpC,EAAmB,aACjB,SAASU,EAAOC,iBAE3BD,EAAOE,WAGhBE,EAAAA,IAAA,MAAA,CAAKT,UAAWgC,EAAAA,WAAuBnC,SAAGA,SAEzB,EAIjCN,EAAc0C,YAAc"}

package/cjs/filter/filter-sidebar.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./filter-sidebar.styles_cwvqql.css");exports.desktopContainer="d1a2pl71",exports.filterClearButton="f1i4s84l",exports.filterHeader="fq9unar",exports.filterTitle="fjfy2r5";
+"use strict";require("./filter-sidebar.styles_1otwpjl.css");exports.desktopContainer="d1a2pl71",exports.filterClearButton="f122t6n9",exports.filterHeader="fq9unar",exports.filterTitle="f1i4s84l",exports.filterTitleGroup="fjfy2r5";
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/cjs/filter/filter-sidebar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const desktopContainer = css`\n background-color: ${Colour[\"bg\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n overflow: hidden;\n width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const ~~filterTitle~~ = css`\n ${~~Font~~[\"~~heading~~-~~xs-semibold~~\"]}~~\n flex: 1~~;\n margin: ${Spacing[\"spacing-24\"]} 0~~;\n margin-left:~~ ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n padding-right: ${Spacing[\"spacing-20\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n height: 100%;\n`;\n"],"names":[],"mappings":"~~0GAQ6B~~,~~qCA0BC~~,~~gCAdL~~,~~8BAOD~~"}
1	+ {"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const desktopContainer = css`\n background-color: ${Colour[\"bg\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n overflow: hidden;\n width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n color: ${Colour[\"text\"]};\n`;\n\nexport const filterTitleGroup = css`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: ${Spacing[\"spacing-8\"]};\n margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n padding-right: ${Spacing[\"spacing-20\"]};\n padding-left: ${Spacing[\"spacing-20\"]};\n height: 100%;\n`;\n"],"names":[],"mappings":"2GAQ6B,qCAkCC,gCAtBL,8BAkBD,oCAVK"}

package/cjs/filter/filter-sidebar.styles_1otwpjl.css ADDED Viewed

@@ -0,0 +1,5 @@
+.d1a2pl71{background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);overflow:hidden;width:100%;}
+.fq9unar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
+.fjfy2r5{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;gap:var(--fds-spacing-8);margin:var(--fds-spacing-24) 0 var(--fds-spacing-24) var(--fds-spacing-20);}
+.f1i4s84l{font-family:var(--fds-font-family-heading);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.f122t6n9{background-color:transparent;padding-right:var(--fds-spacing-20);padding-left:var(--fds-spacing-20);height:100%;}

package/cjs/filter/filter.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./filter.styles_2fmaok.css");exports.filterBody="fh4ozpc",exports.filterDoneButton="f1iv2dy9",exports.filterFooter="fp6e1r1",exports.filterFooterWithInsetBottom="f8nn92t",exports.filterHeaderButton="f3bn9l4",exports.tokens={filterFooter:{insetBottom:"--fds-internal-filter-filterFooter-insetBottom"}};
+"use strict";require("./filter.styles_1ykijwm.css");exports.filterBody="fh4ozpc",exports.filterDoneButton="f1iv2dy9",exports.filterFooter="fp6e1r1",exports.filterFooterWithInsetBottom="f8nn92t",exports.filterHeaderButton="f3bn9l4",exports.tokens={filterFooter:{insetBottom:"--fds-internal-filter-filterFooter-insetBottom"}};
 //# sourceMappingURL=filter.styles.js.map

package/cjs/filter/filter.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterFooter: {\n insetBottom: \"--fds-internal-filter-filterFooter-insetBottom\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const filterBody = css`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeaderButton = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterFooter = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const filterFooterWithInsetBottom = css`\n ${tokens.filterFooter.insetBottom}: initial;\n padding-bottom: var(${tokens.filterFooter.insetBottom});\n`;\n\nexport const filterDoneButton = css`\n width: 100%;\n`;\n"],"names":["filterFooter","insetBottom"],"mappings":"~~4FAcuB~~,~~mCAwCM~~,gCAXJ,8CAMe,qCAzBT,~~yBApBT~~,CAClBA,aAAc,CACVC,YAAa"}
1	+ {"version":3,"file":"filter.styles.js","sources":["../../../src/filter/filter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterFooter: {\n insetBottom: \"--fds-internal-filter-filterFooter-insetBottom\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const filterBody = css`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeaderButton = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterFooter = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const filterFooterWithInsetBottom = css`\n ${tokens.filterFooter.insetBottom}: initial;\n padding-bottom: var(${tokens.filterFooter.insetBottom});\n`;\n\nexport const filterDoneButton = css`\n width: 100%;\n`;\n"],"names":["filterFooter","insetBottom"],"mappings":"6FAcuB,mCAyCM,gCAXJ,8CAMe,qCAzBT,yBArBT,CAClBA,aAAc,CACVC,YAAa"}

package/cjs/filter/{filter.styles_2fmaok.css → filter.styles_1ykijwm.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.fh4ozpc{-webkit-flex:1;-ms-flex:1;flex:1;width:100%;overflow-y:auto;}
+.fh4ozpc{-webkit-flex:1;-ms-flex:1;flex:1;width:100%;overflow-y:auto;color:var(--fds-colour-text);}
 .f3bn9l4{padding:var(--fds-spacing-24) var(--fds-spacing-20);margin-right:auto;color:var(--fds-colour-icon);}.f3bn9l4 svg{height:1.5rem;width:1.5rem;}.f3bn9l4:hover{color:var(--fds-colour-icon-hover);}
 .fp6e1r1{padding:var(--fds-spacing-24) var(--fds-spacing-20);background-color:var(--fds-colour-bg);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .f8nn92t{--fds-internal-filter-filterFooter-insetBottom:initial;padding-bottom:var(--fds-internal-filter-filterFooter-insetBottom);}

package/cjs/form/form-label.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./form-label.styles_rk98yd.css");exports.errorIcon="eyg2zu6",exports.errorMessage="e39ds6s",exports.errorMessageContainer="e4aab9k",exports.label="lf1tnj",exports.labelContainer="l170pjsx",exports.subtitle="s1n6ixex";
+"use strict";require("./form-label.styles_11r0652.css");exports.errorIcon="eyg2zu6",exports.errorMessage="e39ds6s",exports.errorMessageContainer="e4aab9k",exports.label="lf1tnj",exports.labelContainer="l170pjsx",exports.subtitle="s1n6ixex";
 //# sourceMappingURL=form-label.styles.js.map

package/cjs/form/form-label.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-label.styles.js","sources":["../../../src/form/form-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const labelContainer = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const label = css`\n color: ${Colour[\"text-subtle\"]};\n display: inline-block;\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const errorMessageContainer = css`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorMessage = css`\n color: ${Colour[\"text-error\"]};\n ${Font[\"body-sm-semibold\"]}\n margin-bottom: 0;\n outline: none;\n`;\n\nexport const subtitle = css`\n ${Font[\"form-description\"]}\n color: ${Colour[\"text-subtler\"]};\n display: block;\n`;\n"],"names":[],"mappings":"~~6FAkBsB~~,+BAcG,wCAPS,wBAdhB,gCAJS,4BAgCN"}
1	+ {"version":3,"file":"form-label.styles.js","sources":["../../../src/form/form-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const labelContainer = css`\n margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const label = css`\n color: ${Colour[\"text-subtle\"]};\n display: inline-block;\n ${Font[\"form-label\"]}\n font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorIcon = css`\n height: 1lh;\n width: 1em;\n flex-shrink: 0;\n color: ${Colour[\"icon-error-strong\"]};\n`;\n\nexport const errorMessageContainer = css`\n ${Font[\"body-sm-semibold\"]}\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorMessage = css`\n color: ${Colour[\"text-error\"]};\n ${Font[\"body-sm-semibold\"]}\n margin-bottom: 0;\n outline: none;\n`;\n\nexport const subtitle = css`\n ${Font[\"form-description\"]}\n color: ${Colour[\"text-subtler\"]};\n display: block;\n`;\n"],"names":[],"mappings":"8FAkBsB,+BAcG,wCAPS,wBAdhB,gCAJS,4BAgCN"}

package/cjs/form/form-label.styles_11r0652.css ADDED Viewed

@@ -0,0 +1,6 @@
+.l170pjsx{margin-bottom:var(--fds-spacing-8);}
+.lf1tnj{color:var(--fds-colour-text-subtle);display:inline-block;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-label-size);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-form-label-lh);letter-spacing:var(--fds-font-form-label-ls);font-weight:var(--fds-font-weight-semibold);}
+.eyg2zu6{height:1lh;width:1em;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-error-strong);}
+.e4aab9k{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-4);margin-top:var(--fds-spacing-8);}
+.e39ds6s{color:var(--fds-colour-text-error);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);margin-bottom:0;outline:none;}
+.s1n6ixex{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-form-description-size);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-form-description-lh);letter-spacing:var(--fds-font-form-description-ls);color:var(--fds-colour-text-subtler);display:block;}

package/cjs/form/form-wrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),l=require("../layout/col-div.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("./form-label.js"),i=require("./form-wrapper.styles.js");exports.FormWrapper=({label:t,errorMessage:o,id:d,children:n,layoutType:u,xxsCols:c,xsCols:m,smCols:x,mdCols:b,lgCols:j,xlCols:g,xxlCols:C,"data-testid":p,"data-error-testid":v})=>{const f=!u&&(c||m||x||b||j||g||C)?"grid":u||"flex",h="string"==typeof o?o.trim():o,y=s.useId(),q=`${null!=d?d:y}-label`,$=`${null!=d?d:y}-label-subtitle`,F=`${null!=d?d:y}-error-message`;const w=(e=>{switch(e){case"grid":return l.ColDiv;case"flex":return"div"}})(f);return e.jsxs(w,Object.assign({className:i.container,"data-testid":p},(e=>{switch(e){case"grid":return{xxsCols:c,xsCols:m,smCols:x,mdCols:b,lgCols:j,xlCols:g,xxlCols:C};case"flex":return}})(f),{children:[t&&("string"==typeof t?e.jsx(a.FormLabel,{htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:q,children:t}):e.jsx(a.FormLabel,Object.assign({htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:q},t))),(()=>{const e={"aria-invalid":!!o,"aria-describedby":[h?F:void 0,"object"==typeof t&&(null==t?void 0:t.subtitle)?$:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":t?q:void 0};return r.Children.map(n,(l=>r.cloneElement(l,e)))})(),h&&e.jsx(a.FormErrorMessage,{id:F,tabIndex:0,"data-testid":null!=v?v:d?`${d}-error-message`:"error-message",children:h})]}))};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),l=require("../layout/col-div.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("./form-label.js"),t=require("./form-wrapper.styles.js");exports.FormWrapper=({label:i,errorMessage:o,id:d,children:n,layoutType:u,xxsCols:c,xsCols:m,smCols:x,mdCols:b,lgCols:j,xlCols:g,xxlCols:C,"data-testid":p,"data-error-testid":v})=>{const y=!u&&(c||m||x||b||j||g||C)?"grid":u||"flex",f="string"==typeof o?o.trim():o,h=s.useId(),q=`${null!=d?d:h}-label`,$=`${null!=d?d:h}-label-subtitle`,F=`${null!=d?d:h}-error-message`;const E=(e=>{switch(e){case"grid":return l.ColDiv;case"flex":return"div"}})(y);return e.jsxs(E,Object.assign({className:t.container,"data-testid":p},(e=>{switch(e){case"grid":return{xxsCols:c,xsCols:m,smCols:x,mdCols:b,lgCols:j,xlCols:g,xxlCols:C};case"flex":return}})(y),{children:[i&&("string"==typeof i?e.jsx(a.FormLabel,{htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:q,children:i}):e.jsx(a.FormLabel,Object.assign({htmlFor:`${d}-base`,"data-testid":d?`${d}-label`:"form-label",id:q},i))),(()=>{const e={"aria-invalid":!!o,"aria-describedby":[f?F:void 0,"object"==typeof i&&(null==i?void 0:i.subtitle)?$:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":i?q:void 0};return r.Children.map(n,(l=>r.isValidElement(l)&&l.type===r.Fragment?r.cloneElement(l):r.cloneElement(l,e)))})(),f&&e.jsx(a.FormErrorMessage,{id:F,tabIndex:0,"data-testid":null!=v?v:d?`${d}-error-message`:"error-message",children:f})]}))};
 //# sourceMappingURL=form-wrapper.js.map

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

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

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

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