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

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

@@ -1 +1 @@
-export declare const FilterItemPageContainer: 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 filterItemPageContainer: import("@linaria/core").LinariaClassName;

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

@@ -1,8 +1,2 @@
-import o from"styled-components";import{V3_Colour as e}from"../v3_theme/index.js";const t=o.div`
-    background-color: ${e.bg};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`;export{t as FilterItemPageContainer};
+import"./filter-item-page.styles_17ewfrz.css";const t="f94l7xt";export{t as filterItemPageContainer};
 //# sourceMappingURL=filter-item-page.styles.js.map

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

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

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

@@ -0,0 +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;}

package/filter/filter-item.d.ts

@@ -1,5 +1,5 @@
 import type { FilterItemProps } from "./types";
 export declare const FilterItem: {
-    ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, ...otherProps }: FilterItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, className, ...otherProps }: FilterItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/filter/filter-item.js

@@ -1,2 +1,2 @@
-import{__rest as i}from"../_virtual/_tslib.js";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import n from"../external/lodash/isNil.js";import{useContext as d,useState as l,useEffect as o}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import{PopoverAddon as s}from"../form/form-label-addon.js";import{VisuallyHidden as m,inertValue as c}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as h}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FilterContext as p}from"./filter-context.js";import{FilterItemWrapper as b,Divider as f,FilterItemHeader as u,FilterItemTitle as x,FilterItemExpandButton as v,ChevronIcon as g,ExpandableItem as j,FilterItemBody as $,MinimisableContent as y,FilterItemMinimiseButton as w}from"./filter-item.styles.js";const M=M=>{var D,{collapsible:C=!0,initialExpanded:E=!1,expanded:N,onExpandChange:k,minimisable:H=!1,minimisedHeight:O,showDivider:_=!0,showMobileDivider:z=!0,title:F,addon:I,children:T}=M,V=i(M,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children"]);const{mode:q,rootNode:A}=d(p),B="mobile"===q,[G,J]=l(Z()),[K,L]=l(H),P=!B&&C,Q=a(),R=a(),S=r({height:G?Q.height:0}),U=K?null!=O?O:Math.min(.5*(null!==(D=R.height)&&void 0!==D?D:0),216):R.height,W=h(),X=`${W}-content`,Y=`${W}-title`;o((()=>{J(Z())}),[C,N]),o((()=>{L(H)}),[H]);function Z(){return!!B||(n(N)?!C||E:N)}return e(b,{$isMobile:B,$collapsible:P,"aria-labelledby":Y,children:[t(f,{$isMobile:B,$showDivider:_,$showMobileDivider:z}),(F||P)&&e(u,{$isMobile:B,children:[F&&e(x,{id:Y,"data-testid":"filter-item-title",$isMobile:B,children:[F," ",I&&("popover"===(null==I?void 0:I.type)?t(s,{addon:I,rootNode:B?A:void 0}):null)]}),P&&e(v,{"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const i=!G;n(N)&&J(i),k&&k(i)},"aria-expanded":G,"aria-disabled":!P,"aria-controls":X,children:[F&&t(m,{children:F}),t(g,{$expanded:G,"aria-hidden":!0})]})]}),t(j,{id:X,"data-testid":"expandable-container","data-expanded":G,style:S,inert:c(!G),children:t("div",{ref:Q.ref,children:e($,Object.assign({},V,{children:[t(y,{"data-testid":"minimisable-container",$height:U,$minimisable:H,children:t("div",{ref:R.ref,children:t("div",{"data-id":"content-container",children:"function"==typeof T?T(q,{minimised:K}):T})})}),H&&e(w,{"data-id":"minimise-button",styleType:"link",type:"button",onClick:()=>{L(!K)},children:[t(m,{children:`view ${K?"more":"less"} in ${F}`}),e("span",{"aria-hidden":!0,children:["View ",K?"more":"less"]})]})]}))})})]})};M.displayName="Filter.Item";export{M as FilterItem};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{useSpring as o,animated as a}from"@react-spring/web";import n from"clsx";import l from"../external/lodash/isNil.js";import{useContext as s,useState as d,useRef as m,useEffect as c}from"react";import{useResizeDetector as p}from"../external/react-resize-detector/build/index.esm.js";import{Button as h}from"../button/button.js";import{PopoverAddon as f}from"../form/form-label-addon.js";import{VisuallyHidden as u,inertValue as b}from"../shared/accessibility/index.js";import{ClickableIcon as j}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 v}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as x}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FilterContext as y}from"./filter-context.js";import{tokens as g,divider as N,dividerVisible as k,dividerMobile as w,filterItemTitle as C,filterItemTitleMobile as $,filterItemExpandButton as D,chevronIcon as E,chevronIconExpanded as H,filterItemHeader as M,filterItemHeaderMobile as q,expandableItem as z,filterItemBody as O,minimisableContent as T,minimisableContentMinimisable as _,filterItemMinimiseButton as F,filterItemWrapper as I,filterItemWrapperDarker as V}from"./filter-item.styles.js";const A=A=>{var B,{collapsible:G=!0,initialExpanded:J=!1,expanded:K,onExpandChange:L,minimisable:P=!1,minimisedHeight:Q,showDivider:R=!0,showMobileDivider:S=!0,title:U,addon:W,children:X,className:Y}=A,Z=e(A,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","className"]);const{mode:ee,rootNode:ie}=s(y),te="mobile"===ee,[re,oe]=d(be()),[ae,ne]=d(P),le=!te&&G,se=p(),de=p(),me=o({height:re?se.height:0}),ce=ae?null!=Q?Q:Math.min(.5*(null!==(B=de.height)&&void 0!==B?B:0),216):de.height,pe=x(),he=`${pe}-content`,fe=`${pe}-title`,ue=m(null);v(ue,{[g.minimisableContent.height]:ce?`${ce}px`:null}),c((()=>{oe(be())}),[G,K]),c((()=>{ne(P)}),[P]);function be(){return!!te||(l(K)?!G||J:K)}return i("div",{"aria-labelledby":fe,className:n(I,(le||te)&&V),children:[t("div",{className:n(N,(te?S:R)&&k,te&&w)}),(U||le)&&i("div",{className:n(M,te&&q),children:[U&&i("h3",{id:fe,"data-testid":"filter-item-title",className:n(C,te&&$),children:[U," ",W&&("popover"===(null==W?void 0:W.type)?t(f,{addon:W,rootNode:te?ie:void 0}):null)]}),le&&i(j,{className:D,"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const e=!re;l(K)&&oe(e),L&&L(e)},"aria-expanded":re,"aria-disabled":!le,"aria-controls":he,children:[U&&t(u,{children:U}),t(r,{"aria-hidden":!0,className:n(E,re&&H)})]})]}),t(a.div,{className:z,id:he,"data-testid":"expandable-container","data-expanded":re,style:me,inert:b(!re),children:t("div",{ref:se.ref,children:i("div",Object.assign({className:n(O,Y)},Z,{children:[t("div",{ref:ue,"data-testid":"minimisable-container",className:n(T,P&&_),children:t("div",{ref:de.ref,children:t("div",{"data-id":"content-container",children:"function"==typeof X?X(ee,{minimised:ae}):X})})}),P&&i(h,{className:F,"data-id":"minimise-button",sizeType:"small",styleType:"link",type:"button",onClick:()=>{ne(!ae)},children:[t(u,{children:`view ${ae?"more":"less"} in ${U}`}),i("span",{"aria-hidden":!0,children:["View ",ae?"more":"less"]})]})]}))})})]})};A.displayName="Filter.Item";export{A as FilterItem};
 //# sourceMappingURL=filter-item.js.map

package/filter/filter-item.js.map

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

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,64 +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{V3_Colour as s,V3_Spacing as t,V3_Font as c,V3_Motion as $}from"../v3_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;
-`),v=e.div`
-    padding: ${t["spacing-24"]} ${t["spacing-20"]};
-`,f=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,v as FilterItemBody,b as FilterItemExpandButton,g as FilterItemHeader,u as FilterItemMinimiseButton,m as FilterItemTitle,d as FilterItemWrapper,f as MinimisableContent};
+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.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../v3_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 ? V3_Colour[\"bg-strong\"] : V3_Colour[\"bg\"]};\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            background-color: ${V3_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: ${V3_Colour[\"border\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            display: ${props.$showMobileDivider ? \"block\" : \"none\"};\n            margin: 0 ${V3_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: ${V3_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: ${V3_Colour[\"icon\"]};\n    &:hover {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIcon = styled(ChevronDownIcon)<StyleProps>`\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-350\"]}\n        ${V3_Motion[\"ease-standard\"]};\n`;\n\nexport const FilterItemTitle = styled.h3<FilterItemTitleStyleProps>`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    margin: ${V3_Spacing[\"spacing-24\"]} 0 ${V3_Spacing[\"spacing-24\"]}\n        ${V3_Spacing[\"spacing-20\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            ${V3_Font[\"body-md-semibold\"]}\n            color: ${V3_Colour[\"text-subtle\"]};\n\n            margin: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]} 0\n                ${V3_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: ${V3_Spacing[\"spacing-24\"]} ${V3_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: ${V3_Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["FilterItemWrapper","styled","div","props","$collapsible","V3_Colour","$isMobile","css","Divider","$showDivider","$showMobileDivider","V3_Spacing","FilterItemHeader","FilterItemExpandButton","ClickableIcon","ChevronIcon","ChevronDownIcon","V3_Font","Spec","$expanded","V3_Motion","FilterItemTitle","h3","ExpandableItem","animated","FilterItemBody","MinimisableContent","$minimisable","$height","FilterItemMinimiseButton","Button","Small"],"mappings":"gXAuCO,MAAMA,EAAoBC,EAAOC,GAAe;wBAC9BC,GACjBA,EAAMC,aAAeC,EAAU,aAAeA,EAAc;MAC7DF,GACCA,EAAMG,WACNC,CAAG;gCACqBF,EAAU;;EAI7BG,EAAUP,EAAOC,GAAsB;eACpCC,GAAWA,EAAMM,aAAe,QAAU;;wBAElCJ,EAAkB;;MAEnCF,GACCA,EAAMG,WACNC,CAAG;uBACYJ,EAAMO,mBAAqB,QAAU;wBACpCC,EAAW;;EAQtBC,EAAmBX,EAAOC,GAA+B;;;;wBAI9CG,EAAc;;MAE/BF,GACCA,EAAMG,WACNC,CAAG;;;EAKEM,EAAyBZ,EAAOa,EAAc;;;aAG9CT,EAAgB;;iBAEZA,EAAU;;EAIdU,EAAcd,EAAOe,EAA4B;cAChDC,EAAQC,KAAK;aACdD,EAAQC,KAAK;;wBAEDf,GAAWA,EAAMgB,UAAY,IAAM;4BAChCC,EAAU;UAC5BA,EAAU;EAGPC,EAAkBpB,EAAOqB,EAA6B;MAC7DL,EAAQ;aACDZ,EAAgB;;cAEfM,EAAW,mBAAmBA,EAAW;UAC7CA,EAAW;;MAEdR,GACCA,EAAMG,WACNC,CAAG;cACGU,EAAQ;qBACDZ,EAAU;;sBAETM,EAAW,iBAAiBA,EAAW;kBAC3CA,EAAW;;EAQhBY,EAAiBC,EAASvB,EAAOC,GAAG;;GAIpCuB,EAAiBxB,EAAOC,GAAG;eACzBS,EAAW,iBAAiBA,EAAW;EAGzCe,EAAqBF,EAASvB,EAAOC,GAA4B;MACvEC,GAAUA,EAAMwB,cAAgB;MAChCxB,GAAUA,EAAMyB,SAAW,WAAWzB,EAAMyB;GAGtCC,EAA2B5B,EAAO6B,EAAOC,MAAM;;;cAG9CpB,EAAW;"}
+{"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/filter/filter-item.styles_cphjnj.css

@@ -0,0 +1,17 @@
+.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{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, ...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 r,CrossIcon as n}from"@lifesg/react-icons";import{useRef as a,useState as s,useEffect as d}from"react";import{Overlay as c}from"../overlay/overlay.js";import{inertValue as u}from"../shared/accessibility/index.js";import{FilterHeaderButton as m,FilterBody as b,FilterFooter as h,FilterDoneButton as f}from"./filter.styles.js";import{FilterContext as g}from"./filter-context.js";import{FilterButton as p,FloatingWrapper as v,MobileOverlayContainer as y,MobileContainer as B,FilterHeader as F,FilterTitle as L,FilterClearButton as j}from"./filter-modal.styles.js";const x=x=>{var{customLabels:C,onClear:D,onDone:T,onDismiss:k,onModalOpen:O,toggleFilterButtonStyle:$="light",clearButtonDisabled:w=!1,insets:M,children:N,toggleFilterButtonLabel:S,headerTitle:_,doneButtonLabel:H}=x,I=e(x,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:P,refs:q}=o(),z=a(null),[A,E]=s(!1),G={toggle:(null==C?void 0:C.toggleFilterButtonLabel)||S||"Filters",title:(null==C?void 0:C.headerTitle)||_||"Filters",done:(null==C?void 0:C.doneButtonLabel)||H||"Done",clear:(null==C?void 0:C.clearButtonLabel)||"Clear"};return d((()=>{var e;A&&(null===(e=z.current)||void 0===e||e.focus())}),[A]),l(g.Provider,{value:{mode:"mobile",rootNode:z},children:[t("div",Object.assign({},I,{children:t(p,{"data-testid":"filter-show-button",styleType:$,onClick:()=>{E(!0),null==O||O()},type:"button",icon:t(r,{}),children:G.toggle})})),t(c,{show:A,disableTransition:!0,children:t(v,{inert:u(!A),children:t(i,{context:P,disabled:!A,children:t(y,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:q.setFloating,children:l(B,{ref:z,tabIndex:0,children:[l(F,{$insetTop:null==M?void 0:M.top,children:[t(m,{onClick:()=>{E(!1),null==k||k()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${G.title}`,children:t(n,{})}),t(L,{children:G.title}),t(j,{styleType:"link",type:"button",onClick:()=>null==D?void 0:D(),disabled:w,"aria-label":`clear ${G.title}`,children:G.clear})]}),t(b,{children:N}),t(h,{$insetBottom:null==M?void 0:M.bottom,children:t(f,{onClick:()=>{E(!1),null==T||T()},children:G.done})})]})})})})})]})};x.displayName="Filter.Modal";export{x 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\";\n\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} 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    ...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                    {labels.toggle}\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                                    <FilterTitle>{labels.title}</FilterTitle>\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","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","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"kvBAwBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,SACNA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,GAAgBf,EAC9BgB,EAAUC,EAAAjB,EAbW,6LAexB,MAAMkB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,EAAUC,EAAuB,OAEhCC,EAASC,GAAcC,GAAS,GAiBjCC,EAAS,CACXC,QACI1B,aAAY,EAAZA,EAAcS,0BACdC,GACA,UACJiB,OAAO3B,aAAY,EAAZA,EAAcW,cAAeC,GAAgB,UACpDgB,MAAM5B,aAAY,EAAZA,EAAca,kBAAmBC,GAAoB,OAC3De,OAAO7B,eAAAA,EAAc8B,mBAAoB,SAS7C,OANAC,GAAU,WACFT,IACe,QAAfvB,EAAAqB,EAAQY,eAAO,IAAAjC,GAAAA,EAAEkC,QACrB,GACD,CAACX,IAGAY,EAACC,EAAcC,UAASC,MAAO,CAAEC,KAAM,SAAUC,SAAUnB,GAASZ,SAAA,CAChEgC,EAAA,MAAAC,OAAAC,OAAA,GAAS3B,EAAU,CAAAP,SACfgC,EAACG,EAAY,CAAA,cACG,qBACZC,UAAWvC,EACXwC,QA3BS,KAVAtB,GAAW,GAYhCnB,SAAAA,GAAe,EA0BH0C,KAAK,SACLC,KAAMP,EAACQ,EAAU,CAAA,GAAGxC,SAEnBiB,EAAOC,YAGhBc,EAACS,EAAO,CAACC,KAAM5B,EAAS6B,mBAAiB,EAAA3C,SACrCgC,EAACY,EAAe,CAACC,MAAOC,GAAYhC,YAChCkB,EAACe,EAAoB,CAACtC,QAASA,EAASuC,UAAWlC,EAAOd,SACtDgC,EAACiB,aACW,gBAAe,cACX,gBACZC,IAAKxC,EAAKyC,YAAWnD,SAErB0B,EAAC0B,EAAe,CAACF,IAAKtC,EAASyC,SAAU,EAACrD,SAAA,CACtC0B,EAAC4B,EAAY,CAAAC,UAAYxD,aAAM,EAANA,EAAQyD,IAAGxD,SAAA,CAChCgC,EAACyB,EAAkB,CACfpB,QAtDd,KAClBtB,GAAW,GACXpB,SAAAA,GAAa,EAqDmB+D,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS1C,EAAOE,QAAOnB,SAEnCgC,EAAC4B,EAAS,CAAA,KAEd5B,EAAC6B,EAAW,CAAA7D,SAAEiB,EAAOE,QACrBa,EAAC8B,EAAiB,CACd1B,UAAU,OACVE,KAAK,SACLD,QAAS,IAAM5C,eAAAA,IACfuD,SAAUlD,eACE,SAASmB,EAAOE,QAAOnB,SAElCiB,EAAOI,WAGhBW,EAAC+B,EAAU,CAAA/D,SAAEA,IACbgC,EAACgC,EAAY,CAAAC,aAAelE,aAAM,EAANA,EAAQmE,gBAChClC,EAACmC,EAAgB,CAAC9B,QAtE/B,KACftB,GAAW,GACXrB,SAAAA,GAAU,WAqEuBuB,EAAOG,sBAQf,EAIjC9B,EAAY8E,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":"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"}

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

@@ -1,15 +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 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 FilterButton: 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) & {
-    Default: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: import("..").ButtonProps & 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,30 +1,2 @@
-import i from"styled-components";import{Button as o}from"../button/button.js";import{V3_Colour as t,V3_Font as n,V3_Spacing as e}from"../v3_theme/index.js";const d=i.div`
-    background-color: ${t["bg-strong"]};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`,r=i.div`
-    background-color: ${t.bg};
-    height: 100%;
-    width: 100%;
-`,g=i.div`
-    height: 100%;
-`,a=i.div`
-    display: flex;
-    align-items: center;
-    background-color: ${t.bg};
-    ${i=>i.$insetTop&&`padding-top: ${i.$insetTop}px;`}
-`,c=i.h2`
-    ${n["heading-xs-semibold"]}
-    flex: 1;
-    text-align: center;
-    margin: ${e["spacing-24"]} 0;
-`,l=i(o.Small)`
-    background-color: transparent;
-    height: 100%;
-    padding: ${e["spacing-24"]} ${e["spacing-20"]};
-`,p=i(o)`
-    width: 100%;
-`;export{p as FilterButton,l as FilterClearButton,a as FilterHeader,c as FilterTitle,g as FloatingWrapper,d as MobileContainer,r as MobileOverlayContainer};
+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.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { V3_Colour, V3_Font, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${V3_Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${V3_Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(Button)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","V3_Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","V3_Font","V3_Spacing","FilterClearButton","Button","Small","FilterButton"],"mappings":"4JAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAU;;;;;EAOrBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAc;;;EAKzBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAc;MAC/BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAOS,EAAE;MAC9BC,EAAQ;;;cAGAC,EAAW;EAGZC,EAAoBZ,EAAOa,EAAOC,MAAM;;;eAGtCH,EAAW,iBAAiBA,EAAW;EAOzCI,EAAef,EAAOa,EAAO;;"}
+{"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 @@
+.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, ...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{useRef as r}from"react";import{FilterBody as i}from"./filter.styles.js";import{FilterContext as a}from"./filter-context.js";import{DesktopContainer as o,FilterHeader as d,FilterTitle as s,FilterClearButton as n}from"./filter-sidebar.styles.js";const c=c=>{var{customLabels:m,onClear:u,clearButtonDisabled:f=!1,children:b,headerTitle:p}=c,h=e(c,["customLabels","onClear","clearButtonDisabled","children","headerTitle"]);const v=r(null),j={title:(null==m?void 0:m.headerTitle)||p||"Filters",clear:(null==m?void 0:m.clearButtonLabel)||"Clear"};return l(a.Provider,{value:{mode:"default",rootNode:v},children:t(o,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:v},h,{children:[t(d,{children:[l(s,{children:j.title}),l(n,{styleType:"link",type:"button",onClick:()=>null==u?void 0:u(),disabled:f,"aria-label":`clear ${j.title}`,children:j.clear})]}),l(i,{children:b})]}))})};c.displayName="Filter.Sidebar";export{c 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\";\n\nimport { FilterBody } from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n} 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    ...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                    <FilterTitle>{labels.title}</FilterTitle>\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","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitle","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"4VAYO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,GAAYN,EACtBO,EAAUC,EAAAR,EANa,2EAQ1B,MAAMS,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOX,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDO,OAAOZ,eAAAA,EAAca,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASL,SACjEiB,EAACC,EAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,EAAU,CAAAH,SAAA,CAEdiB,EAACK,EAAY,CAAAtB,SAAA,CACTW,EAACY,EAAW,CAAAvB,SAAEO,EAAOC,QACrBG,EAACa,EAAiB,CACdC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAM7B,eAAAA,IACf8B,SAAU7B,EAAmB,aACjB,SAASQ,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAACkB,EAAU,CAAA7B,SAAEA,SAEI,EAIjCL,EAAcmC,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"}