@lifesg/react-design-system 3.4.0-canary.5 → 3.4.0-canary.6

package/filter/filter-badge.d.ts

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

package/filter/filter-badge.js

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

package/filter/filter-badge.js.map

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

package/filter/filter-modal.d.ts

@@ -1,5 +1,5 @@
 import { 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, ...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{FilterContext as m}from"./filter-context.js";import{FilterButton as b,FloatingWrapper as h,MobileOverlayContainer as f,MobileContainer as g,FilterHeader as p,FilterTitle as v,FilterClearButton as y}from"./filter-modal.styles.js";import{FilterHeaderButton as B,FilterBody as F,FilterFooter as L,FilterDoneButton as j}from"./filter.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(m.Provider,{value:{mode:"mobile",rootNode:z},children:[t("div",Object.assign({},I,{children:t(b,{"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(h,{inert:u(!A),children:t(i,{context:P,disabled:!A,children:t(f,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:q.setFloating,children:l(g,{ref:z,tabIndex:0,children:[l(p,{$insetTop:null==M?void 0:M.top,children:[t(B,{onClick:()=>{E(!1),null==k||k()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${G.title}`,children:t(n,{})}),t(v,{children:G.title}),t(y,{styleType:"link",type:"button",onClick:()=>null==D?void 0:D(),disabled:w,"aria-label":`clear ${G.title}`,children:G.clear})]}),t(F,{children:N}),t(L,{$insetBottom:null==M?void 0:M.bottom,children:t(j,{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 l,jsx as t}from"react/jsx-runtime";import{useFloating as o,FloatingFocusManager as i}from"@floating-ui/react";import{FilterIcon as n,CrossIcon as r}from"@lifesg/react-icons";import{useRef as a,useState as d,useEffect as s}from"react";import{Overlay as c}from"../overlay/overlay.js";import{inertValue as u}from"../shared/accessibility/index.js";import{FilterBadge as m}from"./filter-badge.js";import{FilterContext as b}from"./filter-context.js";import{FilterButton as h,FilterToggleContent as f,FloatingWrapper as g,MobileOverlayContainer as p,MobileContainer as v,FilterHeader as y,FilterTitleGroup as B,FilterTitle as j,FilterClearButton as F}from"./filter-modal.styles.js";import{FilterHeaderButton as L,FilterBody as x,FilterFooter as C,FilterDoneButton as D}from"./filter.styles.js";const T=T=>{var{customLabels:k,onClear:O,onDone:$,onDismiss:w,onModalOpen:M,toggleFilterButtonStyle:N="light",clearButtonDisabled:S=!1,insets:_,count:H,children:I,toggleFilterButtonLabel:P,headerTitle:q,doneButtonLabel:z}=T,A=e(T,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:E,refs:G}=o(),J=a(null),[K,Q]=d(!1),R={toggle:(null==k?void 0:k.toggleFilterButtonLabel)||P||"Filters",title:(null==k?void 0:k.headerTitle)||q||"Filters",done:(null==k?void 0:k.doneButtonLabel)||z||"Done",clear:(null==k?void 0:k.clearButtonLabel)||"Clear"};return s((()=>{var e;K&&(null===(e=J.current)||void 0===e||e.focus())}),[K]),l(b.Provider,{value:{mode:"mobile",rootNode:J},children:[t("div",Object.assign({},A,{children:t(h,{"data-testid":"filter-show-button",styleType:N,onClick:()=>{Q(!0),null==M||M()},type:"button",icon:t(n,{}),children:l(f,{children:[t("span",{children:R.toggle}),t(m,{count:H})]})})})),t(c,{show:K,disableTransition:!0,children:t(g,{inert:u(!K),children:t(i,{context:E,disabled:!K,children:t(p,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:G.setFloating,children:l(v,{ref:J,tabIndex:0,children:[l(y,{$insetTop:null==_?void 0:_.top,children:[t(L,{onClick:()=>{Q(!1),null==w||w()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${R.title}`,children:t(r,{})}),l(B,{children:[t(j,{children:R.title}),t(m,{count:H})]}),t(F,{styleType:"link",type:"button",onClick:()=>null==O?void 0:O(),disabled:S,"aria-label":`clear ${R.title}`,children:R.clear})]}),t(x,{children:I}),t(C,{$insetBottom:null==_?void 0:_.bottom,children:t(D,{onClick:()=>{Q(!1),null==$||$()},children:R.done})})]})})})})})]})};T.displayName="Filter.Modal";export{T as FilterModal};
 //# sourceMappingURL=filter-modal.js.map

package/filter/filter-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.js","sources":["../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"src/overlay\";\nimport { inertValue } from \"src/shared/accessibility\";\nimport { 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 { FilterModalProps } from \"./types\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    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":"kvBAuBO,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 { useEffect, useRef, useState } from \"react\";\nimport { Overlay } from \"src/overlay\";\nimport { inertValue } from \"src/shared/accessibility\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n    FilterToggleContent,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} from \"./filter-modal.styles\";\nimport { FilterModalProps } from \"./types\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    count,\n    children,\n    toggleFilterButtonLabel: _toggleFilterButtonLabel,\n    headerTitle: _headerTitle,\n    doneButtonLabel: _doneButtonLabel,\n    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\n\n    const handleShow = () => setVisible(true);\n    const handleDismiss = () => {\n        setVisible(false);\n        onDismiss?.();\n    };\n    const handleDone = () => {\n        setVisible(false);\n        onDone?.();\n    };\n\n    const handleShowFilter = () => {\n        handleShow();\n        onModalOpen?.();\n    };\n\n    const labels = {\n        toggle:\n            customLabels?.toggleFilterButtonLabel ||\n            _toggleFilterButtonLabel ||\n            \"Filters\",\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        done: customLabels?.doneButtonLabel || _doneButtonLabel || \"Done\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    useEffect(() => {\n        if (visible) {\n            nodeRef.current?.focus();\n        }\n    }, [visible]);\n\n    return (\n        <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n            <div {...otherProps}>\n                <FilterButton\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    <FilterToggleContent>\n                        <span>{labels.toggle}</span>\n                        <FilterBadge count={count} />\n                    </FilterToggleContent>\n                </FilterButton>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <FloatingWrapper inert={inertValue(!visible)}>\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <MobileOverlayContainer\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <MobileContainer ref={nodeRef} tabIndex={0}>\n                                <FilterHeader $insetTop={insets?.top}>\n                                    <FilterHeaderButton\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </FilterHeaderButton>\n                                    <FilterTitleGroup>\n                                        <FilterTitle>\n                                            {labels.title}\n                                        </FilterTitle>\n                                        <FilterBadge count={count} />\n                                    </FilterTitleGroup>\n                                    <FilterClearButton\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </FilterClearButton>\n                                </FilterHeader>\n                                <FilterBody>{children}</FilterBody>\n                                <FilterFooter $insetBottom={insets?.bottom}>\n                                    <FilterDoneButton onClick={handleDone}>\n                                        {labels.done}\n                                    </FilterDoneButton>\n                                </FilterFooter>\n                            </MobileContainer>\n                        </MobileOverlayContainer>\n                    </FloatingFocusManager>\n                </FloatingWrapper>\n            </Overlay>\n        </FilterContext.Provider>\n    );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","visible","setVisible","useState","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","FilterButton","styleType","onClick","type","icon","FilterIcon","FilterToggleContent","FilterBadge","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitleGroup","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"i1BA0BO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,MACNA,EAAKC,SACLA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,GAAgBhB,EAC9BiB,EAAUC,EAAAlB,EAdW,qMAgBxB,MAAMmB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,EAAUC,EAAuB,OAEhCC,EAASC,GAAcC,GAAS,GAiBjCC,EAAS,CACXC,QACI3B,aAAY,EAAZA,EAAcU,0BACdC,GACA,UACJiB,OAAO5B,aAAY,EAAZA,EAAcY,cAAeC,GAAgB,UACpDgB,MAAM7B,aAAY,EAAZA,EAAcc,kBAAmBC,GAAoB,OAC3De,OAAO9B,eAAAA,EAAc+B,mBAAoB,SAS7C,OANAC,GAAU,WACFT,IACe,QAAfxB,EAAAsB,EAAQY,eAAO,IAAAlC,GAAAA,EAAEmC,QACrB,GACD,CAACX,IAGAY,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,SAAUC,SAAUnB,GAASZ,SAAA,CAChEgC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS3B,EAAU,CAAAP,SACfgC,EAACG,EAAY,CAAA,cACG,qBACZC,UAAWxC,EACXyC,QA3BS,KAVAtB,GAAW,GAYhCpB,SAAAA,GAAe,EA0BH2C,KAAK,SACLC,KAAMP,EAACQ,EAAU,IAAGxC,SAEpB0B,EAACe,EAAmB,CAAAzC,SAAA,CAChBgC,EAAA,OAAA,CAAAhC,SAAOiB,EAAOC,SACdc,EAACU,EAAW,CAAC3C,MAAOA,YAIhCiC,EAACW,EAAO,CAACC,KAAM9B,EAAS+B,mBAAiB,EAAA7C,SACrCgC,EAACc,EAAe,CAACC,MAAOC,GAAYlC,GAAQd,SACxCgC,EAACiB,EAAoB,CAACxC,QAASA,EAASyC,UAAWpC,EAAOd,SACtDgC,EAACmB,EAAsB,CAAA,UACX,gBAAe,cACX,gBACZC,IAAK1C,EAAK2C,YAAWrD,SAErB0B,EAAC4B,EAAe,CAACF,IAAKxC,EAAS2C,SAAU,EAACvD,SAAA,CACtC0B,EAAC8B,EAAY,CAAAC,UAAY3D,aAAM,EAANA,EAAQ4D,IAAG1D,SAAA,CAChCgC,EAAC2B,EAAkB,CACftB,QAzDd,KAClBtB,GAAW,GACXrB,SAAAA,GAAa,EAwDmBkE,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS5C,EAAOE,QAAOnB,SAEnCgC,EAAC8B,EAAS,CAAA,KAEdpC,EAACqC,EAAgB,CAAA/D,SAAA,CACbgC,EAACgC,EAAW,CAAAhE,SACPiB,EAAOE,QAEZa,EAACU,EAAW,CAAC3C,MAAOA,OAExBiC,EAACiC,EAAiB,CACd7B,UAAU,OACVE,KAAK,SACLD,QAAS,IAAM7C,aAAO,EAAPA,IACf0D,SAAUrD,EAAmB,aACjB,SAASoB,EAAOE,QAAOnB,SAElCiB,EAAOI,WAGhBW,EAACkC,EAAU,CAAAlE,SAAEA,IACbgC,EAACmC,EAAY,CAAAC,aAAetE,aAAM,EAANA,EAAQuE,OAAMrE,SACtCgC,EAACsC,EAAgB,CAACjC,QA9E/B,KACftB,GAAW,GACXtB,SAAAA,GAAU,EA4EuDO,SAChCiB,EAAOG,sBAQf,EAIjC/B,EAAYkF,YAAc"}

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

@@ -5,7 +5,9 @@ export declare const MobileContainer: import("styled-components/dist/types").ISt
 export declare const MobileOverlayContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FloatingWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetTop"> & FilterHeaderProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetTop"> & FilterHeaderProps, never>>> & string;
+export declare const FilterTitleGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
+export declare const FilterToggleContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const FilterClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export declare const FilterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonWithIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
 export {};

package/filter/filter-modal.styles.js

@@ -1,30 +1,38 @@
-import t from"styled-components";import{Button as i}from"../button/button.js";import{ButtonWithIcon as o}from"../button-with-icon/button-with-icon.js";import{Colour as n,Font as e,Spacing as r}from"../theme/index.js";const d=t.div`
-    background-color: ${n["bg-strong"]};
+import i from"styled-components";import{Button as t}from"../button/button.js";import{ButtonWithIcon as n}from"../button-with-icon/button-with-icon.js";import{Colour as o,Spacing as e,Font as a}from"../theme/index.js";const g=i.div`
+    background-color: ${o["bg-strong"]};
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: column;
-`,g=t.div`
-    background-color: ${n.bg};
+`,r=i.div`
+    background-color: ${o.bg};
     height: 100%;
     width: 100%;
-`,a=t.div`
+`,s=i.div`
     height: 100%;
-`,c=t.div`
+`,d=i.div`
     display: flex;
     align-items: center;
-    background-color: ${n.bg};
-    ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,l=t.h2`
-    ${e["heading-xs-semibold"]}
+    background-color: ${o.bg};
+    ${i=>i.$insetTop&&`padding-top: ${i.$insetTop}px;`}
+`,p=i.div`
     flex: 1;
-    text-align: center;
-    margin: ${r["spacing-24"]} 0;
-`,p=t(i.Small)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${e["spacing-8"]};
+    margin: ${e["spacing-24"]} 0;
+`,c=i.h2`
+    ${a["heading-xs-semibold"]}
+`,l=i.span`
+    display: inline-flex;
+    align-items: center;
+    gap: ${e["spacing-8"]};
+`,m=i(t.Small)`
     background-color: transparent;
     height: 100%;
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-`,s=t(o.Default)`
+    padding: ${e["spacing-24"]} ${e["spacing-20"]};
+`,h=i(n.Default)`
     width: 100%;
-`;export{s as FilterButton,p as FilterClearButton,c as FilterHeader,l as FilterTitle,a as FloatingWrapper,d as MobileContainer,g as MobileOverlayContainer};
+`;export{h as FilterButton,m as FilterClearButton,d as FilterHeader,c as FilterTitle,p as FilterTitleGroup,l as FilterToggleContent,s as FloatingWrapper,g as MobileContainer,r as MobileOverlayContainer};
 //# sourceMappingURL=filter-modal.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","Font","Spacing","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;;;cAGGC,EAAQ;EAGTC,EAAoBZ,EAAOa,EAAOC,MAAM;;;eAGtCH,EAAQ,iBAAiBA,EAAQ;EAOnCI,EAAef,EAAOgB,EAAeC,QAAQ;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { Colour, Font, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterToggleContent = styled.span`\n    display: inline-flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(ButtonWithIcon.Default)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterToggleContent","span","FilterClearButton","Button","Small","FilterButton","ButtonWithIcon","Default"],"mappings":"yNAgBO,MAAMA,EAAkBC,EAAOC,GAAG;wBACjBC,EAAO;;;;;EAOlBC,EAAyBH,EAAOC,GAAG;wBACxBC,EAAW;;;EAKtBE,EAAkBJ,EAAOC,GAAG;;EAQ5BI,EAAeL,EAAOC,GAAsB;;;wBAGjCC,EAAW;MAC5BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAmBR,EAAOC,GAAG;;;;;WAK/BQ,EAAQ;cACLA,EAAQ;EAGTC,EAAcV,EAAOW,EAAE;MAC9BC,EAAK;EAGEC,EAAsBb,EAAOc,IAAI;;;WAGnCL,EAAQ;EAGNM,EAAoBf,EAAOgB,EAAOC,MAAM;;;eAGtCR,EAAQ,iBAAiBA,EAAQ;EAOnCS,EAAelB,EAAOmB,EAAeC,QAAQ;;"}

package/filter/filter-sidebar.d.ts

@@ -1,5 +1,5 @@
 import { 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, ...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{FilterContext as i}from"./filter-context.js";import{DesktopContainer as a,FilterHeader as o,FilterTitle as d,FilterClearButton as s}from"./filter-sidebar.styles.js";import{FilterBody as n}from"./filter.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(i.Provider,{value:{mode:"default",rootNode:v},children:t(a,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:v},h,{children:[t(o,{children:[l(d,{children:j.title}),l(s,{styleType:"link",type:"button",onClick:()=>null==u?void 0:u(),disabled:f,"aria-label":`clear ${j.title}`,children:j.clear})]}),l(n,{children:b})]}))})};c.displayName="Filter.Sidebar";export{c as FilterSidebar};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as l}from"react/jsx-runtime";import{useRef as r}from"react";import{FilterBadge as i}from"./filter-badge.js";import{FilterContext as o}from"./filter-context.js";import{DesktopContainer as a,FilterHeader as d,FilterTitleGroup as n,FilterTitle as s,FilterClearButton as c}from"./filter-sidebar.styles.js";import{FilterBody as m}from"./filter.styles.js";const u=u=>{var{customLabels:f,onClear:b,clearButtonDisabled:p=!1,count:h,children:j,headerTitle:v}=u,y=e(u,["customLabels","onClear","clearButtonDisabled","count","children","headerTitle"]);const k=r(null),C={title:(null==f?void 0:f.headerTitle)||v||"Filters",clear:(null==f?void 0:f.clearButtonLabel)||"Clear"};return t(o.Provider,{value:{mode:"default",rootNode:k},children:l(a,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:k},y,{children:[l(d,{children:[l(n,{children:[t(s,{children:C.title}),t(i,{count:h})]}),t(c,{styleType:"link",type:"button",onClick:()=>null==b?void 0:b(),disabled:p,"aria-label":`clear ${C.title}`,children:C.clear})]}),t(m,{children:j})]}))})};u.displayName="Filter.Sidebar";export{u as FilterSidebar};
 //# sourceMappingURL=filter-sidebar.js.map

package/filter/filter-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.js","sources":["../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    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":"4VAWO,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 { useRef } from \"react\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FilterTitleGroup,\n} from \"./filter-sidebar.styles\";\nimport { FilterSidebarProps } from \"./types\";\nimport { FilterBody } from \"./filter.styles\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    count,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitleGroup>\n                        <FilterTitle>{labels.title}</FilterTitle>\n                        <FilterBadge count={count} />\n                    </FilterTitleGroup>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","count","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitleGroup","FilterTitle","FilterBadge","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"kaAaO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,MAC3BA,EAAKC,SACLA,EACAC,YAAaC,GAAYP,EACtBQ,EAAUC,EAAAT,EAPa,mFAS1B,MAAMU,EAAUC,EAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcK,cAAeC,GAAgB,UACpDO,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,YACxDY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,aAEJc,EAACK,EAAY,CAAAtB,SAAA,CACTiB,EAACM,EAAgB,CAAAvB,SAAA,CACbW,EAACa,EAAW,CAAAxB,SAAEO,EAAOC,QACrBG,EAACc,EAAW,CAAC1B,MAAOA,OAExBY,EAACe,GACGC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAMhC,aAAO,EAAPA,IACfiC,SAAUhC,EAAmB,aACjB,SAASS,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAACoB,EAAU,CAAA/B,SAAEA,SAEI,EAIjCN,EAAcsC,YAAc"}

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

@@ -1,4 +1,5 @@
 export declare const DesktopContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const FilterTitleGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const FilterTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
 export declare const FilterClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;

package/filter/filter-sidebar.styles.js

@@ -1,23 +1,28 @@
-import o from"styled-components";import{Button as i}from"../button/button.js";import{Colour as r,Border as d,Radius as n,Font as e,Spacing as t}from"../theme/index.js";const a=o.div`
-    background-color: ${r.bg};
-    border: ${d["width-010"]} ${d.solid} ${r.border};
-    border-radius: ${n.md};
+import i from"styled-components";import{Button as o}from"../button/button.js";import{Colour as n,Border as r,Radius as t,Spacing as e,Font as d}from"../theme/index.js";const a=i.div`
+    background-color: ${n.bg};
+    border: ${r["width-010"]} ${r.solid} ${n.border};
+    border-radius: ${t.md};
     overflow: hidden;
     width: 100%;
-`,g=o.div`
+`,s=i.div`
     display: flex;
     align-items: center;
 
-    background-color: ${r.bg};
-`,s=o.h2`
-    ${e["heading-xs-semibold"]}
+    background-color: ${n.bg};
+`,g=i.div`
     flex: 1;
-    margin: ${t["spacing-24"]} 0 ${t["spacing-24"]}
-        ${t["spacing-20"]};
-`,c=o(i.Small)`
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: ${e["spacing-8"]};
+    margin: ${e["spacing-24"]} 0 ${e["spacing-24"]}
+        ${e["spacing-20"]};
+`,l=i.h2`
+    ${d["heading-xs-semibold"]}
+`,c=i(o.Small)`
     background-color: transparent;
-    padding-right: ${t["spacing-20"]};
-    padding-left: ${t["spacing-20"]};
+    padding-right: ${e["spacing-20"]};
+    padding-left: ${e["spacing-20"]};
     height: 100%;
-`;export{a as DesktopContainer,c as FilterClearButton,g as FilterHeader,s as FilterTitle};
+`;export{a as DesktopContainer,c as FilterClearButton,s as FilterHeader,l as FilterTitle,g as FilterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitle","h2","Font","Spacing","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;EAGtBI,EAAcN,EAAOO,EAAE;MAC9BC,EAAK;;cAEGC,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAoBV,EAAOW,EAAOC,MAAM;;qBAEhCH,EAAQ;oBACTA,EAAQ;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Button } from \"../button\";\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const FilterTitleGroup = styled.div`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","Colour","Border","Radius","FilterHeader","FilterTitleGroup","Spacing","FilterTitle","h2","Font","FilterClearButton","Button","Small"],"mappings":"wKAQO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAW;cACrBC,EAAO,gBAAgBA,EAAc,SAAKD,EAAe;qBAClDE,EAAW;;;EASnBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAW;EAGtBI,EAAmBN,EAAOC,GAAG;;;;;WAK/BM,EAAQ;cACLA,EAAQ,mBAAmBA,EAAQ;UACvCA,EAAQ;EAGLC,EAAcR,EAAOS,EAAE;MAC9BC,EAAK;EAGEC,EAAoBX,EAAOY,EAAOC,MAAM;;qBAEhCN,EAAQ;oBACTA,EAAQ;;"}

package/filter/filter.d.ts

@@ -2,11 +2,11 @@ import { FilterProps } from "./types";
 export declare const Filter: {
     ({ children, className, style, onDismiss, onDone, onModalOpen, toggleFilterButtonStyle, insets, id, "data-testid": testId, ...props }: FilterProps): import("react/jsx-runtime").JSX.Element;
     Sidebar: {
-        ({ customLabels, onClear, clearButtonDisabled, children, headerTitle: _headerTitle, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Modal: {
-        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: {

package/filter/types.d.ts

@@ -18,6 +18,7 @@ export interface FilterBaseProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
     style?: CSSProperties | undefined;
+    count?: number | undefined;
     clearButtonDisabled?: boolean | undefined;
     /** Called when clear button is pressed */
     onClear?: (() => void) | undefined;

package/form/form-wrapper.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Children as r,cloneElement as t}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormLabel as i}from"./form-label.js";import{ErrorMessageContainer as o,ErrorIcon as a,ErrorMessage as d}from"./form-label.style.js";import{Container as n,ColDivContainer as m,V2_ColDivContainer as b}from"./form-wrapper.style.js";const p=({label:p,errorMessage:c,id:u,disabled:C,children:f,layoutType:g,mobileCols:x,tabletCols:h,desktopCols:j,xxsCols:v,xsCols:y,smCols:$,mdCols:w,lgCols:k,xlCols:F,xxlCols:O,"data-testid":B,"data-error-testid":I})=>{const M=!g&&(x||h||j)?"v2-grid":!g&&(v||y||$||w||k||F||O)?"grid":g||"flex",T="string"==typeof c?c.trim():c,q=s(),z=`${null!=u?u:q}-label`,A=`${null!=u?u:q}-label-subtitle`,D=`${null!=u?u:q}-error-message`;const E=(e=>{switch(e){case"v2-grid":return b;case"grid":return m;case"flex":return n}})(M);return e(E,Object.assign({"data-testid":B},(e=>{switch(e){case"v2-grid":return{mobileCols:x,tabletCols:h,desktopCols:j};case"grid":return{xxsCols:v,xsCols:y,smCols:$,mdCols:w,lgCols:k,xlCols:F,xxlCols:O};case"flex":return}})(M),{children:[p&&l(i,"string"==typeof p?{htmlFor:`${u}-base`,"data-testid":u?`${u}-label`:"form-label",id:z,disabled:C,children:p}:Object.assign({htmlFor:`${u}-base`,"data-testid":u?`${u}-label`:"form-label",id:z,disabled:C},p)),(()=>{const e={"aria-invalid":!!c,"aria-describedby":[T?D:void 0,"object"==typeof p&&(null==p?void 0:p.subtitle)?A:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":p?z:void 0};return r.map(f,(l=>t(l,e)))})(),T&&e(o,{children:[l(a,{"aria-hidden":!0}),l(d,{id:D,tabIndex:0,"data-testid":null!=I?I:u?`${u}-error-message`:"error-message",children:T})]})]}))};export{p as FormWrapper};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import{Children as r,isValidElement as t,Fragment as s,cloneElement as i}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as o}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormLabel as a}from"./form-label.js";import{ErrorMessageContainer as d,ErrorIcon as n,ErrorMessage as m}from"./form-label.style.js";import{Container as b,ColDivContainer as p,V2_ColDivContainer as c}from"./form-wrapper.style.js";const u=({label:u,errorMessage:C,id:f,disabled:g,children:x,layoutType:h,mobileCols:j,tabletCols:v,desktopCols:y,xxsCols:$,xsCols:w,smCols:k,mdCols:F,lgCols:O,xlCols:B,xxlCols:I,"data-testid":M,"data-error-testid":T})=>{const q=!h&&(j||v||y)?"v2-grid":!h&&($||w||k||F||O||B||I)?"grid":h||"flex",z="string"==typeof C?C.trim():C,A=o(),D=`${null!=f?f:A}-label`,E=`${null!=f?f:A}-label-subtitle`,G=`${null!=f?f:A}-error-message`;const H=(e=>{switch(e){case"v2-grid":return c;case"grid":return p;case"flex":return b}})(q);return e(H,Object.assign({"data-testid":M},(e=>{switch(e){case"v2-grid":return{mobileCols:j,tabletCols:v,desktopCols:y};case"grid":return{xxsCols:$,xsCols:w,smCols:k,mdCols:F,lgCols:O,xlCols:B,xxlCols:I};case"flex":return}})(q),{children:[u&&l(a,"string"==typeof u?{htmlFor:`${f}-base`,"data-testid":f?`${f}-label`:"form-label",id:D,disabled:g,children:u}:Object.assign({htmlFor:`${f}-base`,"data-testid":f?`${f}-label`:"form-label",id:D,disabled:g},u)),(()=>{const e={"aria-invalid":!!C,"aria-describedby":[z?G:void 0,"object"==typeof u&&(null==u?void 0:u.subtitle)?E:void 0].filter(Boolean).join(" ")||void 0,"aria-labelledby":u?D:void 0};return r.map(x,(l=>t(l)&&l.type===s?i(l):i(l,e)))})(),z&&e(d,{children:[l(n,{"aria-hidden":!0}),l(m,{id:G,tabIndex:0,"data-testid":null!=T?T:f?`${f}-error-message`:"error-message",children:z})]})]}))};export{u as FormWrapper};
 //# sourceMappingURL=form-wrapper.js.map

package/form/form-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport { Children, ComponentType, cloneElement } from \"react\";\nimport { useId } from \"../util\";\nimport { FormLabel } from \"./form-label\";\nimport {\n    ErrorIcon,\n    ErrorMessage,\n    ErrorMessageContainer,\n} from \"./form-label.style\";\nimport {\n    ColDivContainer,\n    Container,\n    V2_ColDivContainer,\n} from \"./form-wrapper.style\";\nimport { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    disabled,\n    children,\n    layoutType,\n    mobileCols,\n    tabletCols,\n    desktopCols,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (!layoutType && (mobileCols || tabletCols || desktopCols)) {\n            return \"v2-grid\";\n        } else if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"v2-grid\":\n                return {\n                    mobileCols,\n                    tabletCols,\n                    desktopCols,\n                };\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ComponentType => {\n        switch (layoutType) {\n            case \"v2-grid\":\n                return V2_ColDivContainer;\n            case \"grid\":\n                return ColDivContainer;\n            case \"flex\":\n                return Container;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                    disabled={disabled}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                disabled={disabled}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) =>\n            cloneElement(child, ariaState)\n        );\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <ErrorMessageContainer>\n                    <ErrorIcon aria-hidden />\n                    <ErrorMessage\n                        id={errorMessageId}\n                        tabIndex={0}\n                        data-testid={\n                            errorTestId ??\n                            // FIXME: kept for backwards-compatibility\n                            // in most cases data-testid should be separate from id\n                            (id ? `${id}-error-message` : \"error-message\")\n                        }\n                    >\n                        {errorMessage}\n                    </ErrorMessage>\n                </ErrorMessageContainer>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","disabled","children","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","V2_ColDivContainer","ColDivContainer","Container","getContainerComponent","_jsxs","Object","assign","getContainerLayoutProps","_jsx","FormLabel","htmlFor","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","cloneElement","renderChildren","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"yjBAqBaA,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,WACAC,aACAC,aACAC,aACAC,cACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GA+BGb,IAAeC,GAAcC,GAAcC,GACrC,WAENH,IACAI,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCV,GACD,OA5CTL,EAA+B,iBAATC,EAAoBA,EAAKkB,OAASlB,EACxDmB,EAAaC,IACbC,EAAU,GAAGpB,QAAAA,EAAMkB,UACnBG,EAAa,GAAGrB,QAAAA,EAAMkB,mBACtBI,EAAiB,GAAGtB,QAAAA,EAAMkB,kBA8ChC,MA6EMK,EAtDwB,CAC1BpB,IAEA,OAAQA,GACJ,IAAK,UACD,OAAOqB,EACX,IAAK,OACD,OAAOC,EACX,IAAK,OACD,OAAOC,IA6CQC,CAAsBX,GAEjD,OACIY,EAACL,EAAkBM,OAAAC,OAAA,CAAA,cACFhB,GAjFW,CAACX,IAC7B,OAAQA,GACJ,IAAK,UACD,MAAO,CACHC,aACAC,aACAC,eAER,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SA+DAkB,CAAwBf,cAE3BnB,GAzCGmC,EAACC,EAFY,iBAAVpC,EAEO,CACNqC,QAAS,GAAGlC,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,EAAQC,SAEjBL,GAKCgC,OAAAC,OAAA,CACNI,QAAS,GAAGlC,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,GACNJ,IAKO,MACnB,MAAMsC,EAAY,CACd,iBA3GKpC,EA4GL,mBAnGA,CACID,EAAewB,OAAiBc,EANhB,iBAAVvC,IAAwBA,aAAK,EAALA,EAAOwC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EA+FlB,kBAAmBvC,EAAQuB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIxC,GAAWyC,GAC3BC,EAAaD,EAAOR,IACvB,EAWIU,GACA/C,GACG8B,EAACkB,EAAqB,CAAA5C,SAAA,CAClB8B,EAACe,EAAS,CAAA,eAAA,IACVf,EAACgB,GACGhD,GAAIsB,EACJ2B,SAAU,EAAC,cAEPlC,QAAAA,EAGCf,EAAK,GAAGA,kBAAqB,yBAGjCF,UAII"}
+{"version":3,"file":"form-wrapper.js","sources":["../../src/form/form-wrapper.tsx"],"sourcesContent":["/**\n * This is a SUPPORTING component\n * (Do not include in the main export)\n *\n */\n\nimport {\n    Children,\n    ComponentType,\n    Fragment,\n    cloneElement,\n    isValidElement,\n} from \"react\";\nimport { useId } from \"../util\";\nimport { FormLabel } from \"./form-label\";\nimport {\n    ErrorIcon,\n    ErrorMessage,\n    ErrorMessageContainer,\n} from \"./form-label.style\";\nimport {\n    ColDivContainer,\n    Container,\n    V2_ColDivContainer,\n} from \"./form-wrapper.style\";\nimport { FormElementLayoutType, FormWrapperProps } from \"./types\";\n\nexport const FormWrapper = ({\n    label,\n    errorMessage: eRaw,\n    id,\n    disabled,\n    children,\n    layoutType,\n    mobileCols,\n    tabletCols,\n    desktopCols,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    \"data-testid\": testId,\n    \"data-error-testid\": errorTestId,\n}: FormWrapperProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const updatedLayoutType = getLayoutType();\n    const errorMessage = typeof eRaw === \"string\" ? eRaw.trim() : eRaw;\n    const internalId = useId();\n    const labelId = `${id ?? internalId}-label`; // matches FormLabel\n    const subtitleId = `${id ?? internalId}-label-subtitle`; // matches FormLabel\n    const errorMessageId = `${id ?? internalId}-error-message`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const isInvalidState = (): boolean => {\n        return !!eRaw;\n    };\n\n    const hasSubtitleLabel = (): boolean => {\n        return typeof label === \"object\" && !!label?.subtitle;\n    };\n\n    const getAriaDescribedBy = (): string | undefined => {\n        return (\n            [\n                errorMessage ? errorMessageId : undefined,\n                hasSubtitleLabel() ? subtitleId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined\n        );\n    };\n\n    function getLayoutType(): FormElementLayoutType {\n        if (!layoutType && (mobileCols || tabletCols || desktopCols)) {\n            return \"v2-grid\";\n        } else if (\n            !layoutType &&\n            (xxsCols ||\n                xsCols ||\n                smCols ||\n                mdCols ||\n                lgCols ||\n                xlCols ||\n                xxlCols)\n        ) {\n            return \"grid\";\n        } else if (!layoutType) {\n            return \"flex\";\n        } else {\n            return layoutType;\n        }\n    }\n\n    const getContainerLayoutProps = (layoutType: FormElementLayoutType) => {\n        switch (layoutType) {\n            case \"v2-grid\":\n                return {\n                    mobileCols,\n                    tabletCols,\n                    desktopCols,\n                };\n            case \"grid\":\n                return {\n                    xxsCols,\n                    xsCols,\n                    smCols,\n                    mdCols,\n                    lgCols,\n                    xlCols,\n                    xxlCols,\n                };\n            case \"flex\":\n                return undefined;\n        }\n    };\n\n    const getContainerComponent = (\n        layoutType: FormElementLayoutType\n    ): ComponentType => {\n        switch (layoutType) {\n            case \"v2-grid\":\n                return V2_ColDivContainer;\n            case \"grid\":\n                return ColDivContainer;\n            case \"flex\":\n                return Container;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderFormLabel = (): JSX.Element => {\n        if (typeof label === \"string\") {\n            return (\n                <FormLabel\n                    htmlFor={`${id}-base`}\n                    // FIXME: kept for backwards-compatibility\n                    // in most cases data-testid should be separate from id\n                    data-testid={id ? `${id}-label` : \"form-label\"}\n                    id={labelId}\n                    disabled={disabled}\n                >\n                    {label}\n                </FormLabel>\n            );\n        }\n        return (\n            <FormLabel\n                htmlFor={`${id}-base`}\n                data-testid={id ? `${id}-label` : \"form-label\"}\n                id={labelId}\n                disabled={disabled}\n                {...label}\n            />\n        );\n    };\n\n    const renderChildren = (): JSX.Element | JSX.Element[] => {\n        const ariaState = {\n            \"aria-invalid\": isInvalidState(),\n            \"aria-describedby\": getAriaDescribedBy(),\n            \"aria-labelledby\": label ? labelId : undefined,\n        };\n        return Children.map(children, (child) => {\n            if (isValidElement(child) && child.type === Fragment) {\n                return cloneElement(child);\n            }\n            return cloneElement(child, ariaState);\n        });\n    };\n\n    const ContainerComponent = getContainerComponent(updatedLayoutType);\n\n    return (\n        <ContainerComponent\n            data-testid={testId}\n            {...getContainerLayoutProps(updatedLayoutType)}\n        >\n            {label && renderFormLabel()}\n            {renderChildren()}\n            {errorMessage && (\n                <ErrorMessageContainer>\n                    <ErrorIcon aria-hidden />\n                    <ErrorMessage\n                        id={errorMessageId}\n                        tabIndex={0}\n                        data-testid={\n                            errorTestId ??\n                            // FIXME: kept for backwards-compatibility\n                            // in most cases data-testid should be separate from id\n                            (id ? `${id}-error-message` : \"error-message\")\n                        }\n                    >\n                        {errorMessage}\n                    </ErrorMessage>\n                </ErrorMessageContainer>\n            )}\n        </ContainerComponent>\n    );\n};\n"],"names":["FormWrapper","label","errorMessage","eRaw","id","disabled","children","layoutType","mobileCols","tabletCols","desktopCols","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","testId","errorTestId","updatedLayoutType","trim","internalId","useId","labelId","subtitleId","errorMessageId","ContainerComponent","V2_ColDivContainer","ColDivContainer","Container","getContainerComponent","_jsxs","Object","assign","getContainerLayoutProps","_jsx","FormLabel","htmlFor","ariaState","undefined","subtitle","filter","Boolean","join","Children","map","child","isValidElement","type","Fragment","cloneElement","renderChildren","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"2lBA2BaA,EAAc,EACvBC,QACAC,aAAcC,EACdC,KACAC,WACAC,WACAC,aACAC,aACAC,aACAC,cACAC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,UACA,cAAeC,EACf,oBAAqBC,MAKrB,MAAMC,GA+BGb,IAAeC,GAAcC,GAAcC,GACrC,WAENH,IACAI,GACGC,GACAC,GACAC,GACAC,GACAC,GACAC,GAEG,OACCV,GACD,OA5CTL,EAA+B,iBAATC,EAAoBA,EAAKkB,OAASlB,EACxDmB,EAAaC,IACbC,EAAU,GAAGpB,QAAAA,EAAMkB,UACnBG,EAAa,GAAGrB,QAAAA,EAAMkB,mBACtBI,EAAiB,GAAGtB,QAAAA,EAAMkB,kBA8ChC,MAgFMK,EAzDwB,CAC1BpB,IAEA,OAAQA,GACJ,IAAK,UACD,OAAOqB,EACX,IAAK,OACD,OAAOC,EACX,IAAK,OACD,OAAOC,IAgDQC,CAAsBX,GAEjD,OACIY,EAACL,EAAkBM,OAAAC,OAAA,CAAA,cACFhB,GApFW,CAACX,IAC7B,OAAQA,GACJ,IAAK,UACD,MAAO,CACHC,aACAC,aACAC,eAER,IAAK,OACD,MAAO,CACHC,UACAC,SACAC,SACAC,SACAC,SACAC,SACAC,WAER,IAAK,OACD,SAkEAkB,CAAwBf,cAE3BnB,GA5CGmC,EAACC,EAFY,iBAAVpC,EAEO,CACNqC,QAAS,GAAGlC,SAAS,cAGRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,EAAQC,SAEjBL,GAKCgC,OAAAC,OAAA,CACNI,QAAS,GAAGlC,SAAS,cACRA,EAAK,GAAGA,UAAa,aAClCA,GAAIoB,EACJnB,SAAUA,GACNJ,IAKO,MACnB,MAAMsC,EAAY,CACd,iBA3GKpC,EA4GL,mBAnGA,CACID,EAAewB,OAAiBc,EANhB,iBAAVvC,IAAwBA,aAAK,EAALA,EAAOwC,UAOhBhB,OAAae,GAEjCE,OAAOC,SACPC,KAAK,WAAQJ,EA+FlB,kBAAmBvC,EAAQuB,OAAUgB,GAEzC,OAAOK,EAASC,IAAIxC,GAAWyC,GACvBC,EAAeD,IAAUA,EAAME,OAASC,EACjCC,EAAaJ,GAEjBI,EAAaJ,EAAOR,IAC7B,EAWGa,GACAlD,GACG8B,EAACqB,EAAqB,CAAA/C,SAAA,CAClB8B,EAACkB,EAAS,CAAA,eAAA,IACVlB,EAACmB,GACGnD,GAAIsB,EACJ8B,SAAU,EAAC,cAEPrC,QAAAA,EAGCf,EAAK,GAAGA,kBAAqB,yBAGjCF,UAII"}

package/index.js

@@ -1,2 +1,2 @@
-export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{withPopover}from"./popover/popover-hoc.js";export{Popover}from"./popover/popover.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{A11yPlaygroundTheme,BookingSGTheme,Border,Breakpoint,CCubeTheme,Colour,Font,IMDATheme,LifeSGTheme,MediaQuery,Motion,MyLegacyTheme,OneServiceTheme,PATheme,RBSTheme,Radius,SGWDigitalLobbyTheme,SGWDigitalLobbyThemeBase,SMGSTheme,SPFTheme,Shadow,Spacing,SupportGoWhereTheme,SupportGoWhereThemeBase,ThemeComponent}from"./theme/index.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/typography.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{V2_Text}from"./v2_text/text.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{DSThemeProvider}from"./theme/ds-theme-provider.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./theme/use-theme-mode.js";
+export{Accordion}from"./accordion/accordion.js";export{Alert}from"./alert/alert.js";export{LoadingSpinner}from"./animations/loading-spinner/loading-spinner.js";export{LoadingDots}from"./animations/loading-dots/loading-dots.js";export{LoadingDotsSpinner}from"./animations/loading-dots-spinner/loading-dots-spinner.js";export{ThemedLoadingSpinner}from"./animations/themed-loading-spinner/themed-loading-spinner.js";export{Avatar}from"./avatar/avatar.js";export{Badge}from"./badge/badge.js";export{BoxContainer}from"./box-container/box-container.js";export{Breadcrumb}from"./breadcrumb/breadcrumb.js";export{Button}from"./button/button.js";export{ButtonWithIcon}from"./button-with-icon/button-with-icon.js";export{Calendar}from"./calendar/calendar.js";export{Card}from"./card/card.js";export{Checkbox}from"./checkbox/checkbox.js";export{CountdownTimer}from"./countdown-timer/countdown-timer.js";export{DataTable}from"./data-table/data-table.js";export{DateInput}from"./date-input/date-input.js";export{DateNavigator}from"./date-navigator/date-navigator.js";export{DateRangeInput}from"./date-range-input/date-range-input.js";export{Divider}from"./divider/divider.js";export{Drawer}from"./drawer/drawer.js";export{ESignature}from"./e-signature/e-signature.js";export{ErrorDisplay}from"./error-display/error-display.js";export{ErrorDisplayHelper}from"./error-display/helper.js";export{FeedbackRating}from"./feedback-rating/feedback-rating.js";export{FileDownload}from"./file-download/file-download.js";export{FileUpload}from"./file-upload/file-upload.js";export{Filter}from"./filter/filter.js";export{Footer}from"./footer/footer.js";export{Form}from"./form/index.js";export{Component,FullscreenImageCarousel}from"./fullscreen-image-carousel/fullscreen-image-carousel.js";export{HistogramSlider}from"./histogram-slider/histogram-slider.js";export{IconButton}from"./icon-button/icon-button.js";export{ImageButton}from"./image-button/image-button.js";export{Input}from"./input/input.js";export{InputGroup}from"./input-group/input-group.js";export{InputMultiSelect}from"./input-multi-select/input-multi-select.js";export{InputNestedMultiSelect}from"./input-nested-multi-select/input-nested-multi-select.js";export{InputNestedSelect}from"./input-nested-select/input-nested-select.js";export{InputRangeSelect}from"./input-range-select/input-range-select.js";export{InputRangeSlider}from"./input-range-slider/input-range-slider.js";export{InputSelect}from"./input-select/input-select.js";export{InputSlider}from"./input-slider/input-slider.js";export{Textarea}from"./input-textarea/textarea.js";export{LanguageSwitcher}from"./language-switcher/language-switcher.js";export{Layout}from"./layout/index.js";export{LinkList}from"./link-list/link-list.js";export{Markup}from"./markup/markup.js";export{MaskedInput}from"./masked-input/masked-input.js";export{Masonry}from"./masonry/masonry.js";export{Masthead}from"./masthead/masthead.js";export{Menu,MenuTrigger}from"./menu/menu.js";export{Modal}from"./modal/index.js";export{ModalV2}from"./modal-v2/index.js";export{Navbar}from"./navbar/navbar.js";export{NBComponent,NotificationBanner}from"./notification-banner/notification-banner.js";export{withNotificationBanner}from"./notification-banner/notification-banner-hoc.js";export{OtpInput}from"./otp-input/otp-input.js";export{Overlay}from"./overlay/overlay.js";export{Pagination}from"./pagination/pagination.js";export{PhoneNumberInput}from"./phone-number-input/phone-number-input.js";export{Pill}from"./pill/pill.js";export{withPopover}from"./popover/popover-hoc.js";export{Popover}from"./popover/popover.js";export{PopoverV2}from"./popover-v2/popover.js";export{PopoverInline}from"./popover-v2/popover-inline/popover-inline.js";export{PopoverTrigger}from"./popover-v2/popover-trigger.js";export{PredictiveTextInput}from"./predictive-text-input/predictive-text-input.js";export{ProgressIndicator}from"./progress-indicator/progress-indicator.js";export{RadioButton}from"./radio-button/radio-button.js";export{SelectHistogram}from"./select-histogram/select-histogram.js";export{Sidenav}from"./sidenav/sidenav.js";export{SingpassButton}from"./singpass-button/singpass-button.js";export{SmartAppBanner}from"./smart-app-banner/smart-app-banner.js";export{Tab}from"./tab/tab.js";export{Table}from"./table/table.js";export{Tag}from"./tag/tag.js";export{TextList}from"./text-list/index.js";export{A11yPlaygroundTheme,BookingSGTheme,Border,Breakpoint,CCubeTheme,CareerCompassTheme,Colour,Font,IMDATheme,LifeSGTheme,MediaQuery,Motion,MyLegacyTheme,OneServiceTheme,PATheme,RBSTheme,Radius,SGWDigitalLobbyTheme,SGWDigitalLobbyThemeBase,SMGSTheme,SPFTheme,Shadow,Spacing,SupportGoWhereTheme,SupportGoWhereThemeBase,ThemeComponent}from"./theme/index.js";export{TimeRangePicker}from"./time-range-picker/time-range-picker.js";export{TimeSlotBar}from"./time-slot-bar/time-slot-bar.js";export{TimeSlotBarWeek}from"./time-slot-bar-week/time-slot-bar-week.js";export{TimeSlotWeekView}from"./time-slot-week-view/time-slot-week-view.js";export{Timeline}from"./timeline/timeline.js";export{Timepicker}from"./timepicker/timepicker.js";export{TimeTable}from"./timetable/timetable.js";export{Toast}from"./toast/toast.js";export{Toggle}from"./toggle/toggle.js";export{Tooltip}from"./tooltip/tooltip.js";export{withTooltip}from"./tooltip/tooltip-hoc.js";export{Typography}from"./typography/typography.js";export{UneditableSection}from"./uneditable-section/index.js";export{UnitNumberInput}from"./unit-number/unit-number-input.js";export{V2_Color}from"./v2_color/color.js";export{V2_DesignToken}from"./v2_design-token/design-token.js";export{V2_Layout}from"./v2_layout/index.js";export{V2_MediaQuery,V2_MediaWidths}from"./v2_media/media.js";export{V2_TextStyleHelper}from"./v2_text/helper.js";export{V2_TextStyle}from"./v2_text/text-style.js";export{V2_Text}from"./v2_text/text.js";export{RedirectScope}from"./v2_text/types.js";export{V2_TextList}from"./v2_text-list/index.js";export{V2_BaseTheme,V2_BookingSGTheme,V2_CCubeTheme,V2_MyLegacyTheme,V2_OneServiceTheme,V2_RBSTheme}from"./v2_theme/index.js";export{V2_Transition}from"./v2_transition/index.js";export{DSThemeProvider}from"./theme/ds-theme-provider.js";export{V2_ThemeContextKeys}from"./v2_theme/types.js";export{createThemeWithColourMode,getSystemColourMode,useDSTheme}from"./theme/use-theme-mode.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "3.4.0-canary.5",
+  "version": "3.4.0-canary.6",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import a,{useState as o,useRef as l,useEffect as u,useImperativeHandle as i}from"react";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import{DateInputHelper as c}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as s}from"../../util/use-state-ref.js";import{InputSection as p,InputContainer as m,DayInputSizer as h,DayInput as f,Divider as v,MonthInputSizer as g,MonthInput as y,YearInputSizer as b,YearInput as Y,Placeholder as x}from"./standalone-date-input.style.js";n.extend(r);const $=({disabled:r,readOnly:a,names:$,value:j,focused:D,hoverValue:M,placeholder:C,label:k,onChange:w,onFocus:B,onBlur:F,hideInputKeyboard:I,inputLabels:V=["Date","Month","Year"]},L)=>{const O=I?"none":"numeric",[E,K,S]=s(""),[P,R,z]=s(""),[T,q,A]=s(""),[G,H]=o("none"),[J,N]=o(!1),Q=l(null),U=l(null),W=l(null),X=l(null),[Z,_,ee]=le(M);u((()=>{var e;const[t="",n="",r=""]=le(j);K(t),R(n),q(r),t||n||r||!Q.current||!Q.current.contains(document.activeElement)||null===(e=U.current)||void 0===e||e.focus()}),[j]),u((()=>{var e;D||H("none"),D&&(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))}),[D]),i(L,(()=>({ref:Q,resetPlaceholder(){N(!1)},resetInput(){const[e="",t="",n=""]=le(j);K(e),R(t),q(n)},focusYearRef(){var e;null===(e=X.current)||void 0===e||e.focus()}})),[K,R,q,j]);const te=e=>{var t;e.preventDefault(),null===(t=U.current)||void 0===t||t.focus()},ne=e=>{e.target.select();const t=e.target.name;H(t)},re=e=>{const[t,r,a]=$,o={[t]:S.current,[r]:z.current,[a]:A.current},l=e.target.name,u=o[l],i=l!==a?d.padValue(u,!0):u;switch(l){case t:o[t]=i,K(i);break;case r:o[r]=i,R(i)}const c=`${o[a]}-${o[r]}-${o[t]}`,s=n(c,"YYYY-MM-DD",!0).isValid(),p=!o[t]&&!o[r]&&!o[a];s&&u!==i&&w(c),Q.current&&!Q.current.contains(e.relatedTarget)&&(H("none"),null==F||F(p||s))},ae=e=>{var t,r;if(M)return;const a=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:E,month:P,year:T};switch(a){case $[0]:l.day=o,K(o),2===o.length&&(null===(t=W.current)||void 0===t||t.focus());break;case $[1]:l.month=o,R(o),2===o.length&&(null===(r=X.current)||void 0===r||r.focus());break;case $[2]:l.year=o,q(o)}if(!l.day&&!l.month&&!l.year)return void w("");const u=`${l.year}-${l.month}-${l.day}`;n(u,"YYYY-MM-DD",!0).isValid()&&w(u)},oe=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(G===$[1]&&0===P.length&&(null===(t=U.current)||void 0===t||t.focus()),G===$[2]&&0===T.length&&(null===(n=W.current)||void 0===n||n.focus()))};function le(e){if(e){const t=c.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const r=n(t,"YYYY-MM-DD",!0);return[d.padValue(r.date().toString()),d.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e(p,{role:"group","aria-label":k,onClick:()=>{var e;r||a||(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))},onFocus:e=>{r||(N(!0),D||null==B||B(e))},children:[e(m,{ref:Q,$hover:!!M,children:[t(h,{children:t(f,{ref:U,name:$[0],maxLength:2,value:null!=Z?Z:E,onFocus:ne,onBlur:re,onChange:ae,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${$[0]}-input`,"aria-label":V[0],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[0]||a?"DD":""})}),t(v,{$inactive:0===E.length,children:"/"}),t(g,{children:t(y,{ref:W,name:$[1],maxLength:2,value:null!=_?_:P,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${$[1]}-input`,"aria-label":V[1],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[1]||a?"MM":""})}),t(v,{$inactive:0===P.length,children:"/"}),t(b,{children:t(Y,{ref:X,name:$[2],maxLength:4,value:null!=ee?ee:T,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{4}","data-testid":`${$[2]}-input`,"aria-label":V[2],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==$[2]||a?"YYYY":""})})]}),(()=>{if(!j&&!a&&C)return t(x,{$hide:J,$disabled:r,onMouseDown:te,children:C})})()]})},j=a.forwardRef($);export{$ as Component,j as StandaloneDateInput};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import a,{useState as o,useRef as l,useEffect as u,useImperativeHandle as i}from"react";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import{DateInputHelper as c}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as s}from"../../util/use-state-ref.js";import{InputSection as p,InputContainer as m,DayInputSizer as h,DayInput as f,Divider as v,MonthInputSizer as g,MonthInput as y,YearInputSizer as b,YearInput as Y,Placeholder as $}from"./standalone-date-input.style.js";n.extend(r);const x=({disabled:r,readOnly:a,names:x,value:j,focused:D,hoverValue:M,placeholder:C,label:k,onChange:w,onFocus:B,onBlur:F,hideInputKeyboard:I,inputLabels:V=["Date","Month","Year"]},L)=>{const O=I?"none":"numeric",[E,K,S]=s(""),[P,R,z]=s(""),[T,q,A]=s(""),[G,H]=o("none"),[J,N]=o(!1),Q=l(null),U=l(null),W=l(null),X=l(null),[Z,_,ee]=le(M);u((()=>{var e;const[t="",n="",r=""]=le(j);K(t),R(n),q(r),t||n||r||!Q.current||!Q.current.contains(document.activeElement)||null===(e=U.current)||void 0===e||e.focus()}),[j]),u((()=>{var e;D||H("none"),D&&(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))}),[D]),i(L,(()=>({ref:Q,resetPlaceholder(){N(!1)},resetInput(){const[e="",t="",n=""]=le(j);K(e),R(t),q(n)},focusYearRef(){var e;null===(e=X.current)||void 0===e||e.focus()}})),[K,R,q,j]);const te=e=>{var t;e.preventDefault(),null===(t=U.current)||void 0===t||t.focus()},ne=e=>{e.target.select();const t=e.target.name;H(t)},re=e=>{const[t,r,a]=x,o={[t]:S.current,[r]:z.current,[a]:A.current},l=e.target.name,u=o[l],i=l!==a?d.padValue(u,!0):u;switch(l){case t:o[t]=i,K(i);break;case r:o[r]=i,R(i)}const c=`${o[a]}-${o[r]}-${o[t]}`,s=n(c,"YYYY-MM-DD",!0).isValid(),p=!o[t]&&!o[r]&&!o[a];s&&u!==i&&w(c),Q.current&&!Q.current.contains(e.relatedTarget)&&(H("none"),null==F||F(p||s))},ae=e=>{var t,r;if(M)return;const a=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:E,month:P,year:T};switch(a){case x[0]:l.day=o,K(o),2===o.length&&(null===(t=W.current)||void 0===t||t.focus());break;case x[1]:l.month=o,R(o),2===o.length&&(null===(r=X.current)||void 0===r||r.focus());break;case x[2]:l.year=o,q(o)}if(!l.day&&!l.month&&!l.year)return void w("");const u=`${l.year}-${l.month}-${l.day}`;n(u,"YYYY-MM-DD",!0).isValid()&&w(u)},oe=e=>{var t,n;"Backspace"!==e.code&&"Backspace"!==e.key||(G===x[1]&&0===P.length&&(null===(t=U.current)||void 0===t||t.focus()),G===x[2]&&0===T.length&&(null===(n=W.current)||void 0===n||n.focus()))};function le(e){if(e){const t=c.sanitizeInput(e);if(!t)return[void 0,void 0,void 0];const r=n(t,"YYYY-MM-DD",!0);return[d.padValue(r.date().toString()),d.padValue((r.month()+1).toString()),r.year().toString()]}return[void 0,void 0,void 0]}return e(p,{role:"group","aria-label":k,onClick:()=>{var e;r||a||(N(!0),Q.current&&!Q.current.contains(document.activeElement)&&(null===(e=U.current)||void 0===e||e.focus()))},onFocus:e=>{r||(N(!0),D||null==B||B(e))},children:[e(m,{ref:Q,$hover:!!M,children:[t(h,{children:t(f,{ref:U,name:x[0],maxLength:2,value:null!=Z?Z:E,onFocus:ne,onBlur:re,onChange:ae,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${x[0]}-input`,"aria-label":V[0],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[0]||a?"DD":""})}),t(v,{$inactive:0===E.length,$disabled:r,children:"/"}),t(g,{children:t(y,{ref:W,name:x[1],maxLength:2,value:null!=_?_:P,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{2}","data-testid":`${x[1]}-input`,"aria-label":V[1],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[1]||a?"MM":""})}),t(v,{$inactive:0===P.length,$disabled:r,children:"/"}),t(b,{children:t(Y,{ref:X,name:x[2],maxLength:4,value:null!=ee?ee:T,onFocus:ne,onBlur:re,onChange:ae,onKeyDown:oe,type:"text",inputMode:O,pattern:"[0-9]{4}","data-testid":`${x[2]}-input`,"aria-label":V[2],disabled:r,readOnly:a,tabIndex:a?-1:0,autoComplete:"off",placeholder:G!==x[2]||a?"YYYY":""})})]}),(()=>{if(!j&&!a&&C)return t($,{$hide:J,$disabled:r,onMouseDown:te,children:C})})()]})},j=a.forwardRef(x);export{x as Component,j as StandaloneDateInput};
 //# sourceMappingURL=standalone-date-input.js.map