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

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

@@ -1,38 +1,22 @@
-interface StyleProps {
-    $collapsible?: boolean;
-    $expanded?: boolean;
-    $isMobile?: boolean;
-}
-interface DividerStyleProps {
-    $showDivider: boolean;
-    $showMobileDivider: boolean;
-    $isMobile?: boolean;
-}
-interface MinimisableContentProps {
-    $height?: number;
-    $minimisable: boolean;
-}
-interface FilterItemHeaderStyleProps {
-    $isMobile?: boolean;
-}
-interface FilterItemTitleStyleProps {
-    $isMobile?: boolean;
-}
-export declare const FilterItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
-export declare const Divider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyleProps> & DividerStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DividerStyleProps> & DividerStyleProps, never>>> & string;
-export declare const FilterItemHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & FilterItemHeaderStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & FilterItemHeaderStyleProps, never>>> & string;
-export declare const FilterItemExpandButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, keyof StyleProps> & StyleProps, never>>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const FilterItemTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "$isMobile"> & FilterItemTitleStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "$isMobile"> & FilterItemTitleStyleProps, never>>> & string;
-export declare const ExpandableItem: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string>;
-export declare const FilterItemBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const MinimisableContent: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof MinimisableContentProps> & MinimisableContentProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof MinimisableContentProps> & MinimisableContentProps, never>>> & string>;
-export declare const FilterItemMinimiseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const tokens: {
+    readonly minimisableContent: {
+        readonly height: "--fds-internal-filter-minimisableContent-height";
+    };
+};
+export declare const filterItemWrapper: import("@linaria/core").LinariaClassName;
+export declare const filterItemWrapperDarker: import("@linaria/core").LinariaClassName;
+export declare const divider: import("@linaria/core").LinariaClassName;
+export declare const dividerVisible: import("@linaria/core").LinariaClassName;
+export declare const dividerMobile: import("@linaria/core").LinariaClassName;
+export declare const filterItemHeader: import("@linaria/core").LinariaClassName;
+export declare const filterItemHeaderMobile: import("@linaria/core").LinariaClassName;
+export declare const filterItemExpandButton: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const filterItemTitle: import("@linaria/core").LinariaClassName;
+export declare const filterItemTitleMobile: import("@linaria/core").LinariaClassName;
+export declare const expandableItem: import("@linaria/core").LinariaClassName;
+export declare const filterItemBody: import("@linaria/core").LinariaClassName;
+export declare const minimisableContent: import("@linaria/core").LinariaClassName;
+export declare const minimisableContentMinimisable: import("@linaria/core").LinariaClassName;
+export declare const filterItemMinimiseButton: import("@linaria/core").LinariaClassName;

package/filter/filter-item.styles.js

@@ -1,63 +1,2 @@
-import{ChevronDownIcon as i}from"@lifesg/react-icons/chevron-down";import{animated as o}from"@react-spring/web";import e,{css as n}from"styled-components";import{Button as r}from"../button/button.js";import{ClickableIcon as a}from"../shared/clickable-icon/clickable-icon.js";import{Colour as s,Spacing as t,Font as c,Motion as $}from"../theme/index.js";const d=e.div`
-    background-color: ${i=>i.$collapsible?s["bg-strong"]:s.bg};
-    ${i=>i.$isMobile&&n`
-            background-color: ${s["bg-strong"]};
-        `}
-`,l=e.div`
-    display: ${i=>i.$showDivider?"block":"none"};
-    height: 1px;
-    background-color: ${s.border};
-
-    ${i=>i.$isMobile&&n`
-            display: ${i.$showMobileDivider?"block":"none"};
-            margin: 0 ${t["spacing-16"]};
-        `}
-`,g=e.div`
-    display: flex;
-    align-items: center;
-
-    background-color: ${s.bg};
-
-    ${i=>i.$isMobile&&n`
-            background-color: transparent;
-        `}
-`,b=e(a)`
-    margin: 0 0 0 auto;
-
-    color: ${s.icon};
-    &:hover {
-        color: ${s["icon-hover"]};
-    }
-`,p=e(i)`
-    height: ${c.Spec["body-size-baseline"]};
-    width: ${c.Spec["body-size-baseline"]};
-
-    transform: rotate(${i=>i.$expanded?180:0}deg);
-    transition: transform ${$["duration-350"]} ${$["ease-standard"]};
-`,m=e.h3`
-    ${c["heading-xs-semibold"]}
-    color: ${s.text};
-
-    margin: ${t["spacing-24"]} 0 ${t["spacing-24"]}
-        ${t["spacing-20"]};
-
-    ${i=>i.$isMobile&&n`
-            ${c["body-md-semibold"]}
-            color: ${s["text-subtle"]};
-
-            margin: ${t["spacing-24"]} ${t["spacing-20"]} 0
-                ${t["spacing-20"]};
-        `}
-`,h=o(e.div`
-    overflow: hidden;
-`),f=e.div`
-    padding: ${t["spacing-24"]} ${t["spacing-20"]};
-`,v=o(e.div`
-    ${i=>i.$minimisable&&"overflow: hidden;"}
-    ${i=>i.$height&&`height: ${i.$height}px;`}
-`),u=e(r.Small)`
-    height: fit-content;
-    padding: 0;
-    margin: ${t["spacing-16"]} 0 0 0;
-`;export{p as ChevronIcon,l as Divider,h as ExpandableItem,f as FilterItemBody,b as FilterItemExpandButton,g as FilterItemHeader,u as FilterItemMinimiseButton,m as FilterItemTitle,d as FilterItemWrapper,v as MinimisableContent};
+import"./filter-item.styles_1yixp8h.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",a="fxnpooo",c="f9puapc",d="eqgs6og",h="fu0jz3r",x="m1n17l6q",b="my7z4fl",g="fw516jj";export{p as chevronIcon,r as chevronIconExpanded,t as divider,l as dividerMobile,n as dividerVisible,d as expandableItem,h as filterItemBody,s as filterItemExpandButton,m as filterItemHeader,o as filterItemHeaderMobile,g as filterItemMinimiseButton,a as filterItemTitle,c as filterItemTitleMobile,i as filterItemWrapper,f as filterItemWrapperDarker,x 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.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $collapsible?: boolean;\n    $expanded?: boolean;\n    $isMobile?: boolean;\n}\n\ninterface DividerStyleProps {\n    $showDivider: boolean;\n    $showMobileDivider: boolean;\n    $isMobile?: boolean;\n}\n\ninterface MinimisableContentProps {\n    $height?: number;\n    $minimisable: boolean;\n}\n\ninterface FilterItemHeaderStyleProps {\n    $isMobile?: boolean;\n}\ninterface FilterItemTitleStyleProps {\n    $isMobile?: boolean;\n}\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const FilterItemWrapper = styled.div<StyleProps>`\n    background-color: ${(props) =>\n        props.$collapsible ? Colour[\"bg-strong\"] : Colour[\"bg\"]};\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            background-color: ${Colour[\"bg-strong\"]};\n        `}\n`;\n\nexport const Divider = styled.div<DividerStyleProps>`\n    display: ${(props) => (props.$showDivider ? \"block\" : \"none\")};\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            display: ${props.$showMobileDivider ? \"block\" : \"none\"};\n            margin: 0 ${Spacing[\"spacing-16\"]};\n        `}\n`;\n\n// -----------------------------------------------------------------------------\n// HEADER STYLES\n// -----------------------------------------------------------------------------\n\nexport const FilterItemHeader = styled.div<FilterItemHeaderStyleProps>`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            background-color: transparent;\n        `}\n`;\n\nexport const FilterItemExpandButton = styled(ClickableIcon)`\n    margin: 0 0 0 auto;\n\n    color: ${Colour[\"icon\"]};\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIcon = styled(ChevronDownIcon)<StyleProps>`\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const FilterItemTitle = styled.h3<FilterItemTitleStyleProps>`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        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// -----------------------------------------------------------------------------\n// CONTENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const ExpandableItem = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const FilterItemBody = styled.div`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const MinimisableContent = animated(styled.div<MinimisableContentProps>`\n    ${(props) => props.$minimisable && \"overflow: hidden;\"}\n    ${(props) => props.$height && `height: ${props.$height}px;`}\n`);\n\nexport const FilterItemMinimiseButton = styled(Button.Small)`\n    height: fit-content;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["FilterItemWrapper","styled","div","props","$collapsible","Colour","$isMobile","css","Divider","$showDivider","$showMobileDivider","Spacing","FilterItemHeader","FilterItemExpandButton","ClickableIcon","ChevronIcon","ChevronDownIcon","Font","Spec","$expanded","Motion","FilterItemTitle","h3","ExpandableItem","animated","FilterItemBody","MinimisableContent","$minimisable","$height","FilterItemMinimiseButton","Button","Small"],"mappings":"iWAsCO,MAAMA,EAAoBC,EAAOC,GAAe;wBAC9BC,GACjBA,EAAMC,aAAeC,EAAO,aAAeA,EAAW;MACvDF,GACCA,EAAMG,WACNC,CAAG;gCACqBF,EAAO;;EAI1BG,EAAUP,EAAOC,GAAsB;eACpCC,GAAWA,EAAMM,aAAe,QAAU;;wBAElCJ,EAAe;;MAEhCF,GACCA,EAAMG,WACNC,CAAG;uBACYJ,EAAMO,mBAAqB,QAAU;wBACpCC,EAAQ;;EAQnBC,EAAmBX,EAAOC,GAA+B;;;;wBAI9CG,EAAW;;MAE5BF,GACCA,EAAMG,WACNC,CAAG;;;EAKEM,EAAyBZ,EAAOa,EAAc;;;aAG9CT,EAAa;;iBAETA,EAAO;;EAIXU,EAAcd,EAAOe,EAA4B;cAChDC,EAAKC,KAAK;aACXD,EAAKC,KAAK;;wBAEEf,GAAWA,EAAMgB,UAAY,IAAM;4BAChCC,EAAO,mBAAmBA,EAAO;EAGhDC,EAAkBpB,EAAOqB,EAA6B;MAC7DL,EAAK;aACEZ,EAAa;;cAEZM,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;;MAEXR,GACCA,EAAMG,WACNC,CAAG;cACGU,EAAK;qBACEZ,EAAO;;sBAENM,EAAQ,iBAAiBA,EAAQ;kBACrCA,EAAQ;;EAQbY,EAAiBC,EAASvB,EAAOC,GAAG;;GAIpCuB,EAAiBxB,EAAOC,GAAG;eACzBS,EAAQ,iBAAiBA,EAAQ;EAGnCe,EAAqBF,EAASvB,EAAOC,GAA4B;MACvEC,GAAUA,EAAMwB,cAAgB;MAChCxB,GAAUA,EAAMyB,SAAW,WAAWzB,EAAMyB;GAGtCC,EAA2B5B,EAAO6B,EAAOC,MAAM;;;cAG9CpB,EAAQ;"}
+{"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    min-height: unset;\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"}

package/filter/filter-item.styles_1yixp8h.css

@@ -0,0 +1,17 @@
+@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;}
+.d4x3x5q{margin:0 var(--fds-spacing-16);}
+.f1eimp3e{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);}
+.f1b5woey{background-color:transparent;}
+.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-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{min-height:unset;padding:0;margin:var(--fds-spacing-16) 0 0 0;}}

package/filter/filter-modal.d.ts

@@ -1,5 +1,5 @@
-import { FilterModalProps } from "./types";
+import type { FilterModalProps } from "./types";
 export declare const FilterModal: {
-    ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...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 l,jsx as t}from"react/jsx-runtime";import{useFloating as o,FloatingFocusManager as i}from"@floating-ui/react";import{FilterIcon as n,CrossIcon as r}from"@lifesg/react-icons";import{useRef as a,useState as d,useEffect as s}from"react";import{Overlay as c}from"../overlay/overlay.js";import{inertValue as u}from"../shared/accessibility/index.js";import{FilterBadge as m}from"./filter-badge.js";import{FilterContext as b}from"./filter-context.js";import{FilterButton as h,FilterToggleContent as f,FloatingWrapper as g,MobileOverlayContainer as p,MobileContainer as v,FilterHeader as y,FilterTitleGroup as B,FilterTitle as j,FilterClearButton as F}from"./filter-modal.styles.js";import{FilterHeaderButton as L,FilterBody as x,FilterFooter as C,FilterDoneButton as D}from"./filter.styles.js";const T=T=>{var{customLabels:k,onClear:O,onDone:$,onDismiss:w,onModalOpen:M,toggleFilterButtonStyle:N="light",clearButtonDisabled:S=!1,insets:_,count:H,children:I,toggleFilterButtonLabel:P,headerTitle:q,doneButtonLabel:z}=T,A=e(T,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:E,refs:G}=o(),J=a(null),[K,Q]=d(!1),R={toggle:(null==k?void 0:k.toggleFilterButtonLabel)||P||"Filters",title:(null==k?void 0:k.headerTitle)||q||"Filters",done:(null==k?void 0:k.doneButtonLabel)||z||"Done",clear:(null==k?void 0:k.clearButtonLabel)||"Clear"};return s((()=>{var e;K&&(null===(e=J.current)||void 0===e||e.focus())}),[K]),l(b.Provider,{value:{mode:"mobile",rootNode:J},children:[t("div",Object.assign({},A,{children:t(h,{"data-testid":"filter-show-button",styleType:N,onClick:()=>{Q(!0),null==M||M()},type:"button",icon:t(n,{}),children:l(f,{children:[t("span",{children:R.toggle}),t(m,{count:H})]})})})),t(c,{show:K,disableTransition:!0,children:t(g,{inert:u(!K),children:t(i,{context:E,disabled:!K,children:t(p,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:G.setFloating,children:l(v,{ref:J,tabIndex:0,children:[l(y,{$insetTop:null==_?void 0:_.top,children:[t(L,{onClick:()=>{Q(!1),null==w||w()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${R.title}`,children:t(r,{})}),l(B,{children:[t(j,{children:R.title}),t(m,{count:H})]}),t(F,{styleType:"link",type:"button",onClick:()=>null==O?void 0:O(),disabled:S,"aria-label":`clear ${R.title}`,children:R.clear})]}),t(x,{children:I}),t(C,{$insetBottom:null==_?void 0:_.bottom,children:t(D,{onClick:()=>{Q(!1),null==$||$()},children:R.done})})]})})})})})]})};T.displayName="Filter.Modal";export{T 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 { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"src/overlay\";\nimport { inertValue } from \"src/shared/accessibility\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n    FilterToggleContent,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} from \"./filter-modal.styles\";\nimport { FilterModalProps } from \"./types\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\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    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\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 {...otherProps}>\n                <FilterButton\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    <FilterToggleContent>\n                        <span>{labels.toggle}</span>\n                        <FilterBadge count={count} />\n                    </FilterToggleContent>\n                </FilterButton>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <FloatingWrapper inert={inertValue(!visible)}>\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <MobileOverlayContainer\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <MobileContainer ref={nodeRef} tabIndex={0}>\n                                <FilterHeader $insetTop={insets?.top}>\n                                    <FilterHeaderButton\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </FilterHeaderButton>\n                                    <FilterTitleGroup>\n                                        <FilterTitle>\n                                            {labels.title}\n                                        </FilterTitle>\n                                        <FilterBadge count={count} />\n                                    </FilterTitleGroup>\n                                    <FilterClearButton\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </FilterClearButton>\n                                </FilterHeader>\n                                <FilterBody>{children}</FilterBody>\n                                <FilterFooter $insetBottom={insets?.bottom}>\n                                    <FilterDoneButton onClick={handleDone}>\n                                        {labels.done}\n                                    </FilterDoneButton>\n                                </FilterFooter>\n                            </MobileContainer>\n                        </MobileOverlayContainer>\n                    </FloatingFocusManager>\n                </FloatingWrapper>\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","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","visible","setVisible","useState","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","FilterButton","styleType","onClick","type","icon","FilterIcon","FilterToggleContent","FilterBadge","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitleGroup","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"i1BA0BO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,MACNA,EAAKC,SACLA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,GAAgBhB,EAC9BiB,EAAUC,EAAAlB,EAdW,qMAgBxB,MAAMmB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,EAAUC,EAAuB,OAEhCC,EAASC,GAAcC,GAAS,GAiBjCC,EAAS,CACXC,QACI3B,aAAY,EAAZA,EAAcU,0BACdC,GACA,UACJiB,OAAO5B,aAAY,EAAZA,EAAcY,cAAeC,GAAgB,UACpDgB,MAAM7B,aAAY,EAAZA,EAAcc,kBAAmBC,GAAoB,OAC3De,OAAO9B,eAAAA,EAAc+B,mBAAoB,SAS7C,OANAC,GAAU,WACFT,IACe,QAAfxB,EAAAsB,EAAQY,eAAO,IAAAlC,GAAAA,EAAEmC,QACrB,GACD,CAACX,IAGAY,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,SAAUC,SAAUnB,GAASZ,SAAA,CAChEgC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS3B,EAAU,CAAAP,SACfgC,EAACG,EAAY,CAAA,cACG,qBACZC,UAAWxC,EACXyC,QA3BS,KAVAtB,GAAW,GAYhCpB,SAAAA,GAAe,EA0BH2C,KAAK,SACLC,KAAMP,EAACQ,EAAU,IAAGxC,SAEpB0B,EAACe,EAAmB,CAAAzC,SAAA,CAChBgC,EAAA,OAAA,CAAAhC,SAAOiB,EAAOC,SACdc,EAACU,EAAW,CAAC3C,MAAOA,YAIhCiC,EAACW,EAAO,CAACC,KAAM9B,EAAS+B,mBAAiB,EAAA7C,SACrCgC,EAACc,EAAe,CAACC,MAAOC,GAAYlC,GAAQd,SACxCgC,EAACiB,EAAoB,CAACxC,QAASA,EAASyC,UAAWpC,EAAOd,SACtDgC,EAACmB,EAAsB,CAAA,UACX,gBAAe,cACX,gBACZC,IAAK1C,EAAK2C,YAAWrD,SAErB0B,EAAC4B,EAAe,CAACF,IAAKxC,EAAS2C,SAAU,EAACvD,SAAA,CACtC0B,EAAC8B,EAAY,CAAAC,UAAY3D,aAAM,EAANA,EAAQ4D,IAAG1D,SAAA,CAChCgC,EAAC2B,EAAkB,CACftB,QAzDd,KAClBtB,GAAW,GACXrB,SAAAA,GAAa,EAwDmBkE,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS5C,EAAOE,QAAOnB,SAEnCgC,EAAC8B,EAAS,CAAA,KAEdpC,EAACqC,EAAgB,CAAA/D,SAAA,CACbgC,EAACgC,EAAW,CAAAhE,SACPiB,EAAOE,QAEZa,EAACU,EAAW,CAAC3C,MAAOA,OAExBiC,EAACiC,EAAiB,CACd7B,UAAU,OACVE,KAAK,SACLD,QAAS,IAAM7C,aAAO,EAAPA,IACf0D,SAAUrD,EAAmB,aACjB,SAASoB,EAAOE,QAAOnB,SAElCiB,EAAOI,WAGhBW,EAACkC,EAAU,CAAAlE,SAAEA,IACbgC,EAACmC,EAAY,CAAAC,aAAetE,aAAM,EAANA,EAAQuE,OAAMrE,SACtCgC,EAACsC,EAAgB,CAACjC,QA9E/B,KACftB,GAAW,GACXtB,SAAAA,GAAU,EA4EuDO,SAChCiB,EAAOG,sBAQf,EAIjC/B,EAAYkF,YAAc"}
+{"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":"86CAiBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,MACNA,EAAKC,SACLA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,EAAgBC,UACjCA,GAASjB,EACNkB,EAAUC,EAAAnB,EAfW,iNAiBxB,MAAMoB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,GAAUC,EAAuB,MACjCC,GAAYD,EAAuB,MACnCE,GAAYF,EAAuB,OAElCG,GAASC,IAAcC,GAAS,GAEvCC,EAAcL,GAAW,CACrB,CAACM,EAAcC,aAAaC,UAAWC,EAAS1B,eAAAA,EAAQ2B,KAClD,GAAG3B,EAAO2B,QACV,OAGVL,EAAcJ,GAAW,CACrB,CAACU,EAAoBC,aAAaC,aAAcJ,EAAS1B,eAAAA,EAAQ+B,QAC3D,GAAG/B,EAAO+B,WACV,OAGV,MAeMC,GAAS,CACXC,QACIxC,aAAY,EAAZA,EAAcU,0BACdC,GACA,UACJ8B,OAAOzC,aAAY,EAAZA,EAAcY,cAAeC,GAAgB,UACpD6B,MAAM1C,aAAY,EAAZA,EAAcc,kBAAmBC,GAAoB,OAC3D4B,OAAO3C,eAAAA,EAAc4C,mBAAoB,SAS7C,OANAC,GAAU,WACFnB,KACe,QAAf3B,EAAAuB,GAAQwB,eAAO,IAAA/C,GAAAA,EAAEgD,QACrB,GACD,CAACrB,KAGAsB,EAACC,EAAcC,UAASC,MAAO,CAAEC,KAAM,SAAUC,SAAU/B,IAASb,SAAA,CAChE6C,EAAA,MAAAC,OAAAC,OAAA,CAAKxC,UAAWA,GAAeC,YAC3BqC,EAACG,GACGzC,UAAW0C,EAAmB,cAClB,qBACZC,UAAWtD,EACXuD,QA5BS,KAVAjC,IAAW,GAYhCvB,SAAAA,GAAe,EA2BHyD,KAAK,SACLC,KAAMR,EAACS,EAAU,CAAA,YAEjBf,EAAA,OAAA,CAAMhC,UAAWgD,EAA0BvD,SAAA,CACvC6C,EAAA,OAAA,CAAA7C,SAAO8B,GAAOC,SACdc,EAACW,EAAW,CAACzD,MAAOA,YAIhC8C,EAACY,EAAO,CAACC,KAAMzC,GAAS0C,8BACpBd,EAAA,MAAA,CACItC,UAAWqD,EACXC,MAAOC,GAAY7C,IAAQjB,SAE3B6C,EAACkB,EAAoB,CAACrD,QAASA,EAASsD,UAAW/C,YAC/C4B,EAAA,MAAA,CACItC,UAAW0D,EAA6B,UAChC,gBAAe,cACX,gBACZC,IAAKvD,EAAKwD,YAAWnE,SAErBuC,EAAA,MAAA,CACIhC,UAAW6D,EACXF,IAAKrD,GACLwD,SAAU,YAEV9B,EAAA,MAAA,CACI2B,IAAKnD,GACLR,UAAW+D,EACPC,EACA/C,EAAS1B,eAAAA,EAAQ2B,MACb+C,GACPxE,SAAA,CAED6C,EAAC4B,EAAa,CACVlE,UACImE,EAEJvB,QA5Ed,KAClBjC,IAAW,GACXxB,SAAAA,GAAa,EA2EmBiF,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS9C,GAAOE,QAAOhC,SAEnC6C,EAACgC,EAAS,CAAA,KAEdtC,EAAA,MAAA,CAAKhC,UAAWuE,EAAuB9E,SAAA,CACnC6C,EAAA,KAAA,CAAItC,UAAWwE,EAAkB/E,SAC5B8B,GAAOE,QAEZa,EAACW,EAAW,CAACzD,MAAOA,OAExB8C,EAACG,EAAM,CACHzC,UAAWyE,EACX9B,UAAU,OACVE,KAAK,SACL6B,SAAS,QACT9B,QAAS,IAAM3D,aAAO,EAAPA,IACfwE,SAAUnE,EAAmB,aACjB,SAASiC,GAAOE,iBAE3BF,GAAOI,WAGhBW,EAAA,MAAA,CAAKtC,UAAW2E,EAAuBlF,SAClCA,IAEL6C,EAAA,MAAA,CACIqB,IAAKlD,GACLT,UAAW+D,EACPa,EACA3D,EAAS1B,aAAM,EAANA,EAAQ+B,SACbuD,GACPpF,SAED6C,EAACG,EAAM,CACHzC,UACI8E,EAEJlC,QAhHjB,KACfjC,IAAW,GACXzB,SAAAA,GAAU,EA8GyCO,SAElB8B,GAAOG,sBAQf,EAIjC5C,EAAYiG,YAAc"}

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

@@ -1,13 +1,15 @@
-type FilterHeaderProps = {
-    $insetTop?: number | undefined;
+export declare const tokens: {
+    readonly filterHeader: {
+        readonly insetTop: "--fds-internal-filter-filterModalHeader-insetTop";
+    };
 };
-export declare const MobileContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const MobileOverlayContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FloatingWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetTop"> & FilterHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetTop"> & FilterHeaderProps, never>>> & string;
-export declare const FilterTitleGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
-export declare const FilterToggleContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
-export declare const FilterClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FilterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const mobileContainer: import("@linaria/core").LinariaClassName;
+export declare const mobileOverlayContainer: import("@linaria/core").LinariaClassName;
+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,39 +1,2 @@
-import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const r=i.div`
-    background-color: ${o["bg-strong"]};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`,g=i.div`
-    background-color: ${o.bg};
-    height: 100%;
-    width: 100%;
-`,s=i.div`
-    height: 100%;
-`,c=i.div`
-    display: flex;
-    align-items: center;
-    background-color: ${o.bg};
-    ${i=>i.$insetTop&&`padding-top: ${i.$insetTop}px;`}
-`,d=i.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${e["spacing-8"]};
-    margin: ${e["spacing-24"]} 0;
-`,l=i.h2`
-    ${a["heading-xs-semibold"]}
-    color: ${o.text};
-`,p=i.span`
-    display: inline-flex;
-    align-items: center;
-    gap: ${e["spacing-8"]};
-`,m=i(t.Small)`
-    background-color: transparent;
-    height: 100%;
-    padding: ${e["spacing-24"]} ${e["spacing-20"]};
-`,h=i(n.Default)`
-    width: 100%;
-`;export{h as FilterButton,m as FilterClearButton,c as FilterHeader,l as FilterTitle,d as FilterTitleGroup,p as FilterToggleContent,s as FloatingWrapper,r as MobileContainer,g as MobileOverlayContainer};
+import"./filter-modal.styles_kuth21.css";const f={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}},e="m19agezm",o="m11wuwo8",t="fidypou",r="f1ijv0o9",i="f50yopa",l="f15rygha",a="f14huz7l",s="fxpov9b",p="f14zog8f",d="flrfycx";export{d as filterButton,p as filterClearButton,r as filterHeader,i as filterHeaderWithInsetTop,a as filterTitle,l as filterTitleGroup,s as filterToggleContent,t 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.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\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 = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\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 = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;aACEV,EAAa;EAGbW,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}
+{"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    min-height: unset;\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_kuth21.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;min-height:unset;padding:var(--fds-spacing-24) var(--fds-spacing-20);}
+.flrfycx{width:100%;}}

package/filter/filter-sidebar.d.ts

@@ -1,5 +1,5 @@
-import { FilterSidebarProps } from "./types";
+import type { FilterSidebarProps } from "./types";
 export declare const FilterSidebar: {
-    ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, ...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 t,jsxs as l}from"react/jsx-runtime";import{useRef as r}from"react";import{FilterBadge as i}from"./filter-badge.js";import{FilterContext as o}from"./filter-context.js";import{DesktopContainer as a,FilterHeader as d,FilterTitleGroup as n,FilterTitle as s,FilterClearButton as c}from"./filter-sidebar.styles.js";import{FilterBody as m}from"./filter.styles.js";const u=u=>{var{customLabels:f,onClear:b,clearButtonDisabled:p=!1,count:h,children:j,headerTitle:v}=u,y=e(u,["customLabels","onClear","clearButtonDisabled","count","children","headerTitle"]);const k=r(null),C={title:(null==f?void 0:f.headerTitle)||v||"Filters",clear:(null==f?void 0:f.clearButtonLabel)||"Clear"};return t(o.Provider,{value:{mode:"default",rootNode:k},children:l(a,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:k},y,{children:[l(d,{children:[l(n,{children:[t(s,{children:C.title}),t(i,{count:h})]}),t(c,{styleType:"link",type:"button",onClick:()=>null==b?void 0:b(),disabled:p,"aria-label":`clear ${C.title}`,children:C.clear})]}),t(m,{children:j})]}))})};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 { useRef } from \"react\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    count,\n    children,\n    headerTitle: _headerTitle,\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            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitleGroup>\n                        <FilterTitle>{labels.title}</FilterTitle>\n                        <FilterBadge count={count} />\n                    </FilterTitleGroup>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","count","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitleGroup","FilterTitle","FilterBadge","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"kaAaO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,GAAYP,EACtBQ,EAAUC,EAAAT,EAPa,mFAS1B,MAAMU,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDO,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,YACxDY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,aAEJc,EAACK,EAAY,CAAAtB,SAAA,CACTiB,EAACM,EAAgB,CAAAvB,SAAA,CACbW,EAACa,EAAW,CAAAxB,SAAEO,EAAOC,QACrBG,EAACc,EAAW,CAAC1B,MAAOA,OAExBY,EAACe,GACGC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAMhC,aAAO,EAAPA,IACfiC,SAAUhC,EAAmB,aACjB,SAASS,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAACoB,EAAU,CAAA/B,SAAEA,SAEI,EAIjCN,EAAcsC,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,5 +1,5 @@
-export declare const DesktopContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterTitleGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
-export declare const FilterClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+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,29 +1,2 @@
-import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as t,Border as r,Radius as e,Spacing as n,Font as d}from"../theme/index.js";const a=i.div`
-    background-color: ${t.bg};
-    border: ${r["width-010"]} ${r.solid} ${t.border};
-    border-radius: ${e.md};
-    overflow: hidden;
-    width: 100%;
-`,s=i.div`
-    display: flex;
-    align-items: center;
-
-    background-color: ${t.bg};
-    color: ${t.text};
-`,g=i.div`
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: ${n["spacing-8"]};
-    margin: ${n["spacing-24"]} 0 ${n["spacing-24"]}
-        ${n["spacing-20"]};
-`,l=i.h2`
-    ${d["heading-xs-semibold"]}
-`,c=i(o.Small)`
-    background-color: transparent;
-    padding-right: ${n["spacing-20"]};
-    padding-left: ${n["spacing-20"]};
-    height: 100%;
-`;export{a as DesktopContainer,c as FilterClearButton,s as FilterHeader,l as FilterTitle,g as FilterTitleGroup};
+import"./filter-sidebar.styles_rbfq4f.css";const f="d1a2pl71",r="fq9unar",s="fjfy2r5",t="f1i4s84l",e="f122t6n9";export{f as desktopContainer,e as filterClearButton,r as filterHeader,t as filterTitle,s 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.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\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 = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\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 = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;aACtBA,EAAa;EAGbI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}
+{"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    min-height: unset;\n`;\n"],"names":["desktopContainer","filterHeader","filterTitleGroup","filterTitle","filterClearButton"],"mappings":"iEAQO,MAAMA,EAAgB,WAYhBC,EAAY,UAQZC,EAAgB,UAUhBC,EAAW,WAIXC,EAAiB"}

package/filter/filter-sidebar.styles_rbfq4f.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);min-height:unset;}}

package/filter/filter.d.ts

@@ -1,24 +1,46 @@
-import { FilterProps } from "./types";
+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.
+ * @keywords criteria, refinement, search
+ */
 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, count, children, headerTitle: _headerTitle, ...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, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...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, ...otherProps }: import("./types").FilterItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ 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;
+        <T = import(".").FilterItemCheckboxOptionProps>({ selectedOptions, options, showAsCheckboxInMobile, minimisableOptions, onSelect, labelExtractor, valueExtractor, useToggleContentWidth, ...filterItemProps }: import(".").FilterItemCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };