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

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

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

Files changed (1304) hide show

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-item.styles.js","sources":["../../src/filter/filter-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\nexport const tokens = {\n minimisableContent: {\n height: \"--fds-internal-filter-minimisableContent-height\",\n },\n} as const;\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const filterItemWrapper = css`\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemWrapperDarker = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const divider = css`\n display: none;\n height: 1px;\n background-color: ${Colour[\"border\"]};\n`;\n\nexport const dividerVisible = css`\n display: block;\n`;\n\nexport const dividerMobile = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterItemHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemHeaderMobile = css`\n background-color: transparent;\n`;\n\nexport const filterItemExpandButton = css`\n margin: 0 0 0 auto;\n\n color: ${Colour[\"icon\"]};\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIcon = css`\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n\n transform: rotate(0deg);\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const filterItemTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n\n margin: ${Spacing[\"spacing-24\"]} 0;\n margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterItemTitleMobile = css`\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-subtle\"]};\n\n margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]} 0\n ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// CONTENT STYLES\n// =============================================================================\n\nexport const expandableItem = css`\n overflow: hidden;\n`;\n\nexport const filterItemBody = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const minimisableContent = css`\n ${tokens.minimisableContent.height}: initial;\n height: var(${tokens.minimisableContent.height});\n`;\n\nexport const minimisableContentMinimisable = css`\n overflow: hidden;\n`;\n\nexport const filterItemMinimiseButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["tokens","minimisableContent","height","filterItemWrapper","filterItemWrapperDarker","divider","dividerVisible","dividerMobile","filterItemHeader","filterItemHeaderMobile","filterItemExpandButton","chevronIcon","chevronIconExpanded","filterItemTitle","filterItemTitleMobile","expandableItem","filterItemBody","minimisableContentMinimisable","filterItemMinimiseButton"],"mappings":"~~+DAIO~~,MAAMA,EAAS,CAClBC,mBAAoB,CAChBC,OAAQ,oDAQHC,EAAiB,WAIjBC,EAAuB,UAIvBC,EAAO,WAMPC,EAAc,UAIdC,EAAa,UAQbC,EAAgB,WAOhBC,EAAsB,WAItBC,EAAsB,UAStBC,EAAW,UAQXC,EAAmB,UAInBC,EAAe,UAQfC,EAAqB,UAYrBC,EAAc,UAIdC,EAAc,UAIdf,EAAkB,WAKlBgB,EAA6B,UAI7BC,EAAwB"}
1	+ {"version":3,"file":"filter-item.styles.js","sources":["../../src/filter/filter-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\nexport const tokens = {\n minimisableContent: {\n height: \"--fds-internal-filter-minimisableContent-height\",\n },\n} as const;\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const filterItemWrapper = css`\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemWrapperDarker = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const divider = css`\n display: none;\n height: 1px;\n background-color: ${Colour[\"border\"]};\n`;\n\nexport const dividerVisible = css`\n display: block;\n`;\n\nexport const dividerMobile = css`\n margin: 0 ${Spacing[\"spacing-16\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterItemHeader = css`\n display: flex;\n align-items: center;\n\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemHeaderMobile = css`\n background-color: transparent;\n`;\n\nexport const filterItemExpandButton = css`\n margin: 0 0 0 auto;\n\n color: ${Colour[\"icon\"]};\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\nexport const chevronIcon = css`\n height: ${Font.Spec[\"body-size-baseline\"]};\n width: ${Font.Spec[\"body-size-baseline\"]};\n\n transform: rotate(0deg);\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(180deg);\n`;\n\nexport const filterItemTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n\n margin: ${Spacing[\"spacing-24\"]} 0;\n margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterItemTitleMobile = css`\n ${Font[\"body-md-semibold\"]}\n color: ${Colour[\"text-subtle\"]};\n\n margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]} 0\n ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// CONTENT STYLES\n// =============================================================================\n\nexport const expandableItem = css`\n overflow: hidden;\n`;\n\nexport const filterItemBody = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const minimisableContent = css`\n ${tokens.minimisableContent.height}: initial;\n height: var(${tokens.minimisableContent.height});\n`;\n\nexport const minimisableContentMinimisable = css`\n overflow: hidden;\n`;\n\nexport const filterItemMinimiseButton = css`\n height: fit-content;\n padding: 0;\n margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["tokens","minimisableContent","height","filterItemWrapper","filterItemWrapperDarker","divider","dividerVisible","dividerMobile","filterItemHeader","filterItemHeaderMobile","filterItemExpandButton","chevronIcon","chevronIconExpanded","filterItemTitle","filterItemTitleMobile","expandableItem","filterItemBody","minimisableContentMinimisable","filterItemMinimiseButton"],"mappings":"8DAIO,MAAMA,EAAS,CAClBC,mBAAoB,CAChBC,OAAQ,oDAQHC,EAAiB,WAIjBC,EAAuB,UAIvBC,EAAO,WAMPC,EAAc,UAIdC,EAAa,UAQbC,EAAgB,WAOhBC,EAAsB,WAItBC,EAAsB,UAStBC,EAAW,UAQXC,EAAmB,UAInBC,EAAe,UAQfC,EAAqB,UAYrBC,EAAc,UAIdC,EAAc,UAIdf,EAAkB,WAKlBgB,EAA6B,UAI7BC,EAAwB"}

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

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

package/filter/filter-modal.d.ts CHANGED Viewed

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

package/filter/filter-modal.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-modal.js","sources":["../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport isNumber from \"lodash/isNumber\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n customLabels,\n onClear,\n onDone,\n onDismiss,\n onModalOpen,\n toggleFilterButtonStyle = \"light\",\n clearButtonDisabled = false,\n insets,\n children,\n toggleFilterButtonLabel: _toggleFilterButtonLabel,\n headerTitle: _headerTitle,\n doneButtonLabel: _doneButtonLabel,\n className,\n ...otherProps\n}: FilterModalProps) => {\n const { context, refs } = useFloating();\n const nodeRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n\n const [visible, setVisible] = useState(false);\n\n useApplyStyle(headerRef, {\n [styles.tokens.filterHeader.insetTop]: isNumber(insets?.top)\n ? `${insets.top}px`\n : null,\n });\n\n useApplyStyle(footerRef, {\n [filterStyles.tokens.filterFooter.insetBottom]: isNumber(insets?.bottom)\n ? `${insets.bottom}px`\n : null,\n });\n\n const handleShow = () => setVisible(true);\n const handleDismiss = () => {\n setVisible(false);\n onDismiss?.();\n };\n const handleDone = () => {\n setVisible(false);\n onDone?.();\n };\n\n const handleShowFilter = () => {\n handleShow();\n onModalOpen?.();\n };\n\n const labels = {\n toggle:\n customLabels?.toggleFilterButtonLabel \|\|\n _toggleFilterButtonLabel \|\|\n \"Filters\",\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n done: customLabels?.doneButtonLabel \|\| _doneButtonLabel \|\| \"Done\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n useEffect(() => {\n if (visible) {\n nodeRef.current?.focus();\n }\n }, [visible]);\n\n return (\n <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n <div className={className} {...otherProps}>\n <Button\n className={styles.filterButton}\n data-testid=\"filter-show-button\"\n styleType={toggleFilterButtonStyle}\n onClick={handleShowFilter}\n type=\"button\"\n icon={<FilterIcon />}\n >\n {labels.toggle}\n </Button>\n </div>\n <Overlay show={visible} disableTransition>\n <div\n className={styles.floatingWrapper}\n inert={inertValue(!visible)}\n >\n <FloatingFocusManager context={context} disabled={!visible}>\n <div\n className={styles.mobileOverlayContainer}\n data-id=\"filter-mobile\"\n data-testid=\"filter-mobile\"\n ref={refs.setFloating}\n >\n <div\n className={styles.mobileContainer}\n ref={nodeRef}\n tabIndex={0}\n >\n <div\n ref={headerRef}\n className={clsx(\n styles.filterHeader,\n isNumber(insets?.top) &&\n styles.filterHeaderWithInsetTop\n )}\n >\n <ClickableIcon\n className={\n filterStyles.filterHeaderButton\n }\n onClick={handleDismiss}\n focusOutline=\"browser\"\n focusHighlight={false}\n aria-label={`close ${labels.title}`}\n >\n <CrossIcon />\n </ClickableIcon>\n <h2 className={styles.filterTitle}>\n {labels.title}\n </h2>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>\n {children}\n </div>\n <div\n ref={footerRef}\n className={clsx(\n filterStyles.filterFooter,\n isNumber(insets?.bottom) &&\n filterStyles.filterFooterWithInsetBottom\n )}\n >\n <Button\n className={\n filterStyles.filterDoneButton\n }\n onClick={handleDone}\n >\n {labels.done}\n </Button>\n </div>\n </div>\n </div>\n </FloatingFocusManager>\n </div>\n </Overlay>\n </FilterContext.Provider>\n );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","className","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","headerRef","footerRef","visible","setVisible","useState","useApplyStyle","styles.tokens","filterHeader","insetTop","isNumber","top","filterStyles.tokens","filterFooter","insetBottom","bottom","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","Button","styles.filterButton","styleType","onClick","type","icon","FilterIcon","Overlay","show","disableTransition","styles.floatingWrapper","inert","inertValue","FloatingFocusManager","disabled","styles.mobileOverlayContainer","ref","setFloating","styles.mobileContainer","tabIndex","clsx","styles.filterHeader","styles.filterHeaderWithInsetTop","ClickableIcon","filterStyles.filterHeaderButton","focusOutline","focusHighlight","CrossIcon","styles.filterTitle","styles.filterClearButton","sizeType","filterStyles.filterBody","filterStyles.filterFooter","filterStyles.filterFooterWithInsetBottom","filterStyles.filterDoneButton","displayName"],"mappings":"+0CAgBO,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,EAAgBC,UACjCA,GAAShB,EACNiB,EAAUC,EAAAlB,EAdW,yMAgBxB,MAAMmB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,EAAUC,EAAuB,MACjCC,EAAYD,EAAuB,MACnCE,EAAYF,EAAuB,OAElCG,EAASC,IAAcC,GAAS,GAEvCC,EAAcL,EAAW,CACrB,CAACM,EAAcC,aAAaC,UAAWC,EAASzB,eAAAA,EAAQ0B,KAClD,GAAG1B,EAAO0B,QACV,OAGVL,EAAcJ,EAAW,CACrB,CAACU,EAAoBC,aAAaC,aAAcJ,EAASzB,eAAAA,EAAQ8B,QAC3D,GAAG9B,EAAO8B,WACV,OAGV,MAeMC,GAAS,CACXC,QACIvC,aAAY,EAAZA,EAAcS,0BACdC,GACA,UACJ8B,OAAOxC,aAAY,EAAZA,EAAcW,cAAeC,GAAgB,UACpD6B,MAAMzC,aAAY,EAAZA,EAAca,kBAAmBC,GAAoB,OAC3D4B,OAAO1C,eAAAA,EAAc2C,mBAAoB,SAS7C,OANAC,GAAU,WACFnB,IACe,QAAf1B,EAAAsB,EAAQwB,eAAO,IAAA9C,GAAAA,EAAE+C,QACrB,GACD,CAACrB,IAGAsB,EAACC,EAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,SAAUC,SAAU/B,GAASb,SAAA,CAChE6C,EAAA,MAAAC,OAAAC,OAAA,CAAKxC,UAAWA,GAAeC,EAAU,CAAAR,SACrC6C,EAACG,EAAM,CACHzC,UAAW0C,gBACC,qBACZC,UAAWrD,EACXsD,QA5BS,KAVAjC,IAAW,GAYhCtB,SAAAA,GAAe,EA2BHwD,KAAK,SACLC,KAAMR,EAACS,MAAatD,SAEnB8B,GAAOC,YAGhBc,EAACU,GAAQC,KAAMvC,EAASwC,mBAAiB,EAAAzD,SACrC6C,EAAA,MAAA,CACItC,UAAWmD,EACXC,MAAOC,GAAY3C,GAAQjB,SAE3B6C,EAACgB,GAAqBnD,QAASA,EAASoD,UAAW7C,EAAOjB,SACtD6C,EAAA,MAAA,CACItC,UAAWwD,EAA6B,UAChC,gBAAe,cACX,gBACZC,IAAKrD,EAAKsD,YAAWjE,SAErBuC,EAAA,MAAA,CACIhC,UAAW2D,EACXF,IAAKnD,EACLsD,SAAU,EAACnE,SAAA,CAEXuC,EAAA,MAAA,CACIyB,IAAKjD,EACLR,UAAW6D,EACPC,EACA7C,EAASzB,aAAM,EAANA,EAAQ0B,MACb6C,GACPtE,SAAA,CAED6C,EAAC0B,EAAa,CACVhE,UACIiE,EAEJrB,QAzEd,KAClBjC,IAAW,GACXvB,SAAAA,GAAa,EAwEmB8E,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS5C,GAAOE,QAAOhC,SAEnC6C,EAAC8B,EAAS,MAEd9B,EAAA,KAAA,CAAItC,UAAWqE,EAAkB5E,SAC5B8B,GAAOE,QAEZa,EAACG,EAAM,CACHzC,UAAWsE,EACX3B,UAAU,OACVE,KAAK,SACL0B,SAAS,QACT3B,QAAS,IAAM1D,aAAO,EAAPA,IACfqE,SAAUhE,EAAmB,aACjB,SAASgC,GAAOE,QAAOhC,SAElC8B,GAAOI,WAGhBW,EAAA,MAAA,CAAKtC,UAAWwE,EAAuB/E,SAClCA,IAEL6C,EAAA,MAAA,CACImB,IAAKhD,EACLT,UAAW6D,EACPY,EACAxD,EAASzB,aAAM,EAANA,EAAQ8B,SACboD,GACPjF,SAED6C,EAACG,EAAM,CACHzC,UACI2E,EAEJ/B,QA1GjB,KACfjC,IAAW,GACXxB,SAAAA,GAAU,EAwGyCM,SAElB8B,GAAOG,sBAQf,EAIjC3C,EAAY6F,YAAc"}
1	+ {"version":3,"file":"filter-modal.js","sources":["../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport isNumber from \"lodash/isNumber\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterBadge } from \"./filter-badge\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n customLabels,\n onClear,\n onDone,\n onDismiss,\n onModalOpen,\n toggleFilterButtonStyle = \"light\",\n clearButtonDisabled = false,\n insets,\n count,\n children,\n toggleFilterButtonLabel: _toggleFilterButtonLabel,\n headerTitle: _headerTitle,\n doneButtonLabel: _doneButtonLabel,\n className,\n ...otherProps\n}: FilterModalProps) => {\n const { context, refs } = useFloating();\n const nodeRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const footerRef = useRef<HTMLDivElement>(null);\n\n const [visible, setVisible] = useState(false);\n\n useApplyStyle(headerRef, {\n [styles.tokens.filterHeader.insetTop]: isNumber(insets?.top)\n ? `${insets.top}px`\n : null,\n });\n\n useApplyStyle(footerRef, {\n [filterStyles.tokens.filterFooter.insetBottom]: isNumber(insets?.bottom)\n ? `${insets.bottom}px`\n : null,\n });\n\n const handleShow = () => setVisible(true);\n const handleDismiss = () => {\n setVisible(false);\n onDismiss?.();\n };\n const handleDone = () => {\n setVisible(false);\n onDone?.();\n };\n\n const handleShowFilter = () => {\n handleShow();\n onModalOpen?.();\n };\n\n const labels = {\n toggle:\n customLabels?.toggleFilterButtonLabel \|\|\n _toggleFilterButtonLabel \|\|\n \"Filters\",\n title: customLabels?.headerTitle \|\| _headerTitle \|\| \"Filters\",\n done: customLabels?.doneButtonLabel \|\| _doneButtonLabel \|\| \"Done\",\n clear: customLabels?.clearButtonLabel \|\| \"Clear\",\n };\n\n useEffect(() => {\n if (visible) {\n nodeRef.current?.focus();\n }\n }, [visible]);\n\n return (\n <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n <div className={className} {...otherProps}>\n <Button\n className={styles.filterButton}\n data-testid=\"filter-show-button\"\n styleType={toggleFilterButtonStyle}\n onClick={handleShowFilter}\n type=\"button\"\n icon={<FilterIcon />}\n >\n <span className={styles.filterToggleContent}>\n <span>{labels.toggle}</span>\n <FilterBadge count={count} />\n </span>\n </Button>\n </div>\n <Overlay show={visible} disableTransition>\n <div\n className={styles.floatingWrapper}\n inert={inertValue(!visible)}\n >\n <FloatingFocusManager context={context} disabled={!visible}>\n <div\n className={styles.mobileOverlayContainer}\n data-id=\"filter-mobile\"\n data-testid=\"filter-mobile\"\n ref={refs.setFloating}\n >\n <div\n className={styles.mobileContainer}\n ref={nodeRef}\n tabIndex={0}\n >\n <div\n ref={headerRef}\n className={clsx(\n styles.filterHeader,\n isNumber(insets?.top) &&\n styles.filterHeaderWithInsetTop\n )}\n >\n <ClickableIcon\n className={\n filterStyles.filterHeaderButton\n }\n onClick={handleDismiss}\n focusOutline=\"browser\"\n focusHighlight={false}\n aria-label={`close ${labels.title}`}\n >\n <CrossIcon />\n </ClickableIcon>\n <div className={styles.filterTitleGroup}>\n <h2 className={styles.filterTitle}>\n {labels.title}\n </h2>\n <FilterBadge count={count} />\n </div>\n <Button\n className={styles.filterClearButton}\n styleType=\"link\"\n type=\"button\"\n sizeType=\"small\"\n onClick={() => onClear?.()}\n disabled={clearButtonDisabled}\n aria-label={`clear ${labels.title}`}\n >\n {labels.clear}\n </Button>\n </div>\n <div className={filterStyles.filterBody}>\n {children}\n </div>\n <div\n ref={footerRef}\n className={clsx(\n filterStyles.filterFooter,\n isNumber(insets?.bottom) &&\n filterStyles.filterFooterWithInsetBottom\n )}\n >\n <Button\n className={\n filterStyles.filterDoneButton\n }\n onClick={handleDone}\n >\n {labels.done}\n </Button>\n </div>\n </div>\n </div>\n </FloatingFocusManager>\n </div>\n </Overlay>\n </FilterContext.Provider>\n );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","count","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","className","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","headerRef","footerRef","visible","setVisible","useState","useApplyStyle","styles.tokens","filterHeader","insetTop","isNumber","top","filterStyles.tokens","filterFooter","insetBottom","bottom","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","Button","styles.filterButton","styleType","onClick","type","icon","FilterIcon","styles.filterToggleContent","FilterBadge","Overlay","show","disableTransition","styles.floatingWrapper","inert","inertValue","FloatingFocusManager","disabled","styles.mobileOverlayContainer","ref","setFloating","styles.mobileContainer","tabIndex","clsx","styles.filterHeader","styles.filterHeaderWithInsetTop","ClickableIcon","filterStyles.filterHeaderButton","focusOutline","focusHighlight","CrossIcon","styles.filterTitleGroup","styles.filterTitle","styles.filterClearButton","sizeType","filterStyles.filterBody","filterStyles.filterFooter","filterStyles.filterFooterWithInsetBottom","filterStyles.filterDoneButton","displayName"],"mappings":"86CAiBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,MACNA,EAAKC,SACLA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,EAAgBC,UACjCA,GAASjB,EACNkB,EAAUC,EAAAnB,EAfW,iNAiBxB,MAAMoB,QAAEA,EAAOC,KAAEA,GAASC,IACpBC,GAAUC,EAAuB,MACjCC,GAAYD,EAAuB,MACnCE,GAAYF,EAAuB,OAElCG,GAASC,IAAcC,GAAS,GAEvCC,EAAcL,GAAW,CACrB,CAACM,EAAcC,aAAaC,UAAWC,EAAS1B,eAAAA,EAAQ2B,KAClD,GAAG3B,EAAO2B,QACV,OAGVL,EAAcJ,GAAW,CACrB,CAACU,EAAoBC,aAAaC,aAAcJ,EAAS1B,eAAAA,EAAQ+B,QAC3D,GAAG/B,EAAO+B,WACV,OAGV,MAeMC,GAAS,CACXC,QACIxC,aAAY,EAAZA,EAAcU,0BACdC,GACA,UACJ8B,OAAOzC,aAAY,EAAZA,EAAcY,cAAeC,GAAgB,UACpD6B,MAAM1C,aAAY,EAAZA,EAAcc,kBAAmBC,GAAoB,OAC3D4B,OAAO3C,eAAAA,EAAc4C,mBAAoB,SAS7C,OANAC,GAAU,WACFnB,KACe,QAAf3B,EAAAuB,GAAQwB,eAAO,IAAA/C,GAAAA,EAAEgD,QACrB,GACD,CAACrB,KAGAsB,EAACC,EAAcC,UAASC,MAAO,CAAEC,KAAM,SAAUC,SAAU/B,IAASb,SAAA,CAChE6C,EAAA,MAAAC,OAAAC,OAAA,CAAKxC,UAAWA,GAAeC,YAC3BqC,EAACG,GACGzC,UAAW0C,EAAmB,cAClB,qBACZC,UAAWtD,EACXuD,QA5BS,KAVAjC,IAAW,GAYhCvB,SAAAA,GAAe,EA2BHyD,KAAK,SACLC,KAAMR,EAACS,EAAU,CAAA,YAEjBf,EAAA,OAAA,CAAMhC,UAAWgD,EAA0BvD,SAAA,CACvC6C,EAAA,OAAA,CAAA7C,SAAO8B,GAAOC,SACdc,EAACW,EAAW,CAACzD,MAAOA,YAIhC8C,EAACY,EAAO,CAACC,KAAMzC,GAAS0C,8BACpBd,EAAA,MAAA,CACItC,UAAWqD,EACXC,MAAOC,GAAY7C,IAAQjB,SAE3B6C,EAACkB,EAAoB,CAACrD,QAASA,EAASsD,UAAW/C,YAC/C4B,EAAA,MAAA,CACItC,UAAW0D,EAA6B,UAChC,gBAAe,cACX,gBACZC,IAAKvD,EAAKwD,YAAWnE,SAErBuC,EAAA,MAAA,CACIhC,UAAW6D,EACXF,IAAKrD,GACLwD,SAAU,YAEV9B,EAAA,MAAA,CACI2B,IAAKnD,GACLR,UAAW+D,EACPC,EACA/C,EAAS1B,eAAAA,EAAQ2B,MACb+C,GACPxE,SAAA,CAED6C,EAAC4B,EAAa,CACVlE,UACImE,EAEJvB,QA5Ed,KAClBjC,IAAW,GACXxB,SAAAA,GAAa,EA2EmBiF,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS9C,GAAOE,QAAOhC,SAEnC6C,EAACgC,EAAS,CAAA,KAEdtC,EAAA,MAAA,CAAKhC,UAAWuE,EAAuB9E,SAAA,CACnC6C,EAAA,KAAA,CAAItC,UAAWwE,EAAkB/E,SAC5B8B,GAAOE,QAEZa,EAACW,EAAW,CAACzD,MAAOA,OAExB8C,EAACG,EAAM,CACHzC,UAAWyE,EACX9B,UAAU,OACVE,KAAK,SACL6B,SAAS,QACT9B,QAAS,IAAM3D,aAAO,EAAPA,IACfwE,SAAUnE,EAAmB,aACjB,SAASiC,GAAOE,iBAE3BF,GAAOI,WAGhBW,EAAA,MAAA,CAAKtC,UAAW2E,EAAuBlF,SAClCA,IAEL6C,EAAA,MAAA,CACIqB,IAAKlD,GACLT,UAAW+D,EACPa,EACA3D,EAAS1B,aAAM,EAANA,EAAQ+B,SACbuD,GACPpF,SAED6C,EAACG,EAAM,CACHzC,UACI8E,EAEJlC,QAhHjB,KACfjC,IAAW,GACXzB,SAAAA,GAAU,EA8GyCO,SAElB8B,GAAOG,sBAQf,EAIjC5C,EAAYiG,YAAc"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterHeader: {\n insetTop: \"--fds-internal-filter-filterModalHeader-insetTop\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const mobileContainer = css`\n background-color: ${Colour[\"bg-strong\"]};\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nexport const mobileOverlayContainer = css`\n background-color: ${Colour[\"bg\"]};\n height: 100%;\n width: 100%;\n`;\n\nexport const floatingWrapper = css`\n height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterHeaderWithInsetTop = css`\n ${tokens.filterHeader.insetTop}: initial;\n padding-top: var(${tokens.filterHeader.insetTop});\n`;\n\nexport const filterTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n ~~flex~~: 1;\n ~~text~~-align: center;\n ~~margin~~: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n height: 100%;\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterButton = css`\n width: 100%;\n`;\n"],"names":["tokens","filterHeader","insetTop","mobileContainer","mobileOverlayContainer","floatingWrapper","filterHeaderWithInsetTop","filterTitle","filterClearButton","filterButton"],"mappings":"+DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,SAAU,qDAQLC,EAAe,WAQfC,EAAsB,WAMtBC,EAAe,UAQfJ,EAAY,WAMZK,EAAwB,UAKxBC,EAAW,~~WAOXC~~,EAAiB,WAUjBC,EAAY"}
1	+ {"version":3,"file":"filter-modal.styles.js","sources":["../../src/filter/filter-modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterHeader: {\n insetTop: \"--fds-internal-filter-filterModalHeader-insetTop\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const mobileContainer = css`\n background-color: ${Colour[\"bg-strong\"]};\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nexport const mobileOverlayContainer = css`\n background-color: ${Colour[\"bg\"]};\n height: 100%;\n width: 100%;\n`;\n\nexport const floatingWrapper = css`\n height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n display: flex;\n align-items: center;\n background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterHeaderWithInsetTop = css`\n ${tokens.filterHeader.insetTop}: initial;\n padding-top: var(${tokens.filterHeader.insetTop});\n`;\n\nexport const filterTitleGroup = css`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ${Spacing[\"spacing-8\"]};\n margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const filterTitle = css`\n ${Font[\"heading-xs-semibold\"]}\n color: ${Colour[\"text\"]};\n`;\n\nexport const filterToggleContent = css`\n display: inline-flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const filterClearButton = css`\n background-color: transparent;\n height: 100%;\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterButton = css`\n width: 100%;\n`;\n"],"names":["tokens","filterHeader","insetTop","mobileContainer","mobileOverlayContainer","floatingWrapper","filterHeaderWithInsetTop","filterTitleGroup","filterTitle","filterToggleContent","filterClearButton","filterButton"],"mappings":"+DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,SAAU,qDAQLC,EAAe,WAQfC,EAAsB,WAMtBC,EAAe,UAQfJ,EAAY,WAMZK,EAAwB,UAKxBC,EAAgB,WAShBC,EAAW,WAKXC,EAAmB,UAMnBC,EAAiB,WAUjBC,EAAY"}

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

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

package/filter/filter-sidebar.d.ts CHANGED Viewed

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

package/filter/filter-sidebar.js CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

package/filter/filter.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import type { 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, className, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, clearButtonDisabled, count, children, headerTitle: _headerTitle, className, ...otherProps }: import("./types").FilterSidebarProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Modal: {
-        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
+        ({ customLabels, onClear, onDone, onDismiss, onModalOpen, toggleFilterButtonStyle, clearButtonDisabled, insets, count, children, toggleFilterButtonLabel: _toggleFilterButtonLabel, headerTitle: _headerTitle, doneButtonLabel: _doneButtonLabel, className, ...otherProps }: import("./types").FilterModalProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: {
@@ -14,7 +14,7 @@ export declare const Filter: {
         displayName: string;
     };
     Page: {
-        ({ onDismiss, onDone, children, }: import("./types").FilterPageProps): import("react/jsx-runtime").JSX.Element;
+        ({ onDismiss, onDone, children, "data-testid": dataTestId, }: import("./types").FilterPageProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Checkbox: {

package/filter/filter.styles.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterFooter: {\n insetBottom: \"--fds-internal-filter-filterFooter-insetBottom\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const filterBody = css`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeaderButton = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterFooter = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const filterFooterWithInsetBottom = css`\n ${tokens.filterFooter.insetBottom}: initial;\n padding-bottom: var(${tokens.filterFooter.insetBottom});\n`;\n\nexport const filterDoneButton = css`\n width: 100%;\n`;\n"],"names":["tokens","filterFooter","insetBottom","filterBody","filterHeaderButton","filterFooterWithInsetBottom","filterDoneButton"],"mappings":"~~yDAIO~~,MAAMA,EAAS,CAClBC,aAAc,CACVC,YAAa,mDAQRC,EAAU,~~UAUVC~~,EAAkB,UAmBlBH,EAAY,UAMZI,EAA2B,UAK3BC,EAAgB"}
1	+ {"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Spacing } from \"../theme\";\n\nexport const tokens = {\n filterFooter: {\n insetBottom: \"--fds-internal-filter-filterFooter-insetBottom\",\n },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const filterBody = css`\n flex: 1;\n width: 100%;\n overflow-y: auto;\n color: ${Colour[\"text\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeaderButton = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n margin-right: auto;\n color: ${Colour[\"icon\"]};\n\n svg {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n &:hover {\n color: ${Colour[\"icon-hover\"]};\n }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterFooter = css`\n padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const filterFooterWithInsetBottom = css`\n ${tokens.filterFooter.insetBottom}: initial;\n padding-bottom: var(${tokens.filterFooter.insetBottom});\n`;\n\nexport const filterDoneButton = css`\n width: 100%;\n`;\n"],"names":["tokens","filterFooter","insetBottom","filterBody","filterHeaderButton","filterFooterWithInsetBottom","filterDoneButton"],"mappings":"0DAIO,MAAMA,EAAS,CAClBC,aAAc,CACVC,YAAa,mDAQRC,EAAU,UAWVC,EAAkB,UAmBlBH,EAAY,UAMZI,EAA2B,UAK3BC,EAAgB"}

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

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

package/filter/types.d.ts CHANGED Viewed

@@ -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;
@@ -79,6 +80,7 @@ export interface FilterItemProps {
     style?: React.CSSProperties | undefined;
 }
 export interface FilterPageProps {
+    "data-testid"?: string | undefined;
     children: React.ReactNode;
     /** Called when dismiss button is pressed */
     onDismiss?: (() => void) | undefined;

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

@@ -1,2 +1,2 @@
-import"./form-label.styles_rk98yd.css";const s="l170pjsx",e="lf1tnj",l="eyg2zu6",o="e4aab9k",r="e39ds6s",t="s1n6ixex";export{l as errorIcon,r as errorMessage,o as errorMessageContainer,e as label,s as labelContainer,t as subtitle};
+import"./form-label.styles_11r0652.css";const s="l170pjsx",e="lf1tnj",l="eyg2zu6",o="e4aab9k",r="e39ds6s",t="s1n6ixex";export{l as errorIcon,r as errorMessage,o as errorMessageContainer,e as label,s as labelContainer,t as subtitle};
 //# sourceMappingURL=form-label.styles.js.map

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

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

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

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

package/form/form-wrapper.js CHANGED Viewed

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

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

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

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

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