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

package/filter/filter-badge.d.ts

@@ -0,0 +1,5 @@
+interface FilterBadgeProps {
+    count?: number;
+}
+export declare const FilterBadge: ({ count }: FilterBadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/filter/filter-badge.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{Badge as r}from"../badge/badge.js";const t=({count:t})=>void 0!==t&&t>0?e(r,{count:t,variant:"square-number","aria-label":`${t} selected`}):null;export{t as FilterBadge};
+//# sourceMappingURL=filter-badge.js.map

package/filter/filter-badge.js.map

@@ -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":["FilterBadge","count","undefined","_jsx","Badge","variant"],"mappings":"kFAMO,MAAMA,EAAc,EAAGC,gBAChBC,IAAVD,GAAuBA,EAAQ,EAC3BE,EAACC,EAAK,CACFH,MAAOA,EACPI,QAAQ,6BACI,GAAGJ,eAEnB"}

package/filter/filter-item-page.d.ts

@@ -1,5 +1,5 @@
 import type { FilterPageProps } from "./types";
 export declare const FilterItemPage: {
-    ({ onDismiss, onDone, children, }: FilterPageProps): import("react/jsx-runtime").JSX.Element;
+    ({ onDismiss, onDone, children, "data-testid": dataTestId, }: FilterPageProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/filter/filter-item-page.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"filter-item-page.js","sources":["../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\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":"oaAQO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,cAGIC,EAAA,MAAA,CAAKC,UAAWC,EAA8BH,SAAA,CAC1CI,EAACC,EAAa,CACVH,UAAWI,EACXC,QAAST,EACTU,aAAa,UACbC,gBAAgB,eACL,UAAST,SAEpBI,EAACM,QAELN,EAAA,MAAA,CAAKF,UAAWS,WAA0BX,IAC1CI,EAAA,MAAA,CAAKF,UAAWU,WACZR,EAACS,EAAM,CACHX,UAAWY,EACXP,QAASR,EACTgB,KAAK,SAAQf,SAAA,cASjCH,EAAemB,YAAc"}
+{"version":3,"file":"filter-item-page.js","sources":["../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as filterStyles from \"./filter.styles\";\nimport * as styles from \"./filter-item-page.styles\";\nimport type { FilterPageProps } from \"./types\";\n\nexport const FilterItemPage = ({\n    onDismiss,\n    onDone,\n    children,\n    \"data-testid\": dataTestId,\n}: FilterPageProps) => {\n    return (\n        <div\n            className={styles.filterItemPageContainer}\n            data-testid={dataTestId}\n        >\n            <ClickableIcon\n                className={filterStyles.filterHeaderButton}\n                onClick={onDismiss}\n                focusOutline=\"browser\"\n                focusHighlight={false}\n                aria-label=\"Dismiss\"\n            >\n                <ChevronLeftIcon />\n            </ClickableIcon>\n            <div className={filterStyles.filterBody}>{children}</div>\n            <div className={filterStyles.filterFooter}>\n                <Button\n                    className={filterStyles.filterDoneButton}\n                    onClick={onDone}\n                    type=\"button\"\n                >\n                    Done\n                </Button>\n            </div>\n        </div>\n    );\n};\n\nFilterItemPage.displayName = \"Filter.Page\";\n"],"names":["FilterItemPage","onDismiss","onDone","children","dataTestId","_jsxs","className","styles.filterItemPageContainer","_jsx","ClickableIcon","filterStyles.filterHeaderButton","onClick","focusOutline","focusHighlight","ChevronLeftIcon","filterStyles.filterBody","filterStyles.filterFooter","Button","filterStyles.filterDoneButton","type","displayName"],"mappings":"oaAQO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,WACA,cAAeC,KAGXC,EAAA,MAAA,CACIC,UAAWC,EAA8B,cAC5BH,YAEbI,EAACC,EAAa,CACVH,UAAWI,EACXC,QAASV,EACTW,aAAa,UACbC,gBAAgB,EAAK,aACV,UAASV,SAEpBK,EAACM,EAAe,CAAA,KAEpBN,EAAA,MAAA,CAAKF,UAAWS,WAA0BZ,IAC1CK,EAAA,MAAA,CAAKF,UAAWU,WACZR,EAACS,EAAM,CACHX,UAAWY,EACXP,QAAST,EACTiB,KAAK,SAAQhB,SAAA,cASjCH,EAAeoB,YAAc"}

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

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

package/filter/filter-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item.js","sources":["../../src/filter/filter-item.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { useId } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    className,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min((contentResizeDetector.height ?? 0) * 0.5, 216)\n        : contentResizeDetector.height;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const titleId = `${internalId}-title`;\n    const minimisableContentRef = useRef<HTMLDivElement | null>(null);\n\n    useApplyStyle(minimisableContentRef, {\n        [styles.tokens.minimisableContent.height]: contentHeight\n            ? `${contentHeight}px`\n            : null,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <div\n            aria-labelledby={titleId}\n            className={clsx(\n                styles.filterItemWrapper,\n                (collapsible || isMobile) && styles.filterItemWrapperDarker\n            )}\n        >\n            <div\n                className={clsx(\n                    styles.divider,\n                    (isMobile ? showMobileDivider : showDivider) &&\n                        styles.dividerVisible,\n                    isMobile && styles.dividerMobile\n                )}\n            />\n            {(title || collapsible) && (\n                <div\n                    className={clsx(\n                        styles.filterItemHeader,\n                        isMobile && styles.filterItemHeaderMobile\n                    )}\n                >\n                    {title && (\n                        <h3\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            className={clsx(\n                                styles.filterItemTitle,\n                                isMobile && styles.filterItemTitleMobile\n                            )}\n                        >\n                            {title} {addon && renderAddon()}\n                        </h3>\n                    )}\n                    {collapsible && (\n                        <ClickableIcon\n                            className={styles.filterItemExpandButton}\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronDownIcon\n                                aria-hidden\n                                className={clsx(\n                                    styles.chevronIcon,\n                                    expanded && styles.chevronIconExpanded\n                                )}\n                            />\n                        </ClickableIcon>\n                    )}\n                </div>\n            )}\n            <animated.div\n                className={styles.expandableItem}\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <div\n                        className={clsx(styles.filterItemBody, className)}\n                        {...otherProps}\n                    >\n                        <div\n                            ref={minimisableContentRef}\n                            data-testid=\"minimisable-container\"\n                            className={clsx(\n                                styles.minimisableContent,\n                                minimisable &&\n                                    styles.minimisableContentMinimisable\n                            )}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </div>\n                        {minimisable && (\n                            <Button\n                                className={styles.filterItemMinimiseButton}\n                                data-id=\"minimise-button\"\n                                sizeType=\"small\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </Button>\n                        )}\n                    </div>\n                </div>\n            </animated.div>\n        </div>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","className","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useId","contentId","titleId","minimisableContentRef","useRef","useApplyStyle","styles.tokens","minimisableContent","useEffect","isNil","_jsxs","clsx","styles.filterItemWrapper","styles.filterItemWrapperDarker","_jsx","styles.divider","styles.dividerVisible","styles.dividerMobile","styles.filterItemHeader","styles.filterItemHeaderMobile","id","styles.filterItemTitle","styles.filterItemTitleMobile","type","PopoverAddon","undefined","ClickableIcon","styles.filterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","animated","div","styles.expandableItem","style","inert","inertValue","ref","Object","assign","styles.filterItemBody","styles.minimisableContent","styles.minimisableContentMinimisable","minimised","Button","styles.filterItemMinimiseButton","sizeType","styleType","displayName"],"mappings":"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"}
+{"version":3,"file":"filter-item.js","sources":["../../src/filter/filter-item.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { useId } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nconst DEFAULT_MINIMISED_HEIGHT_CAP = 216;\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    className,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min(\n              (contentResizeDetector.height ?? 0) * 0.5,\n              DEFAULT_MINIMISED_HEIGHT_CAP\n          )\n        : contentResizeDetector.height;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const titleId = `${internalId}-title`;\n    const minimisableContentRef = useRef<HTMLDivElement | null>(null);\n\n    useApplyStyle(minimisableContentRef, {\n        [styles.tokens.minimisableContent.height]: contentHeight\n            ? `${contentHeight}px`\n            : null,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <div\n            aria-labelledby={titleId}\n            className={clsx(\n                styles.filterItemWrapper,\n                (collapsible || isMobile) && styles.filterItemWrapperDarker\n            )}\n        >\n            <div\n                className={clsx(\n                    styles.divider,\n                    (isMobile ? showMobileDivider : showDivider) &&\n                        styles.dividerVisible,\n                    isMobile && styles.dividerMobile\n                )}\n            />\n            {(title || collapsible) && (\n                <div\n                    className={clsx(\n                        styles.filterItemHeader,\n                        isMobile && styles.filterItemHeaderMobile\n                    )}\n                >\n                    {title && (\n                        <h3\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            className={clsx(\n                                styles.filterItemTitle,\n                                isMobile && styles.filterItemTitleMobile\n                            )}\n                        >\n                            {title} {addon && renderAddon()}\n                        </h3>\n                    )}\n                    {collapsible && (\n                        <ClickableIcon\n                            className={styles.filterItemExpandButton}\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronDownIcon\n                                aria-hidden\n                                className={clsx(\n                                    styles.chevronIcon,\n                                    expanded && styles.chevronIconExpanded\n                                )}\n                            />\n                        </ClickableIcon>\n                    )}\n                </div>\n            )}\n            <animated.div\n                className={styles.expandableItem}\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <div\n                        className={clsx(styles.filterItemBody, className)}\n                        {...otherProps}\n                    >\n                        <div\n                            ref={minimisableContentRef}\n                            data-testid=\"minimisable-container\"\n                            className={clsx(\n                                styles.minimisableContent,\n                                minimisable &&\n                                    styles.minimisableContentMinimisable\n                            )}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </div>\n                        {minimisable && (\n                            <Button\n                                className={styles.filterItemMinimiseButton}\n                                data-id=\"minimise-button\"\n                                sizeType=\"small\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </Button>\n                        )}\n                    </div>\n                </div>\n            </animated.div>\n        </div>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","className","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useId","contentId","titleId","minimisableContentRef","useRef","useApplyStyle","styles.tokens","minimisableContent","useEffect","isNil","_jsxs","clsx","styles.filterItemWrapper","styles.filterItemWrapperDarker","_jsx","styles.divider","styles.dividerVisible","styles.dividerMobile","styles.filterItemHeader","styles.filterItemHeaderMobile","id","styles.filterItemTitle","styles.filterItemTitleMobile","type","PopoverAddon","undefined","ClickableIcon","styles.filterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","animated","div","styles.expandableItem","style","inert","inertValue","ref","Object","assign","styles.filterItemBody","styles.minimisableContent","styles.minimisableContentMinimisable","minimised","Button","styles.filterItemMinimiseButton","sizeType","styleType","displayName"],"mappings":"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"}

package/filter/filter-item.styles.js

@@ -1,2 +1,2 @@
-import"./filter-item.styles_1e3v6qq.css";const e={minimisableContent:{height:"--fds-internal-filter-minimisableContent-height"}},i="f1afprn0",f="fo96iku",t="d136l108",n="d89ue12",l="d4x3x5q",m="f1eimp3e",o="f1b5woey",s="fe52bn7",r="cjime8m",p="cl88d88",a="fxnpooo",c="f9puapc",d="eqgs6og",q="fu0jz3r",b="m1n17l6q",g="my7z4fl",h="fw516jj";export{r as chevronIcon,p as chevronIconExpanded,t as divider,l as dividerMobile,n as dividerVisible,d as expandableItem,q as filterItemBody,s as filterItemExpandButton,m as filterItemHeader,o as filterItemHeaderMobile,h as filterItemMinimiseButton,a as filterItemTitle,c as filterItemTitleMobile,i as filterItemWrapper,f as filterItemWrapperDarker,b as minimisableContent,g as minimisableContentMinimisable,e as tokens};
+import"./filter-item.styles_cphjnj.css";const e={minimisableContent:{height:"--fds-internal-filter-minimisableContent-height"}},i="f1afprn0",f="fo96iku",t="d136l108",n="d89ue12",l="d4x3x5q",m="f1eimp3e",o="f1b5woey",s="fe52bn7",p="cjime8m",r="cl88d88",c="fxnpooo",j="f9puapc",a="eqgs6og",d="fu0jz3r",h="m1n17l6q",b="my7z4fl",g="fw516jj";export{p as chevronIcon,r as chevronIconExpanded,t as divider,l as dividerMobile,n as dividerVisible,a as expandableItem,d as filterItemBody,s as filterItemExpandButton,m as filterItemHeader,o as filterItemHeaderMobile,g as filterItemMinimiseButton,c as filterItemTitle,j as filterItemTitleMobile,i as filterItemWrapper,f as filterItemWrapperDarker,h as minimisableContent,b as minimisableContentMinimisable,e as tokens};
 //# sourceMappingURL=filter-item.styles.js.map

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

@@ -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":["tokens","minimisableContent","height","filterItemWrapper","filterItemWrapperDarker","divider","dividerVisible","dividerMobile","filterItemHeader","filterItemHeaderMobile","filterItemExpandButton","chevronIcon","chevronIconExpanded","filterItemTitle","filterItemTitleMobile","expandableItem","filterItemBody","minimisableContentMinimisable","filterItemMinimiseButton"],"mappings":"+DAIO,MAAMA,EAAS,CAClBC,mBAAoB,CAChBC,OAAQ,oDAQHC,EAAiB,WAIjBC,EAAuB,UAIvBC,EAAO,WAMPC,EAAc,UAIdC,EAAa,UAQbC,EAAgB,WAOhBC,EAAsB,WAItBC,EAAsB,UAStBC,EAAW,UAQXC,EAAmB,UAInBC,EAAe,UAQfC,EAAqB,UAYrBC,EAAc,UAIdC,EAAc,UAIdf,EAAkB,WAKlBgB,EAA6B,UAI7BC,EAAwB"}
+{"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":["tokens","minimisableContent","height","filterItemWrapper","filterItemWrapperDarker","divider","dividerVisible","dividerMobile","filterItemHeader","filterItemHeaderMobile","filterItemExpandButton","chevronIcon","chevronIconExpanded","filterItemTitle","filterItemTitleMobile","expandableItem","filterItemBody","minimisableContentMinimisable","filterItemMinimiseButton"],"mappings":"8DAIO,MAAMA,EAAS,CAClBC,mBAAoB,CAChBC,OAAQ,oDAQHC,EAAiB,WAIjBC,EAAuB,UAIvBC,EAAO,WAMPC,EAAc,UAIdC,EAAa,UAQbC,EAAgB,WAOhBC,EAAsB,WAItBC,EAAsB,UAStBC,EAAW,UAQXC,EAAmB,UAInBC,EAAe,UAQfC,EAAqB,UAYrBC,EAAc,UAIdC,EAAc,UAIdf,EAAkB,WAKlBgB,EAA6B,UAI7BC,EAAwB"}

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

@@ -1,4 +1,4 @@
-.f1afprn0{background-color:var(--fds-colour-bg);}
+@layer fds{.f1afprn0{background-color:var(--fds-colour-bg);}
 .fo96iku{background-color:var(--fds-colour-bg-strong);}
 .d136l108{display:none;height:1px;background-color:var(--fds-colour-border);}
 .d89ue12{display:block;}
@@ -8,10 +8,10 @@
 .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);}
 .my7z4fl{overflow:hidden;}
-.fw516jj{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 0 0;}
+.fw516jj{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 0 0;}}

package/filter/filter-modal.d.ts

@@ -1,5 +1,5 @@
 import type { FilterModalProps } from "./types";
 export declare const FilterModal: {
-    ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: FilterModalProps): import("react/jsx-runtime").JSX.Element;
+    ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: FilterModalProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/filter/filter-modal.js

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

package/filter/filter-modal.js.map

@@ -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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"}
+{"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/filter/filter-modal.styles.d.ts

@@ -8,6 +8,8 @@ export declare const mobileOverlayContainer: import("@linaria/core").LinariaClas
 export declare const floatingWrapper: import("@linaria/core").LinariaClassName;
 export declare const filterHeader: import("@linaria/core").LinariaClassName;
 export declare const filterHeaderWithInsetTop: import("@linaria/core").LinariaClassName;
+export declare const filterTitleGroup: import("@linaria/core").LinariaClassName;
 export declare const filterTitle: import("@linaria/core").LinariaClassName;
+export declare const filterToggleContent: import("@linaria/core").LinariaClassName;
 export declare const filterClearButton: import("@linaria/core").LinariaClassName;
 export declare const filterButton: import("@linaria/core").LinariaClassName;

package/filter/filter-modal.styles.js

@@ -1,2 +1,2 @@
-import"./filter-modal.styles_e0ev97.css";const e={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}},f="m19agezm",o="m11wuwo8",t="fidypou",i="f1ijv0o9",r="f50yopa",l="f15rygha",a="f14huz7l",s="fxpov9b";export{s as filterButton,a as filterClearButton,i as filterHeader,r as filterHeaderWithInsetTop,l as filterTitle,t as floatingWrapper,f as mobileContainer,o as mobileOverlayContainer,e as tokens};
+import"./filter-modal.styles_qw3xlg.css";const f={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}},e="m19agezm",o="m11wuwo8",l="fidypou",r="f1ijv0o9",t="f50yopa",i="f15rygha",a="f14huz7l",s="fxpov9b",p="f14zog8f",d="flrfycx";export{d as filterButton,p as filterClearButton,r as filterHeader,t as filterHeaderWithInsetTop,a as filterTitle,i as filterTitleGroup,s as filterToggleContent,l as floatingWrapper,e as mobileContainer,o as mobileOverlayContainer,f as tokens};
 //# sourceMappingURL=filter-modal.styles.js.map

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

@@ -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":["tokens","filterHeader","insetTop","mobileContainer","mobileOverlayContainer","floatingWrapper","filterHeaderWithInsetTop","filterTitle","filterClearButton","filterButton"],"mappings":"+DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,SAAU,qDAQLC,EAAe,WAQfC,EAAsB,WAMtBC,EAAe,UAQfJ,EAAY,WAMZK,EAAwB,UAKxBC,EAAW,WAOXC,EAAiB,WAUjBC,EAAY"}
+{"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":["tokens","filterHeader","insetTop","mobileContainer","mobileOverlayContainer","floatingWrapper","filterHeaderWithInsetTop","filterTitleGroup","filterTitle","filterToggleContent","filterClearButton","filterButton"],"mappings":"+DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,SAAU,qDAQLC,EAAe,WAQfC,EAAsB,WAMtBC,EAAe,UAQfJ,EAAY,WAMZK,EAAwB,UAKxBC,EAAgB,WAShBC,EAAW,WAKXC,EAAmB,UAMnBC,EAAiB,WAUjBC,EAAY"}

package/filter/filter-modal.styles_qw3xlg.css

@@ -0,0 +1,10 @@
+@layer fds{.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/filter/filter-sidebar.d.ts

@@ -1,5 +1,5 @@
 import type { FilterSidebarProps } from "./types";
 export declare const FilterSidebar: {
-    ({ customLabels, onClear, clearButtonDisabled, children, headerTitle: _headerTitle, className, ...otherProps }: FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
+    ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, className, ...otherProps }: FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/filter/filter-sidebar.js

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

package/filter/filter-sidebar.js.map

@@ -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":"6ZASO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,EAAYC,UACzBA,GAASP,EACNQ,EAAUC,EAAAT,EAPa,uFAS1B,MAAMU,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDQ,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASN,SACjEkB,EAAA,MAAAC,OAAAC,OAAA,CAAA,UACY,iBAAgB,cACZ,iBACZC,IAAKf,EACLH,UAAWmB,EAAKC,EAAyBpB,IACrCC,EAAU,CAAAJ,SAAA,CAEdkB,EAAA,MAAA,CAAKf,UAAWqB,EAAmBxB,SAAA,CAC/BY,EAAA,KAAA,CAAIT,UAAWsB,EAAkBzB,SAAGQ,EAAOC,QAC3CG,EAACc,EAAM,CACHvB,UAAWwB,EACXC,UAAU,OACVC,KAAK,SACLC,SAAS,QACTC,QAAS,IAAMjC,aAAO,EAAPA,IACfkC,SAAUjC,EAAmB,aACjB,SAASS,EAAOC,QAAOT,SAElCQ,EAAOE,WAGhBE,EAAA,MAAA,CAAKT,UAAW8B,EAAuBjC,SAAGA,SAEzB,EAIjCL,EAAcuC,YAAc"}
+{"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":"meAUO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,EAAYC,UACzBA,KACGC,EAAUC,EAAAV,EARa,CAAA,eAAA,UAAA,sBAAA,QAAA,WAAA,cAAA,cAU1B,MAAMW,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOb,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDQ,OAAOd,eAAAA,EAAce,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASN,SACjEkB,EAAA,MAAAC,OAAAC,OAAA,CAAA,UACY,iBAAgB,cACZ,iBACZC,IAAKf,EACLH,UAAWmB,EAAKC,EAAyBpB,IACrCC,EAAU,CAAAJ,SAAA,CAEdkB,EAAA,MAAA,CAAKf,UAAWqB,EAAmBxB,SAAA,CAC/BkB,SAAKf,UAAWsB,EAAuBzB,SAAA,CACnCY,EAAA,KAAA,CAAIT,UAAWuB,EAAkB1B,SAAGQ,EAAOC,QAC3CG,EAACe,EAAW,CAAC5B,MAAOA,OAExBa,EAACgB,EAAM,CACHzB,UAAW0B,EACXC,UAAU,OACVC,KAAK,SACLC,SAAS,QACTC,QAAS,IAAMpC,aAAO,EAAPA,IACfqC,SAAUpC,EAAmB,aACjB,SAASU,EAAOC,iBAE3BD,EAAOE,WAGhBE,EAAA,MAAA,CAAKT,UAAWgC,EAAuBnC,SAAGA,SAEzB,EAIjCN,EAAc0C,YAAc"}

package/filter/filter-sidebar.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const desktopContainer: import("@linaria/core").LinariaClassName;
 export declare const filterHeader: import("@linaria/core").LinariaClassName;
+export declare const filterTitleGroup: import("@linaria/core").LinariaClassName;
 export declare const filterTitle: import("@linaria/core").LinariaClassName;
 export declare const filterClearButton: import("@linaria/core").LinariaClassName;

package/filter/filter-sidebar.styles.js

@@ -1,2 +1,2 @@
-import"./filter-sidebar.styles_cwvqql.css";const r="d1a2pl71",s="fq9unar",f="fjfy2r5",l="f1i4s84l";export{r as desktopContainer,l as filterClearButton,s as filterHeader,f as filterTitle};
+import"./filter-sidebar.styles_1otwpjl.css";const t="d1a2pl71",f="fq9unar",r="fjfy2r5",s="f1i4s84l",l="f122t6n9";export{t as desktopContainer,l as filterClearButton,f as filterHeader,s as filterTitle,r as filterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/filter/filter-sidebar.styles.js.map

@@ -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":["desktopContainer","filterHeader","filterTitle","filterClearButton"],"mappings":"iEAQO,MAAMA,EAAgB,WAYhBC,EAAY,UAOZC,EAAW,UAOXC,EAAiB"}
+{"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":["desktopContainer","filterHeader","filterTitleGroup","filterTitle","filterClearButton"],"mappings":"kEAQO,MAAMA,EAAgB,WAYhBC,EAAY,UAQZC,EAAgB,UAUhBC,EAAW,WAIXC,EAAiB"}

package/filter/filter-sidebar.styles_1otwpjl.css

@@ -0,0 +1,5 @@
+@layer fds{.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/filter/filter.d.ts

@@ -1,22 +1,43 @@
 import type { FilterProps } from "./types";
+/**
+ * A responsive filter panel that switches between a persistent sidebar on
+ * desktop and a modal overlay on mobile.
+ *
+ * Use `Filter` to let users narrow a result set by one or more criteria.
+ * On mobile (below lg breakpoint) the panel is hidden behind a toggle button and
+ * rendered in a full-screen modal; otherwise it is displayed as a
+ * fixed sidebar.
+ *
+ * Sub-components:
+ * - `Filter.Sidebar` — standalone desktop sidebar, used by `Filter` internally.
+ * - `Filter.Modal` — standalone mobile modal, used by `Filter` internally.
+ * - `Filter.Item` — a collapsible section within the panel.
+ * - `Filter.Page` — a drill-down sub-page inside the mobile modal.
+ * - `Filter.Checkbox` — a filter item with selectable checkbox or toggle options.
+ */
 export declare const Filter: {
     ({ children, className, style, onDismiss, onDone, onModalOpen, toggleFilterButtonStyle, insets, id, "data-testid": testId, ...props }: FilterProps): import("react/jsx-runtime").JSX.Element;
+    /** Standalone desktop sidebar variant of the filter panel. */
     Sidebar: {
-        ({ customLabels, onClear, clearButtonDisabled, children, headerTitle: _headerTitle, className, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, className, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Standalone mobile modal variant of the filter panel. */
     Modal: {
-        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** A collapsible section within a filter panel. */
     Item: {
         ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, className, ...otherProps }: import("./types").FilterItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** A full-screen sub-page overlay for drill-down selection in the mobile modal. */
     Page: {
-        ({ onDismiss, onDone, children, }: import("./types").FilterPageProps): import("react/jsx-runtime").JSX.Element;
+        ({ onDismiss, onDone, children, "data-testid": dataTestId, }: import("./types").FilterPageProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** A filter item that renders selectable checkboxes (desktop) or toggle chips (mobile). */
     Checkbox: {
         <T = import("./types").FilterItemCheckboxOptionProps>({ selectedOptions, options, showAsCheckboxInMobile, minimisableOptions, onSelect, labelExtractor, valueExtractor, useToggleContentWidth, ...filterItemProps }: import("./types").FilterItemCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/filter/filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.js","sources":["../../src/filter/filter.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { FilterItemCheckbox } from \"./addons/filter-item-checkbox\";\nimport { FilterItem } from \"./filter-item\";\nimport { FilterItemPage } from \"./filter-item-page\";\nimport { FilterModal } from \"./filter-modal\";\nimport { FilterSidebar } from \"./filter-sidebar\";\nimport type { FilterProps } from \"./types\";\n\nexport const Filter = ({\n    children,\n    className,\n    style,\n    onDismiss,\n    onDone,\n    onModalOpen,\n    toggleFilterButtonStyle,\n    insets,\n    id,\n    \"data-testid\": testId,\n    ...props\n}: FilterProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    useEffect(() => {\n        if (!isMobile) {\n            onDismiss?.();\n        }\n    }, [isMobile]);\n\n    return (\n        <div className={className} style={style} id={id} data-testid={testId}>\n            {isMobile ? (\n                <FilterModal\n                    onDismiss={onDismiss}\n                    onDone={onDone}\n                    onModalOpen={onModalOpen}\n                    toggleFilterButtonStyle={toggleFilterButtonStyle}\n                    insets={insets}\n                    {...props}\n                >\n                    {typeof children === \"function\"\n                        ? children(\"mobile\")\n                        : children}\n                </FilterModal>\n            ) : (\n                <FilterSidebar {...props}>\n                    {typeof children === \"function\"\n                        ? children(\"default\")\n                        : children}\n                </FilterSidebar>\n            )}\n        </div>\n    );\n};\n\nFilter.Sidebar = FilterSidebar;\nFilter.Modal = FilterModal;\nFilter.Item = FilterItem;\nFilter.Page = FilterItemPage;\nFilter.Checkbox = FilterItemCheckbox;\n"],"names":["Filter","_a","children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","testId","props","__rest","isMobile","useMaxWidthMediaQuery","useEffect","_jsx","FilterModal","Object","assign","FilterSidebar","Sidebar","Modal","Item","FilterItem","Page","FilterItemPage","Checkbox","FilterItemCheckbox"],"mappings":"s2BAUO,MAAMA,EAAUC,QAAAC,SACnBA,EAAQC,UACRA,EAASC,MACTA,EAAKC,UACLA,EAASC,OACTA,EAAMC,YACNA,EAAWC,wBACXA,EAAuBC,OACvBA,EAAMC,GACNA,EACA,cAAeC,GAAMV,EAClBW,EAAKC,EAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAWC,EAAsB,MAQvC,OANAC,GAAU,KACDF,GACDT,SAAAA,GACJ,GACD,CAACS,IAGAG,SAAKd,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DY,EACGG,EAACC,EAAWC,OAAAC,OAAA,CACRf,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVe,EAACI,mBAAkBT,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAIdF,EAAOsB,QAAUD,EACjBrB,EAAOuB,MAAQL,EACflB,EAAOwB,KAAOC,EACdzB,EAAO0B,KAAOC,EACd3B,EAAO4B,SAAWC"}
+{"version":3,"file":"filter.js","sources":["../../src/filter/filter.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { FilterItemCheckbox } from \"./addons/filter-item-checkbox\";\nimport { FilterItem } from \"./filter-item\";\nimport { FilterItemPage } from \"./filter-item-page\";\nimport { FilterModal } from \"./filter-modal\";\nimport { FilterSidebar } from \"./filter-sidebar\";\nimport type { FilterProps } from \"./types\";\n\n/**\n * A responsive filter panel that switches between a persistent sidebar on\n * desktop and a modal overlay on mobile.\n *\n * Use `Filter` to let users narrow a result set by one or more criteria.\n * On mobile (below lg breakpoint) the panel is hidden behind a toggle button and\n * rendered in a full-screen modal; otherwise it is displayed as a\n * fixed sidebar.\n *\n * Sub-components:\n * - `Filter.Sidebar` — standalone desktop sidebar, used by `Filter` internally.\n * - `Filter.Modal` — standalone mobile modal, used by `Filter` internally.\n * - `Filter.Item` — a collapsible section within the panel.\n * - `Filter.Page` — a drill-down sub-page inside the mobile modal.\n * - `Filter.Checkbox` — a filter item with selectable checkbox or toggle options.\n */\nexport const Filter = ({\n    children,\n    className,\n    style,\n    onDismiss,\n    onDone,\n    onModalOpen,\n    toggleFilterButtonStyle,\n    insets,\n    id,\n    \"data-testid\": testId,\n    ...props\n}: FilterProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    useEffect(() => {\n        if (!isMobile) {\n            onDismiss?.();\n        }\n    }, [isMobile]);\n\n    return (\n        <div className={className} style={style} id={id} data-testid={testId}>\n            {isMobile ? (\n                <FilterModal\n                    onDismiss={onDismiss}\n                    onDone={onDone}\n                    onModalOpen={onModalOpen}\n                    toggleFilterButtonStyle={toggleFilterButtonStyle}\n                    insets={insets}\n                    {...props}\n                >\n                    {typeof children === \"function\"\n                        ? children(\"mobile\")\n                        : children}\n                </FilterModal>\n            ) : (\n                <FilterSidebar {...props}>\n                    {typeof children === \"function\"\n                        ? children(\"default\")\n                        : children}\n                </FilterSidebar>\n            )}\n        </div>\n    );\n};\n\n/** Standalone desktop sidebar variant of the filter panel. */\nFilter.Sidebar = FilterSidebar;\n/** Standalone mobile modal variant of the filter panel. */\nFilter.Modal = FilterModal;\n/** A collapsible section within a filter panel. */\nFilter.Item = FilterItem;\n/** A full-screen sub-page overlay for drill-down selection in the mobile modal. */\nFilter.Page = FilterItemPage;\n/** A filter item that renders selectable checkboxes (desktop) or toggle chips (mobile). */\nFilter.Checkbox = FilterItemCheckbox;\n"],"names":["Filter","_a","children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","testId","props","__rest","isMobile","useMaxWidthMediaQuery","useEffect","_jsx","FilterModal","Object","assign","FilterSidebar","Sidebar","Modal","Item","FilterItem","Page","FilterItemPage","Checkbox","FilterItemCheckbox"],"mappings":"s2BA0BO,MAAMA,EAAUC,QAAAC,SACnBA,EAAQC,UACRA,EAASC,MACTA,EAAKC,UACLA,EAASC,OACTA,EAAMC,YACNA,EAAWC,wBACXA,EAAuBC,OACvBA,EAAMC,GACNA,EACA,cAAeC,GAAMV,EAClBW,EAAKC,EAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAWC,EAAsB,MAQvC,OANAC,GAAU,KACDF,GACDT,SAAAA,GACJ,GACD,CAACS,IAGAG,SAAKd,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DY,EACGG,EAACC,EAAWC,OAAAC,OAAA,CACRf,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVe,EAACI,mBAAkBT,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAKdF,EAAOsB,QAAUD,EAEjBrB,EAAOuB,MAAQL,EAEflB,EAAOwB,KAAOC,EAEdzB,EAAO0B,KAAOC,EAEd3B,EAAO4B,SAAWC"}

package/filter/filter.styles.js

@@ -1,2 +1,2 @@
-import"./filter.styles_2fmaok.css";const t={filterFooter:{insetBottom:"--fds-internal-filter-filterFooter-insetBottom"}},e="fh4ozpc",o="f3bn9l4",f="fp6e1r1",r="f8nn92t",i="f1iv2dy9";export{e as filterBody,i as filterDoneButton,f as filterFooter,r as filterFooterWithInsetBottom,o as filterHeaderButton,t as tokens};
+import"./filter.styles_1ykijwm.css";const t={filterFooter:{insetBottom:"--fds-internal-filter-filterFooter-insetBottom"}},e="fh4ozpc",o="f3bn9l4",f="fp6e1r1",i="f8nn92t",r="f1iv2dy9";export{e as filterBody,r as filterDoneButton,f as filterFooter,i as filterFooterWithInsetBottom,o as filterHeaderButton,t as tokens};
 //# sourceMappingURL=filter.styles.js.map

package/filter/filter.styles.js.map

@@ -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":["tokens","filterFooter","insetBottom","filterBody","filterHeaderButton","filterFooterWithInsetBottom","filterDoneButton"],"mappings":"yDAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,YAAa,mDAQRC,EAAU,UAUVC,EAAkB,UAmBlBH,EAAY,UAMZI,EAA2B,UAK3BC,EAAgB"}
+{"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":["tokens","filterFooter","insetBottom","filterBody","filterHeaderButton","filterFooterWithInsetBottom","filterDoneButton"],"mappings":"0DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,YAAa,mDAQRC,EAAU,UAWVC,EAAkB,UAmBlBH,EAAY,UAMZI,EAA2B,UAK3BC,EAAgB"}

package/filter/{filter.styles_2fmaok.css → filter.styles_1ykijwm.css}

@@ -1,5 +1,5 @@
-.fh4ozpc{-webkit-flex:1;-ms-flex:1;flex:1;width:100%;overflow-y:auto;}
+@layer fds{.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);}
-.f1iv2dy9{width:100%;}
+.f1iv2dy9{width:100%;}}