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

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

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

package/filter/filter-sidebar.styles.js

@@ -1,24 +1,2 @@
-import o from"styled-components";import{Button as i}from"../button/button.js";import{V3_Colour as r,V3_Border as d,V3_Radius as n,V3_Font as e,V3_Spacing as t}from"../v3_theme/index.js";const a=o.div`
-    background-color: ${r.bg};
-    border: ${d["width-010"]} ${d.solid}
-        ${r.border};
-    border-radius: ${n.md};
-    overflow: hidden;
-    width: 100%;
-`,g=o.div`
-    display: flex;
-    align-items: center;
-
-    background-color: ${r.bg};
-`,s=o.h2`
-    ${e["heading-xs-semibold"]}
-    flex: 1;
-    margin: ${t["spacing-24"]} 0 ${t["spacing-24"]}
-        ${t["spacing-20"]};
-`,c=o(i.Small)`
-    background-color: transparent;
-    padding-right: ${t["spacing-20"]};
-    padding-left: ${t["spacing-20"]};
-    height: 100%;
-`;export{a as DesktopContainer,c as FilterClearButton,g as FilterHeader,s as FilterTitle};
+import"./filter-sidebar.styles_1otwpjl.css";const t="d1a2pl71",f="fq9unar",r="fjfy2r5",s="f1i4s84l",l="f122t6n9";export{t as desktopContainer,l as filterClearButton,f as filterHeader,s as filterTitle,r as filterTitleGroup};
 //# sourceMappingURL=filter-sidebar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const DesktopContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div`\n    display: flex;\n    align-items: center;\n\n    background-color: ${V3_Colour[\"bg\"]};\n`;\n\nexport const FilterTitle = styled.h2`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    margin: ${V3_Spacing[\"spacing-24\"]} 0 ${V3_Spacing[\"spacing-24\"]}\n        ${V3_Spacing[\"spacing-20\"]};\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    padding-right: ${V3_Spacing[\"spacing-20\"]};\n    padding-left: ${V3_Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["DesktopContainer","styled","div","V3_Colour","V3_Border","V3_Radius","FilterHeader","FilterTitle","h2","V3_Font","V3_Spacing","FilterClearButton","Button","Small"],"mappings":"0LAeO,MAAMA,EAAmBC,EAAOC,GAAG;wBAClBC,EAAc;cACxBC,EAAU,gBAAgBA,EAAiB;UAC/CD,EAAkB;qBACPE,EAAc;;;EAStBC,EAAeL,EAAOC,GAAG;;;;wBAIdC,EAAc;EAGzBI,EAAcN,EAAOO,EAAE;MAC9BC,EAAQ;;cAEAC,EAAW,mBAAmBA,EAAW;UAC7CA,EAAW;EAGRC,EAAoBV,EAAOW,EAAOC,MAAM;;qBAEhCH,EAAW;oBACZA,EAAW;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../src/filter/filter-sidebar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const desktopContainer = css`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const filterTitleGroup = css`\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: ${Spacing[\"spacing-8\"]};\n    margin: ${Spacing[\"spacing-24\"]} 0 ${Spacing[\"spacing-24\"]}\n        ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n`;\n\nexport const filterClearButton = css`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":["desktopContainer","filterHeader","filterTitleGroup","filterTitle","filterClearButton"],"mappings":"kEAQO,MAAMA,EAAgB,WAYhBC,EAAY,UAQZC,EAAgB,UAUhBC,EAAW,WAIXC,EAAiB"}

package/filter/filter-sidebar.styles_1otwpjl.css

@@ -0,0 +1,5 @@
+.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

@@ -2,19 +2,19 @@ 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, ...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, ...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: {
-        ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, ...otherProps }: import("./types").FilterItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, className, ...otherProps }: import("./types").FilterItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     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.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useContext as o,useEffect as i}from"react";import{r as s}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as r}from"styled-components";import{V3_Breakpoint as n}from"../v3_theme/index.js";import{FilterItemCheckbox as m}from"./addons/filter-item-checkbox.js";import{FilterItem as l}from"./filter-item.js";import{FilterItemPage as a}from"./filter-item-page.js";import{FilterModal as d}from"./filter-modal.js";import{FilterSidebar as c}from"./filter-sidebar.js";const f=m=>{var{children:l,className:a,style:f,onDismiss:p,onDone:u,onModalOpen:g,toggleFilterButtonStyle:j,insets:h,id:y,"data-testid":b}=m,x=e(m,["children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","data-testid"]);const v=o(r),D=n["lg-max"]({theme:v}),M=s.useMediaQuery({maxWidth:D});return i((()=>{M||null==p||p()}),[M]),t("div",{className:a,style:f,id:y,"data-testid":b,children:M?t(d,Object.assign({onDismiss:p,onDone:u,onModalOpen:g,toggleFilterButtonStyle:j,insets:h},x,{children:"function"==typeof l?l("mobile"):l})):t(c,Object.assign({},x,{children:"function"==typeof l?l("default"):l}))})};f.Sidebar=c,f.Modal=d,f.Item=l,f.Page=a,f.Checkbox=m;export{f as Filter};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useEffect as i}from"react";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"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as o}from"../theme/utils/use-media-query.js";import{FilterItemCheckbox as r}from"./addons/filter-item-checkbox.js";import{FilterItem as s}from"./filter-item.js";import{FilterItemPage as m}from"./filter-item-page.js";import{FilterModal as n}from"./filter-modal.js";import{FilterSidebar as l}from"./filter-sidebar.js";const a=r=>{var{children:s,className:m,style:a,onDismiss:d,onDone:p,onModalOpen:c,toggleFilterButtonStyle:j,insets:f,id:u,"data-testid":h}=r,g=e(r,["children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","data-testid"]);const y=o("lg");return i((()=>{y||null==d||d()}),[y]),t("div",{className:m,style:a,id:u,"data-testid":h,children:y?t(n,Object.assign({onDismiss:d,onDone:p,onModalOpen:c,toggleFilterButtonStyle:j,insets:f},g,{children:"function"==typeof s?s("mobile"):s})):t(l,Object.assign({},g,{children:"function"==typeof s?s("default"):s}))})};a.Sidebar=l,a.Modal=n,a.Item=s,a.Page=m,a.Checkbox=r;export{a as Filter};
 //# sourceMappingURL=filter.js.map

package/filter/filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.js","sources":["../../src/filter/filter.tsx"],"sourcesContent":["import { useContext, useEffect } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { FilterItemCheckbox } from \"./addons/filter-item-checkbox\";\nimport { FilterItem } from \"./filter-item\";\nimport { FilterItemPage } from \"./filter-item-page\";\nimport { FilterModal } from \"./filter-modal\";\nimport { FilterSidebar } from \"./filter-sidebar\";\nimport type { FilterProps } from \"./types\";\n\nexport const Filter = ({\n    children,\n    className,\n    style,\n    onDismiss,\n    onDone,\n    onModalOpen,\n    toggleFilterButtonStyle,\n    insets,\n    id,\n    \"data-testid\": testId,\n    ...props\n}: FilterProps) => {\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n\n    useEffect(() => {\n        if (!isMobile) {\n            onDismiss?.();\n        }\n    }, [isMobile]);\n\n    return (\n        <div className={className} style={style} id={id} data-testid={testId}>\n            {isMobile ? (\n                <FilterModal\n                    onDismiss={onDismiss}\n                    onDone={onDone}\n                    onModalOpen={onModalOpen}\n                    toggleFilterButtonStyle={toggleFilterButtonStyle}\n                    insets={insets}\n                    {...props}\n                >\n                    {typeof children === \"function\"\n                        ? children(\"mobile\")\n                        : children}\n                </FilterModal>\n            ) : (\n                <FilterSidebar {...props}>\n                    {typeof children === \"function\"\n                        ? children(\"default\")\n                        : children}\n                </FilterSidebar>\n            )}\n        </div>\n    );\n};\n\nFilter.Sidebar = FilterSidebar;\nFilter.Modal = FilterModal;\nFilter.Item = FilterItem;\nFilter.Page = FilterItemPage;\nFilter.Checkbox = FilterItemCheckbox;\n"],"names":["Filter","_a","children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","testId","props","__rest","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","useEffect","_jsx","FilterModal","Object","assign","FilterSidebar","Sidebar","Modal","Item","FilterItem","Page","FilterItemPage","Checkbox","FilterItemCheckbox"],"mappings":"wkBAYO,MAAMA,EAAUC,QAAAC,SACnBA,EAAQC,UACRA,EAASC,MACTA,EAAKC,UACLA,EAASC,OACTA,EAAMC,YACNA,EAAWC,wBACXA,EAAuBC,OACvBA,EAAMC,GACNA,EACA,cAAeC,GAAMV,EAClBW,EAAKC,EAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IAQ3C,OANAK,GAAU,KACDH,GACDd,SAAAA,GACJ,GACD,CAACc,IAGAI,SAAKpB,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DiB,EACGI,EAACC,EAAWC,OAAAC,OAAA,CACRrB,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVqB,EAACI,mBAAkBf,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAIdF,EAAO4B,QAAUD,EACjB3B,EAAO6B,MAAQL,EACfxB,EAAO8B,KAAOC,EACd/B,EAAOgC,KAAOC,EACdjC,EAAOkC,SAAWC"}
+{"version":3,"file":"filter.js","sources":["../../src/filter/filter.tsx"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { FilterItemCheckbox } from \"./addons/filter-item-checkbox\";\nimport { FilterItem } from \"./filter-item\";\nimport { FilterItemPage } from \"./filter-item-page\";\nimport { FilterModal } from \"./filter-modal\";\nimport { FilterSidebar } from \"./filter-sidebar\";\nimport type { FilterProps } from \"./types\";\n\nexport const Filter = ({\n    children,\n    className,\n    style,\n    onDismiss,\n    onDone,\n    onModalOpen,\n    toggleFilterButtonStyle,\n    insets,\n    id,\n    \"data-testid\": testId,\n    ...props\n}: FilterProps) => {\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    useEffect(() => {\n        if (!isMobile) {\n            onDismiss?.();\n        }\n    }, [isMobile]);\n\n    return (\n        <div className={className} style={style} id={id} data-testid={testId}>\n            {isMobile ? (\n                <FilterModal\n                    onDismiss={onDismiss}\n                    onDone={onDone}\n                    onModalOpen={onModalOpen}\n                    toggleFilterButtonStyle={toggleFilterButtonStyle}\n                    insets={insets}\n                    {...props}\n                >\n                    {typeof children === \"function\"\n                        ? children(\"mobile\")\n                        : children}\n                </FilterModal>\n            ) : (\n                <FilterSidebar {...props}>\n                    {typeof children === \"function\"\n                        ? children(\"default\")\n                        : children}\n                </FilterSidebar>\n            )}\n        </div>\n    );\n};\n\nFilter.Sidebar = FilterSidebar;\nFilter.Modal = FilterModal;\nFilter.Item = FilterItem;\nFilter.Page = FilterItemPage;\nFilter.Checkbox = FilterItemCheckbox;\n"],"names":["Filter","_a","children","className","style","onDismiss","onDone","onModalOpen","toggleFilterButtonStyle","insets","id","testId","props","__rest","isMobile","useMaxWidthMediaQuery","useEffect","_jsx","FilterModal","Object","assign","FilterSidebar","Sidebar","Modal","Item","FilterItem","Page","FilterItemPage","Checkbox","FilterItemCheckbox"],"mappings":"s2BAUO,MAAMA,EAAUC,QAAAC,SACnBA,EAAQC,UACRA,EAASC,MACTA,EAAKC,UACLA,EAASC,OACTA,EAAMC,YACNA,EAAWC,wBACXA,EAAuBC,OACvBA,EAAMC,GACNA,EACA,cAAeC,GAAMV,EAClBW,EAAKC,EAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAWC,EAAsB,MAQvC,OANAC,GAAU,KACDF,GACDT,SAAAA,GACJ,GACD,CAACS,IAGAG,SAAKd,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DY,EACGG,EAACC,EAAWC,OAAAC,OAAA,CACRf,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVe,EAACI,mBAAkBT,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAIdF,EAAOsB,QAAUD,EACjBrB,EAAOuB,MAAQL,EACflB,EAAOwB,KAAOC,EACdzB,EAAO0B,KAAOC,EACd3B,EAAO4B,SAAWC"}

package/filter/filter.styles.d.ts

@@ -1,8 +1,10 @@
-type FilterFooterProps = {
-    $insetBottom?: number | undefined;
+export declare const tokens: {
+    readonly filterFooter: {
+        readonly insetBottom: "--fds-internal-filter-filterFooter-insetBottom";
+    };
 };
-export declare const FilterBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const FilterHeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FilterFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetBottom"> & FilterFooterProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$insetBottom"> & FilterFooterProps, never>>> & string;
-export declare const FilterDoneButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const filterBody: import("@linaria/core").LinariaClassName;
+export declare const filterHeaderButton: import("@linaria/core").LinariaClassName;
+export declare const filterFooter: import("@linaria/core").LinariaClassName;
+export declare const filterFooterWithInsetBottom: import("@linaria/core").LinariaClassName;
+export declare const filterDoneButton: import("@linaria/core").LinariaClassName;

package/filter/filter.styles.js

@@ -1,27 +1,2 @@
-import o from"styled-components";import{Button as t}from"../button/button.js";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{V3_Spacing as r,V3_Colour as e,V3_Border as n}from"../v3_theme/index.js";const d=o.div`
-    flex: 1;
-    width: 100%;
-    overflow-y: auto;
-`,c=o(i)`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-    margin-right: auto;
-    color: ${e.icon};
-
-    svg {
-        height: 1.5rem;
-        width: 1.5rem;
-    }
-
-    &:hover {
-        color: ${e["icon-hover"]};
-    }
-`,m=o.div`
-    padding: ${r["spacing-24"]} ${r["spacing-20"]};
-    background-color: ${e.bg};
-    border-top: ${n["width-010"]} ${n.solid}
-        ${e.border};
-    ${o=>o.$insetBottom&&`padding-bottom: ${o.$insetBottom}px;`}
-`,a=o(t.Default)`
-    width: 100%;
-`;export{d as FilterBody,a as FilterDoneButton,m as FilterFooter,c as FilterHeaderButton};
+import"./filter.styles_1ykijwm.css";const t={filterFooter:{insetBottom:"--fds-internal-filter-filterFooter-insetBottom"}},e="fh4ozpc",o="f3bn9l4",f="fp6e1r1",i="f8nn92t",r="f1iv2dy9";export{e as filterBody,r as filterDoneButton,f as filterFooter,i as filterFooterWithInsetBottom,o as filterHeaderButton,t as tokens};
 //# sourceMappingURL=filter.styles.js.map

package/filter/filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter.styles.js","sources":["../../src/filter/filter.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { V3_Border, V3_Colour, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\n\ntype FilterFooterProps = {\n    $insetBottom?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const FilterBody = styled.div`\n    flex: 1;\n    width: 100%;\n    overflow-y: auto;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeaderButton = styled(ClickableIcon)`\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n    margin-right: auto;\n    color: ${V3_Colour[\"icon\"]};\n\n    svg {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &:hover {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterFooter = styled.div<FilterFooterProps>`\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n    background-color: ${V3_Colour[\"bg\"]};\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    ${(props) =>\n        props.$insetBottom && `padding-bottom: ${props.$insetBottom}px;`}\n`;\n\nexport const FilterDoneButton = styled(Button.Default)`\n    width: 100%;\n`;\n"],"names":["FilterBody","styled","div","FilterHeaderButton","ClickableIcon","V3_Spacing","V3_Colour","FilterFooter","V3_Border","props","$insetBottom","FilterDoneButton","Button","Default"],"mappings":"yOAkBO,MAAMA,EAAaC,EAAOC,GAAG;;;;EAUvBC,EAAqBF,EAAOG,EAAc;eACxCC,EAAW,iBAAiBA,EAAW;;aAEzCC,EAAgB;;;;;;;;iBAQZA,EAAU;;EAQdC,EAAeN,EAAOC,GAAsB;eAC1CG,EAAW,iBAAiBA,EAAW;wBAC9BC,EAAc;kBACpBE,EAAU,gBAAgBA,EAAiB;UACnDF,EAAkB;MACrBG,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAOW,EAAOC,QAAQ;;"}
+{"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_1ykijwm.css

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

package/filter/types.d.ts

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

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{ICircleFillIcon as o}from"@lifesg/react-icons/i-circle-fill";import"../_virtual/_tslib.js";import"clsx";import"react";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../popover-v2/popover.styles_lslc72.css";import{PopoverInline as e}from"../popover-v2/popover-inline/popover-inline.js";import"@floating-ui/react";import"../overlay/use-floating-context.js";import"../popover-v2/popover-trigger.styles_1yq7ffk.css";import{addonWrapper as r}from"./form-label-addon.styles.js";const i=({addon:i,rootNode:p})=>{const{content:s,type:m,icon:n,id:a,zIndex:l,"data-testid":d}=i;return t("div",{className:r,children:t(e,{trigger:"click",id:a,"data-testid":d,popoverContent:s,rootNode:p,zIndex:l,icon:null!=n?n:t(o,{"data-testid":`${m}-icon`}),ariaLabel:"More info"})})};export{i as PopoverAddon};
+import{jsx as t}from"react/jsx-runtime";import{ICircleFillIcon as e}from"@lifesg/react-icons/i-circle-fill";import"../_virtual/_tslib.js";import"clsx";import"react";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverInline as o}from"../popover/popover-inline/popover-inline.js";import"@floating-ui/react";import"../overlay/use-floating-context.js";import"../popover/popover-trigger.styles_8zokig.css";import{addonWrapper as r}from"./form-label-addon.styles.js";const i=({addon:i,rootNode:p})=>{const{content:s,type:m,icon:n,id:a,zIndex:l,"data-testid":d}=i;return t("div",{className:r,children:t(o,{trigger:"click",id:a,"data-testid":d,popoverContent:s,rootNode:p,zIndex:l,icon:null!=n?n:t(e,{"data-testid":`${m}-icon`}),ariaLabel:"More info"})})};export{i as PopoverAddon};
 //# sourceMappingURL=form-label-addon.js.map

package/form/form-label-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-label-addon.js","sources":["../../src/form/form-label-addon.tsx"],"sourcesContent":["import { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport type { RefObject } from \"react\";\n\nimport { PopoverInline } from \"../popover-v2\";\nimport * as styles from \"./form-label-addon.styles\";\nimport type { FormLabelAddonProps } from \"./types\";\n\n// =============================================================================\n// POPOVER ADDON COMPONENT\n// Note: We need to re-construct as using with the HOC causes some rendering\n// issues\n// =============================================================================\ninterface PopoverAddonProps {\n    addon: FormLabelAddonProps;\n    rootNode?: RefObject<HTMLElement>;\n}\n\nexport const PopoverAddon = ({\n    addon,\n    rootNode,\n}: PopoverAddonProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { content, type, icon, id, zIndex, \"data-testid\": testId } = addon;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <div className={styles.addonWrapper}>\n            <PopoverInline\n                trigger=\"click\"\n                id={id}\n                data-testid={testId}\n                popoverContent={content}\n                rootNode={rootNode}\n                zIndex={zIndex}\n                icon={icon ?? <ICircleFillIcon data-testid={`${type}-icon`} />}\n                ariaLabel=\"More info\"\n            />\n        </div>\n    );\n};\n"],"names":["PopoverAddon","addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"kiCAiBO,MAAMA,EAAe,EACxBC,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAA,MAAA,CAAKC,UAAWC,EAAmBC,SAC/BH,EAACI,EAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAACO,EAAe,CAAA,cAAc,GAAGZ,WAC/Ca,UAAU,eAEZ"}
+{"version":3,"file":"form-label-addon.js","sources":["../../src/form/form-label-addon.tsx"],"sourcesContent":["import { ICircleFillIcon } from \"@lifesg/react-icons/i-circle-fill\";\nimport type { RefObject } from \"react\";\n\nimport { PopoverInline } from \"../popover\";\nimport * as styles from \"./form-label-addon.styles\";\nimport type { FormLabelAddonProps } from \"./types\";\n\n// =============================================================================\n// POPOVER ADDON COMPONENT\n// Note: We need to re-construct as using with the HOC causes some rendering\n// issues\n// =============================================================================\ninterface PopoverAddonProps {\n    addon: FormLabelAddonProps;\n    rootNode?: RefObject<HTMLElement>;\n}\n\nexport const PopoverAddon = ({\n    addon,\n    rootNode,\n}: PopoverAddonProps): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { content, type, icon, id, zIndex, \"data-testid\": testId } = addon;\n\n    // =========================================================================\n    // RENDER FUNCTION\n    // =========================================================================\n    return (\n        <div className={styles.addonWrapper}>\n            <PopoverInline\n                trigger=\"click\"\n                id={id}\n                data-testid={testId}\n                popoverContent={content}\n                rootNode={rootNode}\n                zIndex={zIndex}\n                icon={icon ?? <ICircleFillIcon data-testid={`${type}-icon`} />}\n                ariaLabel=\"More info\"\n            />\n        </div>\n    );\n};\n"],"names":["PopoverAddon","addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"kkCAiBO,MAAMA,EAAe,EACxBC,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAA,MAAA,CAAKC,UAAWC,EAAmBC,SAC/BH,EAACI,EAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAACO,EAAe,CAAA,cAAc,GAAGZ,WAC/Ca,UAAU,eAEZ"}

package/form/form-label.styles.js

@@ -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

@@ -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"}
+{"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

@@ -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-masked-input.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import t from"react";import{MaskedInput as a}from"../masked-input/masked-input.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as i}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as o}from"./form-wrapper.js";const s=t.forwardRef(((t,s)=>{const{label:d,errorMessage:l,id:m,"data-error-testid":p,"data-testid":n,layoutType:u}=t,f=r(t,["label","errorMessage","id","data-error-testid","data-testid","layoutType"]),j=i(),c=null!=m?m:`form-field-masked-input-${j}`;return e(o,{id:c,label:d,errorMessage:l,"data-error-testid":p,layoutType:u,children:e(a,Object.assign({ref:s,id:`${c}-base`,"data-testid":n?`${n}-base`:void 0,error:!!l},f))})}));export{s as FormMaskedInput};
+import{__rest as s}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import o from"react";import{MaskedInput as e}from"../masked-input/masked-input.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as l}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as t}from"./form-wrapper.js";const a=o.forwardRef(((o,a)=>{const{label:i,errorMessage:d,id:m,"data-error-testid":p,"data-testid":x,layoutType:C,xxsCols:n,xsCols:u,smCols:f,mdCols:j,lgCols:c,xlCols:g,xxlCols:y}=o,b=s(o,["label","errorMessage","id","data-error-testid","data-testid","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols"]),h=l(),k=null!=m?m:`form-field-masked-input-${h}`;return r(t,{id:k,"data-testid":x,label:i,errorMessage:d,"data-error-testid":p,layoutType:C,xxsCols:n,xsCols:u,smCols:f,mdCols:j,lgCols:c,xlCols:g,xxlCols:y,children:r(e,Object.assign({ref:a,id:`${k}-base`,"data-testid":x?`${x}-base`:void 0,error:!!d},b))})}));export{a as FormMaskedInput};
 //# sourceMappingURL=form-masked-input.js.map

package/form/form-masked-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-masked-input.js","sources":["../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport type { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n    props: FormMaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    const {\n        label,\n        errorMessage,\n        id,\n        \"data-error-testid\": errorTestId,\n        \"data-testid\": testId,\n        layoutType,\n        ...otherProps\n    } = props;\n\n    const internalId = useId();\n    const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n    return (\n        <FormWrapper\n            id={inputId}\n            label={label}\n            errorMessage={errorMessage}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n        >\n            <MaskedInput\n                ref={ref}\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","otherProps","__rest","internalId","useId","inputId","_jsx","FormWrapper","children","MaskedInput","Object","assign","undefined","error"],"mappings":"+ZAOA,MAoCaA,EAAkBC,EAAMC,YApCnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,GAEAP,EADGQ,EAAUC,EACbT,EARE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,eAUAU,EAAaC,IACbC,EAAUR,QAAAA,EAAM,2BAA2BM,IAEjD,OACIG,EAACC,EAAW,CACRV,GAAIQ,EACJV,MAAOA,EACPC,aAAcA,EAAY,oBACPE,EACnBE,WAAYA,EAAUQ,SAEtBF,EAACG,EAAWC,OAAAC,OAAA,CACRjB,IAAKA,EACLG,GAAI,GAAGQ,SAAc,cACRN,EAAS,GAAGA,cAAgBa,EACzCC,QAASjB,GACLK,KAEE"}
+{"version":3,"file":"form-masked-input.js","sources":["../../src/form/form-masked-input.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { MaskedInput } from \"../masked-input/masked-input\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport type { FormMaskedInputProps } from \"./types\";\n\nconst Component = (\n    props: FormMaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n): JSX.Element => {\n    const {\n        label,\n        errorMessage,\n        id,\n        \"data-error-testid\": errorTestId,\n        \"data-testid\": testId,\n        layoutType,\n        xxsCols,\n        xsCols,\n        smCols,\n        mdCols,\n        lgCols,\n        xlCols,\n        xxlCols,\n        ...otherProps\n    } = props;\n\n    const internalId = useId();\n    const inputId = id ?? `form-field-masked-input-${internalId}`;\n\n    return (\n        <FormWrapper\n            id={inputId}\n            data-testid={testId}\n            label={label}\n            errorMessage={errorMessage}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n            xxsCols={xxsCols}\n            xsCols={xsCols}\n            smCols={smCols}\n            mdCols={mdCols}\n            lgCols={lgCols}\n            xlCols={xlCols}\n            xxlCols={xxlCols}\n        >\n            <MaskedInput\n                ref={ref}\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n\nexport const FormMaskedInput = React.forwardRef(Component);\n"],"names":["FormMaskedInput","React","forwardRef","props","ref","label","errorMessage","id","errorTestId","testId","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","internalId","useId","inputId","_jsx","FormWrapper","MaskedInput","undefined","error"],"mappings":"+ZAOA,MAmDaA,EAAkBC,EAAMC,YAnDnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAEAd,EADGe,EAAUC,EACbhB,EAfE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAiBAiB,EAAaC,IACbC,EAAUf,QAAAA,EAAM,2BAA2Ba,IAEjD,OACIG,EAACC,GACGjB,GAAIe,EAAO,cACEb,EACbJ,MAAOA,EACPC,aAAcA,sBACKE,EACnBE,WAAYA,EACZC,QAASA,EACTC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,QAASA,WAETM,EAACE,iBACGrB,IAAKA,EACLG,GAAI,GAAGe,SAAc,cACRb,EAAS,GAAGA,cAAgBiB,EACzCC,QAASrB,GACLY,KAEE"}

package/form/form-time-range-picker.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import{TimeRangePicker as e}from"../time-range-picker/time-range-picker.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"react";import{useId as o}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as l}from"./form-wrapper.js";const t=t=>{var{label:a,errorMessage:i,id:m,"data-error-testid":d,"data-testid":p,layoutType:x,xxsCols:C,xsCols:n,smCols:c,mdCols:g,lgCols:j,xlCols:u,xxlCols:y}=t,b=r(t,["label","errorMessage","id","data-error-testid","data-testid","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols"]);const f=o(),v=null!=m?m:`form-time-range-picker-${f}`;return s(l,{id:v,label:a,errorMessage:i,"data-error-testid":d,layoutType:x,xxsCols:C,xsCols:n,smCols:c,mdCols:g,lgCols:j,xlCols:u,xxlCols:y,children:s(e,Object.assign({id:`${v}-base`,"data-testid":p?`${p}-base`:void 0,error:!!i},b))})};export{t as FormTimeRangePicker};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import{TimeRangePicker as e}from"../time-range-picker/time-range-picker.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"react";import{useId as o}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{FormWrapper as t}from"./form-wrapper.js";const l=l=>{var{label:a,errorMessage:i,id:m,"data-error-testid":d,"data-testid":p,layoutType:x,xxsCols:C,xsCols:n,smCols:c,mdCols:g,lgCols:j,xlCols:u,xxlCols:y}=l,b=r(l,["label","errorMessage","id","data-error-testid","data-testid","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols"]);const f=o(),v=null!=m?m:`form-time-range-picker-${f}`;return s(t,{id:v,"data-testid":p,label:a,errorMessage:i,"data-error-testid":d,layoutType:x,xxsCols:C,xsCols:n,smCols:c,mdCols:g,lgCols:j,xlCols:u,xxlCols:y,children:s(e,Object.assign({id:`${v}-base`,"data-testid":p?`${p}-base`:void 0,error:!!i},b))})};export{l as FormTimeRangePicker};
 //# sourceMappingURL=form-time-range-picker.js.map

package/form/form-time-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-time-range-picker.js","sources":["../../src/form/form-time-range-picker.tsx"],"sourcesContent":["import { TimeRangePicker } from \"../time-range-picker\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport type { FormTimeRangePickerProps } from \"./types\";\n\nexport const FormTimeRangePicker = ({\n    label,\n    errorMessage,\n    id,\n    \"data-error-testid\": errorTestId,\n    \"data-testid\": testId,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    ...otherProps\n}: FormTimeRangePickerProps): JSX.Element => {\n    const internalId = useId();\n    const inputId = id ?? `form-time-range-picker-${internalId}`;\n    return (\n        <FormWrapper\n            id={inputId}\n            label={label}\n            errorMessage={errorMessage}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n            xxsCols={xxsCols}\n            xsCols={xsCols}\n            smCols={smCols}\n            mdCols={mdCols}\n            lgCols={lgCols}\n            xlCols={xlCols}\n            xxlCols={xxlCols}\n        >\n            <TimeRangePicker\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n"],"names":["FormTimeRangePicker","_a","label","errorMessage","id","errorTestId","testId","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","internalId","useId","inputId","_jsx","FormWrapper","children","TimeRangePicker","undefined","error"],"mappings":"saAKO,MAAMA,EAAuBC,IAAA,IAAAC,MAChCA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOb,EACJc,EAAUC,EAAAf,EAdmB,+IAgBhC,MAAMgB,EAAaC,IACbC,EAAUf,QAAAA,EAAM,0BAA0Ba,IAChD,OACIG,EAACC,EAAW,CACRjB,GAAIe,EACJjB,MAAOA,EACPC,aAAcA,EAAY,oBACPE,EACnBE,WAAYA,EACZC,QAASA,EACTC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EAAOQ,SAEhBF,EAACG,iBACGnB,GAAI,GAAGe,uBACMb,EAAS,GAAGA,cAAgBkB,EACzCC,QAAStB,GACLY,KAEE"}
+{"version":3,"file":"form-time-range-picker.js","sources":["../../src/form/form-time-range-picker.tsx"],"sourcesContent":["import { TimeRangePicker } from \"../time-range-picker\";\nimport { useId } from \"../util\";\nimport { FormWrapper } from \"./form-wrapper\";\nimport type { FormTimeRangePickerProps } from \"./types\";\n\nexport const FormTimeRangePicker = ({\n    label,\n    errorMessage,\n    id,\n    \"data-error-testid\": errorTestId,\n    \"data-testid\": testId,\n    layoutType,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    ...otherProps\n}: FormTimeRangePickerProps): JSX.Element => {\n    const internalId = useId();\n    const inputId = id ?? `form-time-range-picker-${internalId}`;\n    return (\n        <FormWrapper\n            id={inputId}\n            data-testid={testId}\n            label={label}\n            errorMessage={errorMessage}\n            data-error-testid={errorTestId}\n            layoutType={layoutType}\n            xxsCols={xxsCols}\n            xsCols={xsCols}\n            smCols={smCols}\n            mdCols={mdCols}\n            lgCols={lgCols}\n            xlCols={xlCols}\n            xxlCols={xxlCols}\n        >\n            <TimeRangePicker\n                id={`${inputId}-base`}\n                data-testid={testId ? `${testId}-base` : undefined}\n                error={!!errorMessage}\n                {...otherProps}\n            />\n        </FormWrapper>\n    );\n};\n"],"names":["FormTimeRangePicker","_a","label","errorMessage","id","errorTestId","testId","layoutType","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","internalId","useId","inputId","_jsx","FormWrapper","children","TimeRangePicker","undefined","error"],"mappings":"saAKO,MAAMA,EAAuBC,IAAA,IAAAC,MAChCA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOb,EACJc,EAAUC,EAAAf,EAdmB,+IAgBhC,MAAMgB,EAAaC,IACbC,EAAUf,QAAAA,EAAM,0BAA0Ba,IAChD,OACIG,EAACC,EAAW,CACRjB,GAAIe,EAAO,cACEb,EACbJ,MAAOA,EACPC,aAAcA,EAAY,oBACPE,EACnBE,WAAYA,EACZC,QAASA,EACTC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,OAAQA,EACRC,QAASA,EAAOQ,SAEhBF,EAACG,iBACGnB,GAAI,GAAGe,uBACMb,EAAS,GAAGA,cAAgBkB,EACzCC,QAAStB,GACLY,KAEE"}

package/form/form-wrapper.js

@@ -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

@@ -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"}
+{"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/form/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./types";
 export declare const Form: {
     DateInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateInputProps) => JSX.Element;
     DateRangeInput: ({ label, errorMessage, id, "data-error-testid": errorTestId, "data-testid": testId, layoutType, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: import("./types").FormDateRangeInputProps) => JSX.Element;

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport const Form = {\n    DateInput: FormDateInput,\n    DateRangeInput: FormDateRangeInput,\n    ESignature: FormESignature,\n    HistogramSlider: FormHistogramSlider,\n    Input: FormInput,\n    InputGroup: FormInputGroup,\n    MaskedInput: FormMaskedInput,\n    Label: FormLabel,\n    MultiSelect: FormMultiSelect,\n    NestedSelect: FormNestedSelect,\n    NestedMultiSelect: FormNestedMultiSelect,\n    Select: FormSelect,\n    SelectHistogram: FormSelectHistogram,\n    Slider: FormSlider,\n    RangeSlider: FormRangeSlider,\n    RangeSelect: FormRangeSelect,\n    Textarea: FormTextarea,\n    Timepicker: FormTimepicker,\n    TimeRangePicker: FormTimeRangePicker,\n    CustomField: FormCustomField,\n    UnitNumberInput: FormUnitNumberInput,\n    PhoneNumberInput: FormPhoneNumberInput,\n    PredictiveTextInput: FormPredictiveTextInput,\n    OtpVerification: FormOtpVerification,\n};\n"],"names":["Form","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","MaskedInput","FormMaskedInput","Label","FormLabel","MultiSelect","FormMultiSelect","NestedSelect","FormNestedSelect","NestedMultiSelect","FormNestedMultiSelect","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","RangeSlider","FormRangeSlider","RangeSelect","FormRangeSelect","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","CustomField","FormCustomField","UnitNumberInput","FormUnitNumberInput","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","OtpVerification","FormOtpVerification"],"mappings":"22CAyBO,MAAMA,EAAO,CAChBC,UAAWC,EACXC,eAAgBC,EAChBC,WAAYC,EACZC,gBAAiBC,EACjBC,MAAOC,EACPC,WAAYC,EACZC,YAAaC,EACbC,MAAOC,EACPC,YAAaC,EACbC,aAAcC,EACdC,kBAAmBC,EACnBC,OAAQC,EACRC,gBAAiBC,EACjBC,OAAQC,EACRC,YAAaC,EACbC,YAAaC,EACbC,SAAUC,EACVC,WAAYC,EACZC,gBAAiBC,EACjBC,YAAaC,EACbC,gBAAiBC,EACjBC,iBAAkBC,EAClBC,oBAAqBC,EACrBC,gBAAiBC"}
+{"version":3,"file":"index.js","sources":["../../src/form/index.ts"],"sourcesContent":["import { FormCustomField } from \"./form-custom-field\";\nimport { FormDateInput } from \"./form-date-input\";\nimport { FormDateRangeInput } from \"./form-date-range-input\";\nimport { FormESignature } from \"./form-e-signature\";\nimport { FormHistogramSlider } from \"./form-histogram\";\nimport { FormInput } from \"./form-input\";\nimport { FormInputGroup } from \"./form-input-group\";\nimport { FormLabel } from \"./form-label\";\nimport { FormMaskedInput } from \"./form-masked-input\";\nimport { FormMultiSelect } from \"./form-multi-select\";\nimport { FormNestedMultiSelect } from \"./form-nested-multi-select\";\nimport { FormNestedSelect } from \"./form-nested-select\";\nimport { FormOtpVerification } from \"./form-otp-verification\";\nimport { FormPhoneNumberInput } from \"./form-phone-number-input\";\nimport { FormPredictiveTextInput } from \"./form-predictive-text-input\";\nimport { FormRangeSelect } from \"./form-range-select\";\nimport { FormRangeSlider } from \"./form-range-slider\";\nimport { FormSelect } from \"./form-select\";\nimport { FormSelectHistogram } from \"./form-select-histogram\";\nimport { FormSlider } from \"./form-slider\";\nimport { FormTextarea } from \"./form-textarea\";\nimport { FormTimeRangePicker } from \"./form-time-range-picker\";\nimport { FormTimepicker } from \"./form-timepicker\";\nimport { FormUnitNumberInput } from \"./form-unit-number-input\";\n\nexport * from \"./types\";\n\nexport const Form = {\n    DateInput: FormDateInput,\n    DateRangeInput: FormDateRangeInput,\n    ESignature: FormESignature,\n    HistogramSlider: FormHistogramSlider,\n    Input: FormInput,\n    InputGroup: FormInputGroup,\n    MaskedInput: FormMaskedInput,\n    Label: FormLabel,\n    MultiSelect: FormMultiSelect,\n    NestedSelect: FormNestedSelect,\n    NestedMultiSelect: FormNestedMultiSelect,\n    Select: FormSelect,\n    SelectHistogram: FormSelectHistogram,\n    Slider: FormSlider,\n    RangeSlider: FormRangeSlider,\n    RangeSelect: FormRangeSelect,\n    Textarea: FormTextarea,\n    Timepicker: FormTimepicker,\n    TimeRangePicker: FormTimeRangePicker,\n    CustomField: FormCustomField,\n    UnitNumberInput: FormUnitNumberInput,\n    PhoneNumberInput: FormPhoneNumberInput,\n    PredictiveTextInput: FormPredictiveTextInput,\n    OtpVerification: FormOtpVerification,\n};\n"],"names":["Form","DateInput","FormDateInput","DateRangeInput","FormDateRangeInput","ESignature","FormESignature","HistogramSlider","FormHistogramSlider","Input","FormInput","InputGroup","FormInputGroup","MaskedInput","FormMaskedInput","Label","FormLabel","MultiSelect","FormMultiSelect","NestedSelect","FormNestedSelect","NestedMultiSelect","FormNestedMultiSelect","Select","FormSelect","SelectHistogram","FormSelectHistogram","Slider","FormSlider","RangeSlider","FormRangeSlider","RangeSelect","FormRangeSelect","Textarea","FormTextarea","Timepicker","FormTimepicker","TimeRangePicker","FormTimeRangePicker","CustomField","FormCustomField","UnitNumberInput","FormUnitNumberInput","PhoneNumberInput","FormPhoneNumberInput","PredictiveTextInput","FormPredictiveTextInput","OtpVerification","FormOtpVerification"],"mappings":"22CA2BO,MAAMA,EAAO,CAChBC,UAAWC,EACXC,eAAgBC,EAChBC,WAAYC,EACZC,gBAAiBC,EACjBC,MAAOC,EACPC,WAAYC,EACZC,YAAaC,EACbC,MAAOC,EACPC,YAAaC,EACbC,aAAcC,EACdC,kBAAmBC,EACnBC,OAAQC,EACRC,gBAAiBC,EACjBC,OAAQC,EACRC,YAAaC,EACbC,YAAaC,EACbC,SAAUC,EACVC,WAAYC,EACZC,gBAAiBC,EACjBC,YAAaC,EACbC,gBAAiBC,EACjBC,iBAAkBC,EAClBC,oBAAqBC,EACrBC,gBAAiBC"}

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as i,jsxs as t,Fragment as n}from"react/jsx-runtime";import{ChevronLeftIcon as r,ChevronRightIcon as l,MagnifierPlusIcon as o,MagnifierMinusIcon as a,CrossIcon as d}from"@lifesg/react-icons";import{BinIcon as s}from"@lifesg/react-icons/bin";import{clearAnnouncer as c,announce as h}from"@react-aria/live-announcer";import{forwardRef as u,useState as m,useRef as v,useMemo as f,useCallback as g,useImperativeHandle as p,useEffect as b}from"react";import{TransformWrapper as $,TransformComponent as j}from"react-zoom-pan-pinch";import{ModalV2 as I}from"../modal-v2/index.js";import{useStateCallback as C}from"../shared/hooks/use-state-callback.js";import"../external/lodash/_root.js";import"../external/lodash/_baseGetTag.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 w}from"../util/use-event-listener.js";import{CarouselModalContent as T,ImageGalleryContainer as x,ImageGalleryWrapper as k,ImageGallerySwipe as y,ArrowButton as L,BoxChip as S,Chip as N,TopActionButtons as D,MagnifierButton as M,DeleteButton as z,CloseButton as A,ImageGallerySlides as R,ImageGallerySlide as Z,FocusableImageRegion as _,SlidePlaceholderImage as O,SlideImage as W,ThumbnailContainer as X,ThumbnailWrapper as E,ThumbnailItemContainer as F,ThumbnailItem as P,ThumbnailImage as V,FileInfoTextWrapper as B,FileInfoFileName as G,FileInfoFileSize as H}from"./fullscreen-image-carousel.style.js";const q=e=>!!e&&"custom"===e.type,J=(u,J)=>{var K,{items:Q,initialActiveItemIndex:U,hideThumbnail:Y=!1,hideNavigation:ee=!1,hideCounter:ie=!1,hideMagnifier:te=!1,onDelete:ne,onClose:re,insets:le,show:oe}=u,ae=e(u,["items","initialActiveItemIndex","hideThumbnail","hideNavigation","hideCounter","hideMagnifier","onDelete","onClose","insets","show"]);const[de,se]=C(null!=U?U:0),[ce,he]=m({}),[ue,me]=m(1),[ve,fe]=m(),[ge,pe]=m(),be=v(null),$e=v([]),je=v([]),Ie=v(null),Ce=ve&&ge?ve-ge:0,we=Q[de],Te=Q.some((e=>{var i;return q(e)&&!!(null===(i=e.itemLabel)||void 0===i?void 0:i.trim())})),xe=Te?"item":"image",ke=f((()=>Q.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())}))),[Q]),ye=g((e=>{var i,t;const n=Q[e],r=Te?"Item":"Image",l=q(n)?(null===(i=n.itemLabel)||void 0===i?void 0:i.trim())||"":(null===(t=n.alt)||void 0===t?void 0:t.trim())||"",o=`${r} ${e+1} of ${Q.length}.`;return l?`${l}. ${o}`:o}),[Q,Te]);p(J,(()=>({currentItemIndex:de,setCurrentItem:ze,goToPrevItem:De,goToNextItem:Me}))),w("keydown",(function(e){"ArrowRight"===e.key?Me():"ArrowLeft"===e.key?De():"Escape"===e.key&&(null==re||re())}),"document"),b((()=>{var e;oe&&(null===(e=Ie.current)||void 0===e||e.focus())}),[oe]),b((()=>{0!==Q.length?de>Q.length-1&&se(Q.length-1):se(0)}),[de,Q.length,se]),b((()=>{var e,i;null===(i=null===(e=$e.current)||void 0===e?void 0:e[de])||void 0===i||i.scrollIntoView({behavior:"smooth",inline:"center"}),me(1)}),[de]);const Le=e=>{me(e.state.scale)};const Se=({src:e,height:i,width:t})=>{he((n=>Object.assign(Object.assign({},n),{[e]:{height:i,width:t}})))},Ne=()=>{if(!we||q(we))return;const e=ce[we.src];if(be.current&&e){const{clientHeight:i,clientWidth:t}=be.current,{width:n,height:r}=e,l=r/n<i/t;return n<t&&r<i?l?t/n:i/r:l?i/(r/(n/t)):t/(n/(r/i))}},De=()=>{var e,i;null===(i=null===(e=je.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>0===e?Q.length-1:e-1),(e=>{c("polite"),h(ye(e),"polite")}))},Me=()=>{var e,i;null===(i=null===(e=je.current)||void 0===e?void 0:e[de])||void 0===i||i.resetTransform(),se((e=>e===Q.length-1?0:e+1),(e=>{c("polite"),h(ye(e),"polite")}))},ze=e=>{var i,t;null===(t=null===(i=je.current)||void 0===i?void 0:i[de])||void 0===t||t.resetTransform(),se(e)};return i(I,Object.assign({},ae,{"data-testid":"image-carousel-modal","aria-label":Te?"Carousel":"Image carousel",show:oe,disableInitialFocus:!0,children:t(T,{children:[t(x,{children:[t(k,{children:[i(y,{ref:be,onTouchStart:e=>{ue<=1&&fe(e.touches[0].clientX)},onTouchMove:e=>{!ve||ue>1||pe(e.touches[0].clientX)},onTouchEnd:()=>{be.current&&(Math.abs(Ce)>be.current.offsetWidth/3&&(Ce>0?Me():De()),fe(void 0),pe(void 0))},children:i(R,{style:{transform:`translateX(calc(${100*-de}% - ${Ce}px))`},children:Q.map(((e,t)=>{const n=t===de,r=Math.abs(t-de)<=1||0===de&&t===Q.length-1||de===Q.length-1&&0===t;return i(Z,{"data-testid":"slide-item",children:i(_,{ref:n?Ie:null,tabIndex:n?0:-1,children:q(e)?r?e.renderContent():i(O,{}):i($,{ref:e=>je.current[t]=e,panning:{disabled:ue<=1},initialScale:1,onZoom:Le,onZoomStop:Le,onWheel:Le,children:i(j,{children:i(W,{src:e.src,alt:ye(t),placeholder:i(O,{}),fit:"scale-down",retrieveImageDimension:!0,setDimension:Se})})})})},t)}))})}),!ee&&t(n,{children:[i(L,{"aria-label":`Previous ${xe}`,"data-testid":"prev-btn",$position:"left",onClick:De,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:i(r,{"aria-hidden":!0})}),i(L,{"aria-label":`Next ${xe}`,"data-testid":"forward-btn",$position:"right",onClick:Me,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:i(l,{"aria-hidden":!0})})]}),!ie&&i(S,{"aria-hidden":"true",children:i(N,{weight:"semibold",children:`${de+1}/${Q.length}`})})]}),!Y&&i(X,{$insetBottom:null==le?void 0:le.bottom,"aria-hidden":"true",children:i(E,{children:Q.map(((e,t)=>{var n;const r=q(e)?e.thumbnailSrc:null!==(n=e.thumbnailSrc)&&void 0!==n?n:e.src;return i(F,{children:i(P,{"data-testid":"thumbnail-item",$active:t===de,onClick:()=>ze(t),ref:e=>$e.current[t]=e,children:r?i(V,{src:r,alt:`Thumbnail ${t+1}`,fit:"cover"}):i(O,{})})},t)}))})})]}),t(D,{$hasFileInfo:ke,$insetTop:null==le?void 0:le.top,$insetLeft:null==le?void 0:le.left,$insetRight:null==le?void 0:le.right,children:[ke&&(()=>{const{fileName:e,fileSize:n}=null!=we?we:{},r=null==e?void 0:e.trim(),l=null==n?void 0:n.trim();return t(B,{$centerContent:!l,"aria-live":"polite","aria-atomic":"true","data-testid":"file-info-bar",children:[r&&i(G,{weight:"semibold","data-testid":"file-info-name",children:r}),l&&i(H,{"data-testid":"file-info-size",children:l})]})})(),!te&&!q(we)&&i(M,{"aria-label":1===ue?"Zoom in":"Zoom out",onClick:()=>{var e,i,t,n;if(1===ue){const t=Ne();null===(i=null===(e=je.current)||void 0===e?void 0:e[de])||void 0===i||i.centerView(t),me(null!=t?t:1)}else me(1),null===(n=null===(t=je.current)||void 0===t?void 0:t[de])||void 0===n||n.resetTransform()},children:i(1===ue?o:a,{"aria-hidden":!0})}),ne&&i(z,{"aria-label":`Delete ${q(we)&&(null===(K=we.itemLabel)||void 0===K?void 0:K.trim())||"image"}`,"data-testid":"delete-btn",onClick:()=>{we&&ne&&ne(we,de)},children:i(s,{"aria-hidden":!0})}),i(A,{"aria-label":Te?"Close carousel":"Close image carousel",onClick:re,children:i(d,{"aria-hidden":!0})})]})]})}))},K=u(J);export{J as Component,K 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