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

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

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    FilterButton,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n    FloatingWrapper,\n    MobileContainer,\n    MobileOverlayContainer,\n} from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    children,\n    toggleFilterButtonLabel: _toggleFilterButtonLabel,\n    headerTitle: _headerTitle,\n    doneButtonLabel: _doneButtonLabel,\n    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\n\n    const handleShow = () => setVisible(true);\n    const handleDismiss = () => {\n        setVisible(false);\n        onDismiss?.();\n    };\n    const handleDone = () => {\n        setVisible(false);\n        onDone?.();\n    };\n\n    const handleShowFilter = () => {\n        handleShow();\n        onModalOpen?.();\n    };\n\n    const labels = {\n        toggle:\n            customLabels?.toggleFilterButtonLabel ||\n            _toggleFilterButtonLabel ||\n            \"Filters\",\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        done: customLabels?.doneButtonLabel || _doneButtonLabel || \"Done\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    useEffect(() => {\n        if (visible) {\n            nodeRef.current?.focus();\n        }\n    }, [visible]);\n\n    return (\n        <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n            <div {...otherProps}>\n                <FilterButton\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    {labels.toggle}\n                </FilterButton>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <FloatingWrapper inert={inertValue(!visible)}>\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <MobileOverlayContainer\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <MobileContainer ref={nodeRef} tabIndex={0}>\n                                <FilterHeader $insetTop={insets?.top}>\n                                    <FilterHeaderButton\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </FilterHeaderButton>\n                                    <FilterTitle>{labels.title}</FilterTitle>\n                                    <FilterClearButton\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </FilterClearButton>\n                                </FilterHeader>\n                                <FilterBody>{children}</FilterBody>\n                                <FilterFooter $insetBottom={insets?.bottom}>\n                                    <FilterDoneButton onClick={handleDone}>\n                                        {labels.done}\n                                    </FilterDoneButton>\n                                </FilterFooter>\n                            </MobileContainer>\n                        </MobileOverlayContainer>\n                    </FloatingFocusManager>\n                </FloatingWrapper>\n            </Overlay>\n        </FilterContext.Provider>\n    );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","visible","setVisible","useState","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","FilterButton","styleType","onClick","type","icon","FilterIcon","Overlay","show","disableTransition","FloatingWrapper","inert","inertValue","FloatingFocusManager","disabled","MobileOverlayContainer","ref","setFloating","MobileContainer","tabIndex","FilterHeader","$insetTop","top","FilterHeaderButton","focusOutline","focusHighlight","CrossIcon","FilterTitle","FilterClearButton","FilterBody","FilterFooter","$insetBottom","bottom","FilterDoneButton","displayName"],"mappings":"+VAwBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,SACNA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,GAAgBf,EAC9BgB,EAAUC,SAAAjB,EAbW,6LAexB,MAAMkB,QAAEA,EAAOC,KAAEA,GAASC,gBACpBC,EAAUC,EAAAA,OAAuB,OAEhCC,EAASC,GAAcC,EAAAA,UAAS,GAiBjCC,EAAS,CACXC,QACI1B,aAAY,EAAZA,EAAcS,0BACdC,GACA,UACJiB,OAAO3B,aAAY,EAAZA,EAAcW,cAAeC,GAAgB,UACpDgB,MAAM5B,aAAY,EAAZA,EAAca,kBAAmBC,GAAoB,OAC3De,OAAO7B,eAAAA,EAAc8B,mBAAoB,SAS7C,OANAC,EAAAA,WAAU,WACFT,IACe,QAAfvB,EAAAqB,EAAQY,eAAO,IAAAjC,GAAAA,EAAEkC,QACrB,GACD,CAACX,IAGAY,EAAAA,KAACC,gBAAcC,UAASC,MAAO,CAAEC,KAAM,SAAUC,SAAUnB,GAASZ,SAAA,CAChEgC,EAAAA,IAAA,MAAAC,OAAAC,OAAA,GAAS3B,EAAU,CAAAP,SACfgC,EAAAA,IAACG,eAAY,CAAA,cACG,qBACZC,UAAWvC,EACXwC,QA3BS,KAVAtB,GAAW,GAYhCnB,SAAAA,GAAe,EA0BH0C,KAAK,SACLC,KAAMP,EAAAA,IAACQ,EAAAA,WAAU,CAAA,GAAGxC,SAEnBiB,EAAOC,YAGhBc,MAACS,EAAAA,QAAO,CAACC,KAAM5B,EAAS6B,mBAAiB,EAAA3C,SACrCgC,EAAAA,IAACY,kBAAe,CAACC,MAAOC,cAAYhC,YAChCkB,EAAAA,IAACe,EAAAA,qBAAoB,CAACtC,QAASA,EAASuC,UAAWlC,EAAOd,SACtDgC,EAAAA,IAACiB,oCACW,gBAAe,cACX,gBACZC,IAAKxC,EAAKyC,YAAWnD,SAErB0B,EAAAA,KAAC0B,EAAAA,gBAAe,CAACF,IAAKtC,EAASyC,SAAU,EAACrD,SAAA,CACtC0B,EAAAA,KAAC4B,eAAY,CAAAC,UAAYxD,aAAM,EAANA,EAAQyD,IAAGxD,SAAA,CAChCgC,EAAAA,IAACyB,EAAAA,mBAAkB,CACfpB,QAtDd,KAClBtB,GAAW,GACXpB,SAAAA,GAAa,EAqDmB+D,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS1C,EAAOE,QAAOnB,SAEnCgC,EAAAA,IAAC4B,YAAS,CAAA,KAEd5B,EAAAA,IAAC6B,EAAAA,YAAW,CAAA7D,SAAEiB,EAAOE,QACrBa,EAAAA,IAAC8B,oBAAiB,CACd1B,UAAU,OACVE,KAAK,SACLD,QAAS,IAAM5C,eAAAA,IACfuD,SAAUlD,eACE,SAASmB,EAAOE,QAAOnB,SAElCiB,EAAOI,WAGhBW,MAAC+B,EAAAA,WAAU,CAAA/D,SAAEA,IACbgC,EAAAA,IAACgC,EAAAA,aAAY,CAAAC,aAAelE,aAAM,EAANA,EAAQmE,gBAChClC,EAAAA,IAACmC,EAAAA,iBAAgB,CAAC9B,QAtE/B,KACftB,GAAW,GACXrB,SAAAA,GAAU,WAqEuBuB,EAAOG,sBAQf,EAIjC9B,EAAY8E,YAAc"}
+{"version":3,"file":"filter-modal.js","sources":["../../../src/filter/filter-modal.tsx"],"sourcesContent":["import { FloatingFocusManager, useFloating } from \"@floating-ui/react\";\nimport { CrossIcon, FilterIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport isNumber from \"lodash/isNumber\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Overlay } from \"../overlay\";\nimport { inertValue } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-modal.styles\";\nimport type { FilterModalProps } from \"./types\";\n\nexport const FilterModal = ({\n    customLabels,\n    onClear,\n    onDone,\n    onDismiss,\n    onModalOpen,\n    toggleFilterButtonStyle = \"light\",\n    clearButtonDisabled = false,\n    insets,\n    children,\n    toggleFilterButtonLabel: _toggleFilterButtonLabel,\n    headerTitle: _headerTitle,\n    doneButtonLabel: _doneButtonLabel,\n    className,\n    ...otherProps\n}: FilterModalProps) => {\n    const { context, refs } = useFloating();\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const footerRef = useRef<HTMLDivElement>(null);\n\n    const [visible, setVisible] = useState(false);\n\n    useApplyStyle(headerRef, {\n        [styles.tokens.filterHeader.insetTop]: isNumber(insets?.top)\n            ? `${insets.top}px`\n            : null,\n    });\n\n    useApplyStyle(footerRef, {\n        [filterStyles.tokens.filterFooter.insetBottom]: isNumber(insets?.bottom)\n            ? `${insets.bottom}px`\n            : null,\n    });\n\n    const handleShow = () => setVisible(true);\n    const handleDismiss = () => {\n        setVisible(false);\n        onDismiss?.();\n    };\n    const handleDone = () => {\n        setVisible(false);\n        onDone?.();\n    };\n\n    const handleShowFilter = () => {\n        handleShow();\n        onModalOpen?.();\n    };\n\n    const labels = {\n        toggle:\n            customLabels?.toggleFilterButtonLabel ||\n            _toggleFilterButtonLabel ||\n            \"Filters\",\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        done: customLabels?.doneButtonLabel || _doneButtonLabel || \"Done\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    useEffect(() => {\n        if (visible) {\n            nodeRef.current?.focus();\n        }\n    }, [visible]);\n\n    return (\n        <FilterContext.Provider value={{ mode: \"mobile\", rootNode: nodeRef }}>\n            <div className={className} {...otherProps}>\n                <Button\n                    className={styles.filterButton}\n                    data-testid=\"filter-show-button\"\n                    styleType={toggleFilterButtonStyle}\n                    onClick={handleShowFilter}\n                    type=\"button\"\n                    icon={<FilterIcon />}\n                >\n                    {labels.toggle}\n                </Button>\n            </div>\n            <Overlay show={visible} disableTransition>\n                <div\n                    className={styles.floatingWrapper}\n                    inert={inertValue(!visible)}\n                >\n                    <FloatingFocusManager context={context} disabled={!visible}>\n                        <div\n                            className={styles.mobileOverlayContainer}\n                            data-id=\"filter-mobile\"\n                            data-testid=\"filter-mobile\"\n                            ref={refs.setFloating}\n                        >\n                            <div\n                                className={styles.mobileContainer}\n                                ref={nodeRef}\n                                tabIndex={0}\n                            >\n                                <div\n                                    ref={headerRef}\n                                    className={clsx(\n                                        styles.filterHeader,\n                                        isNumber(insets?.top) &&\n                                            styles.filterHeaderWithInsetTop\n                                    )}\n                                >\n                                    <ClickableIcon\n                                        className={\n                                            filterStyles.filterHeaderButton\n                                        }\n                                        onClick={handleDismiss}\n                                        focusOutline=\"browser\"\n                                        focusHighlight={false}\n                                        aria-label={`close ${labels.title}`}\n                                    >\n                                        <CrossIcon />\n                                    </ClickableIcon>\n                                    <h2 className={styles.filterTitle}>\n                                        {labels.title}\n                                    </h2>\n                                    <Button\n                                        className={styles.filterClearButton}\n                                        styleType=\"link\"\n                                        type=\"button\"\n                                        sizeType=\"small\"\n                                        onClick={() => onClear?.()}\n                                        disabled={clearButtonDisabled}\n                                        aria-label={`clear ${labels.title}`}\n                                    >\n                                        {labels.clear}\n                                    </Button>\n                                </div>\n                                <div className={filterStyles.filterBody}>\n                                    {children}\n                                </div>\n                                <div\n                                    ref={footerRef}\n                                    className={clsx(\n                                        filterStyles.filterFooter,\n                                        isNumber(insets?.bottom) &&\n                                            filterStyles.filterFooterWithInsetBottom\n                                    )}\n                                >\n                                    <Button\n                                        className={\n                                            filterStyles.filterDoneButton\n                                        }\n                                        onClick={handleDone}\n                                    >\n                                        {labels.done}\n                                    </Button>\n                                </div>\n                            </div>\n                        </div>\n                    </FloatingFocusManager>\n                </div>\n            </Overlay>\n        </FilterContext.Provider>\n    );\n};\n\nFilterModal.displayName = \"Filter.Modal\";\n"],"names":["FilterModal","_a","customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","_toggleFilterButtonLabel","headerTitle","_headerTitle","doneButtonLabel","_doneButtonLabel","className","otherProps","__rest","context","refs","useFloating","nodeRef","useRef","headerRef","footerRef","visible","setVisible","useState","useApplyStyle","styles.tokens","filterHeader","insetTop","isNumber","top","filterStyles.tokens","filterFooter","insetBottom","bottom","labels","toggle","title","done","clear","clearButtonLabel","useEffect","current","focus","_jsxs","FilterContext","Provider","value","mode","rootNode","_jsx","Object","assign","Button","styles.filterButton","styleType","onClick","type","icon","FilterIcon","Overlay","show","disableTransition","styles.floatingWrapper","inert","inertValue","FloatingFocusManager","disabled","styles.mobileOverlayContainer","ref","setFloating","styles.mobileContainer","tabIndex","clsx","styles.filterHeader","styles.filterHeaderWithInsetTop","ClickableIcon","filterStyles.filterHeaderButton","focusOutline","focusHighlight","CrossIcon","styles.filterTitle","styles.filterClearButton","sizeType","filterStyles.filterBody","filterStyles.filterFooter","filterStyles.filterFooterWithInsetBottom","filterStyles.filterDoneButton","displayName"],"mappings":"+5BAgBO,MAAMA,EAAeC,IAAA,IAAAC,aACxBA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAASC,YACTA,EAAWC,wBACXA,EAA0B,QAAOC,oBACjCA,GAAsB,EAAKC,OAC3BA,EAAMC,SACNA,EACAC,wBAAyBC,EACzBC,YAAaC,EACbC,gBAAiBC,EAAgBC,UACjCA,GAAShB,EACNiB,EAAUC,SAAAlB,EAdW,yMAgBxB,MAAMmB,QAAEA,EAAOC,KAAEA,GAASC,gBACpBC,EAAUC,EAAAA,OAAuB,MACjCC,EAAYD,EAAAA,OAAuB,MACnCE,EAAYF,EAAAA,OAAuB,OAElCG,EAASC,GAAcC,EAAAA,UAAS,GAEvCC,EAAAA,cAAcL,EAAW,CACrB,CAACM,SAAcC,aAAaC,UAAWC,UAASzB,eAAAA,EAAQ0B,KAClD,GAAG1B,EAAO0B,QACV,OAGVL,EAAAA,cAAcJ,EAAW,CACrB,CAACU,SAAoBC,aAAaC,aAAcJ,UAASzB,eAAAA,EAAQ8B,QAC3D,GAAG9B,EAAO8B,WACV,OAGV,MAeMC,EAAS,CACXC,QACIvC,aAAY,EAAZA,EAAcS,0BACdC,GACA,UACJ8B,OAAOxC,aAAY,EAAZA,EAAcW,cAAeC,GAAgB,UACpD6B,MAAMzC,aAAY,EAAZA,EAAca,kBAAmBC,GAAoB,OAC3D4B,OAAO1C,eAAAA,EAAc2C,mBAAoB,SAS7C,OANAC,EAAAA,WAAU,WACFnB,IACe,QAAf1B,EAAAsB,EAAQwB,eAAO,IAAA9C,GAAAA,EAAE+C,QACrB,GACD,CAACrB,IAGAsB,OAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,SAAUC,SAAU/B,GAASb,SAAA,CAChE6C,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAKxC,UAAWA,GAAeC,EAAU,CAAAR,SACrC6C,EAAAA,IAACG,EAAAA,OAAM,CACHzC,UAAW0C,EAAAA,2BACC,qBACZC,UAAWrD,EACXsD,QA5BS,KAVAjC,GAAW,GAYhCtB,SAAAA,GAAe,EA2BHwD,KAAK,SACLC,KAAMR,EAAAA,IAACS,EAAAA,eAAatD,SAEnB8B,EAAOC,YAGhBc,EAAAA,IAACU,EAAAA,SAAQC,KAAMvC,EAASwC,mBAAiB,EAAAzD,SACrC6C,EAAAA,IAAA,MAAA,CACItC,UAAWmD,kBACXC,MAAOC,EAAAA,YAAY3C,GAAQjB,SAE3B6C,EAAAA,IAACgB,EAAAA,sBAAqBnD,QAASA,EAASoD,UAAW7C,EAAOjB,SACtD6C,EAAAA,IAAA,MAAA,CACItC,UAAWwD,EAAAA,uBAA6B,UAChC,gBAAe,cACX,gBACZC,IAAKrD,EAAKsD,YAAWjE,SAErBuC,EAAAA,KAAA,MAAA,CACIhC,UAAW2D,EAAAA,gBACXF,IAAKnD,EACLsD,SAAU,EAACnE,SAAA,CAEXuC,EAAAA,KAAA,MAAA,CACIyB,IAAKjD,EACLR,UAAW6D,UACPC,EAAAA,aACA7C,EAAAA,QAASzB,aAAM,EAANA,EAAQ0B,MACb6C,4BACPtE,SAAA,CAED6C,MAAC0B,EAAAA,cAAa,CACVhE,UACIiE,EAAAA,mBAEJrB,QAzEd,KAClBjC,GAAW,GACXvB,SAAAA,GAAa,EAwEmB8E,aAAa,UACbC,gBAAgB,EAAK,aACT,SAAS5C,EAAOE,QAAOhC,SAEnC6C,EAAAA,IAAC8B,EAAAA,UAAS,MAEd9B,EAAAA,IAAA,KAAA,CAAItC,UAAWqE,EAAAA,YAAkB5E,SAC5B8B,EAAOE,QAEZa,MAACG,EAAAA,OAAM,CACHzC,UAAWsE,EAAAA,kBACX3B,UAAU,OACVE,KAAK,SACL0B,SAAS,QACT3B,QAAS,IAAM1D,aAAO,EAAPA,IACfqE,SAAUhE,EAAmB,aACjB,SAASgC,EAAOE,QAAOhC,SAElC8B,EAAOI,WAGhBW,EAAAA,IAAA,MAAA,CAAKtC,UAAWwE,aAAuB/E,SAClCA,IAEL6C,MAAA,MAAA,CACImB,IAAKhD,EACLT,UAAW6D,UACPY,EAAAA,aACAxD,EAAAA,QAASzB,aAAM,EAANA,EAAQ8B,SACboD,+BACPjF,SAED6C,EAAAA,IAACG,EAAAA,OAAM,CACHzC,UACI2E,EAAAA,iBAEJ/B,QA1GjB,KACfjC,GAAW,GACXxB,SAAAA,GAAU,EAwGyCM,SAElB8B,EAAOG,sBAQf,EAIjC3C,EAAY6F,YAAc"}

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

@@ -1,30 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../button/button.js"),o=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var r=i(t);const n=r.default.div`
-    background-color: ${o.V3_Colour["bg-strong"]};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`,a=r.default.div`
-    background-color: ${o.V3_Colour.bg};
-    height: 100%;
-    width: 100%;
-`,l=r.default.div`
-    height: 100%;
-`,d=r.default.div`
-    display: flex;
-    align-items: center;
-    background-color: ${o.V3_Colour.bg};
-    ${t=>t.$insetTop&&`padding-top: ${t.$insetTop}px;`}
-`,u=r.default.h2`
-    ${o.V3_Font["heading-xs-semibold"]}
-    flex: 1;
-    text-align: center;
-    margin: ${o.V3_Spacing["spacing-24"]} 0;
-`,p=r.default(e.Button.Small)`
-    background-color: transparent;
-    height: 100%;
-    padding: ${o.V3_Spacing["spacing-24"]} ${o.V3_Spacing["spacing-20"]};
-`,s=r.default(e.Button)`
-    width: 100%;
-`;exports.FilterButton=s,exports.FilterClearButton=p,exports.FilterHeader=d,exports.FilterTitle=u,exports.FloatingWrapper=l,exports.MobileContainer=n,exports.MobileOverlayContainer=a;
+"use strict";require("./filter-modal.styles_e0ev97.css");exports.filterButton="fxpov9b",exports.filterClearButton="f14huz7l",exports.filterHeader="f1ijv0o9",exports.filterHeaderWithInsetTop="f50yopa",exports.filterTitle="f15rygha",exports.floatingWrapper="fidypou",exports.mobileContainer="m19agezm",exports.mobileOverlayContainer="m11wuwo8",exports.tokens={filterHeader:{insetTop:"--fds-internal-filter-filterModalHeader-insetTop"}};
 //# sourceMappingURL=filter-modal.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { V3_Colour, V3_Font, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ntype FilterHeaderProps = {\n    $insetTop?: number | undefined;\n};\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const MobileContainer = styled.div`\n    background-color: ${V3_Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const MobileOverlayContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const FloatingWrapper = styled.div`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const FilterHeader = styled.div<FilterHeaderProps>`\n    display: flex;\n    align-items: center;\n    background-color: ${V3_Colour[\"bg\"]};\n    ${(props) => props.$insetTop && `padding-top: ${props.$insetTop}px;`}\n`;\n\nexport const FilterTitle = styled.h2`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${V3_Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const FilterClearButton = styled(Button.Small)`\n    background-color: transparent;\n    height: 100%;\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const FilterButton = styled(Button)`\n    width: 100%;\n`;\n"],"names":["MobileContainer","styled","div","V3_Colour","MobileOverlayContainer","FloatingWrapper","FilterHeader","props","$insetTop","FilterTitle","h2","V3_Font","V3_Spacing","FilterClearButton","Button","Small","FilterButton"],"mappings":"sMAgBO,MAAMA,EAAkBC,EAAAA,QAAOC,GAAG;wBACjBC,EAAAA,UAAU;;;;;EAOrBC,EAAyBH,EAAAA,QAAOC,GAAG;wBACxBC,EAAAA,UAAc;;;EAKzBE,EAAkBJ,EAAAA,QAAOC,GAAG;;EAQ5BI,EAAeL,EAAAA,QAAOC,GAAsB;;;wBAGjCC,EAAAA,UAAc;MAC/BI,GAAUA,EAAMC,WAAa,gBAAgBD,EAAMC;EAG7CC,EAAcR,EAAAA,QAAOS,EAAE;MAC9BC,EAAAA,QAAQ;;;cAGAC,EAAAA,WAAW;EAGZC,EAAoBZ,EAAAA,QAAOa,SAAOC,MAAM;;;eAGtCH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;EAOzCI,EAAef,EAAAA,QAAOa,EAAAA,OAAO;;"}
+{"version":3,"file":"filter-modal.styles.js","sources":["../../../src/filter/filter-modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n    filterHeader: {\n        insetTop: \"--fds-internal-filter-filterModalHeader-insetTop\",\n    },\n} as const;\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const mobileContainer = css`\n    background-color: ${Colour[\"bg-strong\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const mobileOverlayContainer = css`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n`;\n\nexport const floatingWrapper = css`\n    height: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n    display: flex;\n    align-items: center;\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterHeaderWithInsetTop = css`\n    ${tokens.filterHeader.insetTop}: initial;\n    padding-top: var(${tokens.filterHeader.insetTop});\n`;\n\nexport const filterTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    text-align: center;\n    margin: ${Spacing[\"spacing-24\"]} 0;\n`;\n\nexport const filterClearButton = css`\n    background-color: transparent;\n    height: 100%;\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// COMPONENT STYLES\n// =============================================================================\n\nexport const filterButton = css`\n    width: 100%;\n`;\n"],"names":["filterHeader","insetTop"],"mappings":"oGAgEyB,oCAVK,gCAlBL,4CAMY,8BAKb,mCAnBI,kCAdA,0CAQO,0BAlBb,CAClBA,aAAc,CACVC,SAAU"}

package/cjs/filter/filter-modal.styles_e0ev97.css

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

package/cjs/filter/filter-sidebar.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),l=require("./filter.styles.js"),i=require("./filter-context.js"),s=require("./filter-sidebar.styles.js");const a=a=>{var{customLabels:d,onClear:n,clearButtonDisabled:o=!1,children:c,headerTitle:u}=a,b=e.__rest(a,["customLabels","onClear","clearButtonDisabled","children","headerTitle"]);const j=t.useRef(null),h={title:(null==d?void 0:d.headerTitle)||u||"Filters",clear:(null==d?void 0:d.clearButtonLabel)||"Clear"};return r.jsx(i.FilterContext.Provider,{value:{mode:"default",rootNode:j},children:r.jsxs(s.DesktopContainer,Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:j},b,{children:[r.jsxs(s.FilterHeader,{children:[r.jsx(s.FilterTitle,{children:h.title}),r.jsx(s.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==n?void 0:n(),disabled:o,"aria-label":`clear ${h.title}`,children:h.clear})]}),r.jsx(l.FilterBody,{children:c})]}))})};a.displayName="Filter.Sidebar",exports.FilterSidebar=a;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("clsx"),r=require("react"),i=require("../button/button.js"),a=require("./filter.styles.js"),s=require("./filter-context.js"),d=require("./filter-sidebar.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(l);const o=l=>{var{customLabels:n,onClear:o,clearButtonDisabled:u=!1,children:f,headerTitle:b,className:j}=l,m=e.__rest(l,["customLabels","onClear","clearButtonDisabled","children","headerTitle","className"]);const h=r.useRef(null),v={title:(null==n?void 0:n.headerTitle)||b||"Filters",clear:(null==n?void 0:n.clearButtonLabel)||"Clear"};return t.jsx(s.FilterContext.Provider,{value:{mode:"default",rootNode:h},children:t.jsxs("div",Object.assign({"data-id":"filter-desktop","data-testid":"filter-desktop",ref:h,className:c.default(d.desktopContainer,j)},m,{children:[t.jsxs("div",{className:d.filterHeader,children:[t.jsx("h2",{className:d.filterTitle,children:v.title}),t.jsx(i.Button,{className:d.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==o?void 0:o(),disabled:u,"aria-label":`clear ${v.title}`,children:v.clear})]}),t.jsx("div",{className:a.filterBody,children:f})]}))})};o.displayName="Filter.Sidebar",exports.FilterSidebar=o;
 //# sourceMappingURL=filter-sidebar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import { useRef } from \"react\";\n\nimport { FilterBody } from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    DesktopContainer,\n    FilterClearButton,\n    FilterHeader,\n    FilterTitle,\n} from \"./filter-sidebar.styles\";\nimport type { FilterSidebarProps } from \"./types\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    children,\n    headerTitle: _headerTitle,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <DesktopContainer\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                {...otherProps}\n            >\n                <FilterHeader>\n                    <FilterTitle>{labels.title}</FilterTitle>\n                    <FilterClearButton\n                        styleType=\"link\"\n                        type=\"button\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </FilterClearButton>\n                </FilterHeader>\n                <FilterBody>{children}</FilterBody>\n            </DesktopContainer>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","children","headerTitle","_headerTitle","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","DesktopContainer","Object","assign","ref","FilterHeader","FilterTitle","FilterClearButton","styleType","type","onClick","disabled","FilterBody","displayName"],"mappings":"+MAYO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,GAAYN,EACtBO,EAAUC,EAAAA,OAAAR,EANa,2EAQ1B,MAAMS,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,OAAOX,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDO,OAAOZ,eAAAA,EAAca,mBAAoB,SAG7C,OACIC,EAAAA,IAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASL,SACjEiB,OAACC,EAAAA,iBAAgBC,OAAAC,OAAA,CAAA,UACL,iBAAgB,cACZ,iBACZC,IAAKhB,GACDF,EAAU,CAAAH,SAAA,CAEdiB,EAAAA,KAACK,EAAAA,aAAY,CAAAtB,SAAA,CACTW,MAACY,EAAAA,YAAW,CAAAvB,SAAEO,EAAOC,QACrBG,EAAAA,IAACa,EAAAA,kBAAiB,CACdC,UAAU,OACVC,KAAK,SACLC,QAAS,IAAM7B,eAAAA,IACf8B,SAAU7B,EAAmB,aACjB,SAASQ,EAAOC,QAAOR,SAElCO,EAAOE,WAGhBE,EAAAA,IAACkB,EAAAA,WAAU,CAAA7B,SAAEA,SAEI,EAIjCL,EAAcmC,YAAc"}
+{"version":3,"file":"filter-sidebar.js","sources":["../../../src/filter/filter-sidebar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { Button } from \"../button\";\nimport * as filterStyles from \"./filter.styles\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-sidebar.styles\";\nimport type { FilterSidebarProps } from \"./types\";\n\nexport const FilterSidebar = ({\n    customLabels,\n    onClear,\n    clearButtonDisabled = false,\n    children,\n    headerTitle: _headerTitle,\n    className,\n    ...otherProps\n}: FilterSidebarProps) => {\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    const labels = {\n        title: customLabels?.headerTitle || _headerTitle || \"Filters\",\n        clear: customLabels?.clearButtonLabel || \"Clear\",\n    };\n\n    return (\n        <FilterContext.Provider value={{ mode: \"default\", rootNode: nodeRef }}>\n            <div\n                data-id=\"filter-desktop\"\n                data-testid=\"filter-desktop\"\n                ref={nodeRef}\n                className={clsx(styles.desktopContainer, className)}\n                {...otherProps}\n            >\n                <div className={styles.filterHeader}>\n                    <h2 className={styles.filterTitle}>{labels.title}</h2>\n                    <Button\n                        className={styles.filterClearButton}\n                        styleType=\"link\"\n                        type=\"button\"\n                        sizeType=\"small\"\n                        onClick={() => onClear?.()}\n                        disabled={clearButtonDisabled}\n                        aria-label={`clear ${labels.title}`}\n                    >\n                        {labels.clear}\n                    </Button>\n                </div>\n                <div className={filterStyles.filterBody}>{children}</div>\n            </div>\n        </FilterContext.Provider>\n    );\n};\n\nFilterSidebar.displayName = \"Filter.Sidebar\";\n"],"names":["FilterSidebar","_a","customLabels","onClear","clearButtonDisabled","children","headerTitle","_headerTitle","className","otherProps","__rest","nodeRef","useRef","labels","title","clear","clearButtonLabel","_jsx","FilterContext","Provider","value","mode","rootNode","_jsxs","Object","assign","ref","clsx","styles.desktopContainer","styles.filterHeader","styles.filterTitle","Button","styles.filterClearButton","styleType","type","sizeType","onClick","disabled","filterStyles.filterBody","displayName"],"mappings":"qVASO,MAAMA,EAAiBC,QAAAC,aAC1BA,EAAYC,QACZA,EAAOC,oBACPA,GAAsB,EAAKC,SAC3BA,EACAC,YAAaC,EAAYC,UACzBA,GAASP,EACNQ,EAAUC,EAAAA,OAAAT,EAPa,uFAS1B,MAAMU,EAAUC,EAAAA,OAAuB,MAEjCC,EAAS,CACXC,OAAOZ,aAAY,EAAZA,EAAcI,cAAeC,GAAgB,UACpDQ,OAAOb,eAAAA,EAAcc,mBAAoB,SAG7C,OACIC,EAAAA,IAACC,EAAAA,cAAcC,SAAQ,CAACC,MAAO,CAAEC,KAAM,UAAWC,SAAUX,GAASN,SACjEkB,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CAAA,UACY,iBAAgB,cACZ,iBACZC,IAAKf,EACLH,UAAWmB,EAAAA,QAAKC,EAAAA,iBAAyBpB,IACrCC,EAAU,CAAAJ,SAAA,CAEdkB,EAAAA,KAAA,MAAA,CAAKf,UAAWqB,EAAAA,aAAmBxB,SAAA,CAC/BY,MAAA,KAAA,CAAIT,UAAWsB,EAAAA,YAAkBzB,SAAGQ,EAAOC,QAC3CG,EAAAA,IAACc,EAAAA,OAAM,CACHvB,UAAWwB,EAAAA,kBACXC,UAAU,OACVC,KAAK,SACLC,SAAS,QACTC,QAAS,IAAMjC,aAAO,EAAPA,IACfkC,SAAUjC,EAAmB,aACjB,SAASS,EAAOC,QAAOT,SAElCQ,EAAOE,WAGhBE,EAAAA,IAAA,MAAA,CAAKT,UAAW8B,aAAuBjC,SAAGA,SAEzB,EAIjCL,EAAcuC,YAAc"}

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

@@ -1,24 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../button/button.js"),t=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const n=i.default.div`
-    background-color: ${t.V3_Colour.bg};
-    border: ${t.V3_Border["width-010"]} ${t.V3_Border.solid}
-        ${t.V3_Colour.border};
-    border-radius: ${t.V3_Radius.md};
-    overflow: hidden;
-    width: 100%;
-`,a=i.default.div`
-    display: flex;
-    align-items: center;
-
-    background-color: ${t.V3_Colour.bg};
-`,d=i.default.h2`
-    ${t.V3_Font["heading-xs-semibold"]}
-    flex: 1;
-    margin: ${t.V3_Spacing["spacing-24"]} 0 ${t.V3_Spacing["spacing-24"]}
-        ${t.V3_Spacing["spacing-20"]};
-`,l=i.default(r.Button.Small)`
-    background-color: transparent;
-    padding-right: ${t.V3_Spacing["spacing-20"]};
-    padding-left: ${t.V3_Spacing["spacing-20"]};
-    height: 100%;
-`;exports.DesktopContainer=n,exports.FilterClearButton=l,exports.FilterHeader=a,exports.FilterTitle=d;
+"use strict";require("./filter-sidebar.styles_cwvqql.css");exports.desktopContainer="d1a2pl71",exports.filterClearButton="f1i4s84l",exports.filterHeader="fq9unar",exports.filterTitle="fjfy2r5";
 //# sourceMappingURL=filter-sidebar.styles.js.map

package/cjs/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":"sMAeO,MAAMA,EAAmBC,EAAAA,QAAOC,GAAG;wBAClBC,EAAAA,UAAc;cACxBC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CD,EAAAA,UAAkB;qBACPE,EAAAA,UAAc;;;EAStBC,EAAeL,EAAAA,QAAOC,GAAG;;;;wBAIdC,EAAAA,UAAc;EAGzBI,EAAcN,EAAAA,QAAOO,EAAE;MAC9BC,EAAAA,QAAQ;;cAEAC,EAAAA,WAAW,mBAAmBA,EAAAA,WAAW;UAC7CA,EAAAA,WAAW;EAGRC,EAAoBV,EAAAA,QAAOW,SAAOC,MAAM;;qBAEhCH,EAAAA,WAAW;oBACZA,EAAAA,WAAW;;"}
+{"version":3,"file":"filter-sidebar.styles.js","sources":["../../../src/filter/filter-sidebar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// CONTAINER STYLES\n// =============================================================================\n\nexport const desktopContainer = css`\n    background-color: ${Colour[\"bg\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"md\"]};\n    overflow: hidden;\n    width: 100%;\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterHeader = css`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    flex: 1;\n    margin: ${Spacing[\"spacing-24\"]} 0;\n    margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterClearButton = css`\n    background-color: transparent;\n    padding-right: ${Spacing[\"spacing-20\"]};\n    padding-left: ${Spacing[\"spacing-20\"]};\n    height: 100%;\n`;\n"],"names":[],"mappings":"0GAQ6B,qCA0BC,gCAdL,8BAOD"}

package/cjs/filter/filter-sidebar.styles_cwvqql.css

@@ -0,0 +1,4 @@
+.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);}
+.fjfy2r5{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);-webkit-flex:1;-ms-flex:1;flex:1;margin:var(--fds-spacing-24) 0;margin-left:var(--fds-spacing-20);}
+.f1i4s84l{background-color:transparent;padding-right:var(--fds-spacing-20);padding-left:var(--fds-spacing-20);height:100%;}

package/cjs/filter/filter.js

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

package/cjs/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":"yZAYO,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,EAAAA,OAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAAEC,SAAUJ,IAQ3C,OANAK,EAAAA,WAAU,KACDH,GACDd,SAAAA,GACJ,GACD,CAACc,IAGAI,EAAAA,WAAKpB,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DiB,EACGI,EAAAA,IAACC,cAAWC,OAAAC,OAAA,CACRrB,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVqB,EAAAA,IAACI,EAAAA,+BAAkBf,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAIdF,EAAO4B,QAAUD,EAAAA,cACjB3B,EAAO6B,MAAQL,EAAAA,YACfxB,EAAO8B,KAAOC,EAAAA,WACd/B,EAAOgC,KAAOC,EAAAA,eACdjC,EAAOkC,SAAWC,EAAAA"}
+{"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":"6vBAUO,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,EAAAA,OAAAZ,EAXW,CAAA,WAAA,YAAA,QAAA,YAAA,SAAA,cAAA,0BAAA,SAAA,KAAA,gBAanB,MAAMa,EAAWC,EAAAA,sBAAsB,MAQvC,OANAC,EAAAA,WAAU,KACDF,GACDT,SAAAA,GACJ,GACD,CAACS,IAGAG,EAAAA,WAAKd,UAAWA,EAAWC,MAAOA,EAAOM,GAAIA,EAAE,cAAeC,EAAMT,SAC/DY,EACGG,EAAAA,IAACC,cAAWC,OAAAC,OAAA,CACRf,UAAWA,EACXC,OAAQA,EACRC,YAAaA,EACbC,wBAAyBA,EACzBC,OAAQA,GACJG,EAAK,CAAAV,SAEY,mBAAbA,EACFA,EAAS,UACTA,KAGVe,EAAAA,IAACI,EAAAA,+BAAkBT,EAAK,CAAAV,SACC,mBAAbA,EACFA,EAAS,WACTA,MAGZ,EAIdF,EAAOsB,QAAUD,EAAAA,cACjBrB,EAAOuB,MAAQL,EAAAA,YACflB,EAAOwB,KAAOC,EAAAA,WACdzB,EAAO0B,KAAOC,EAAAA,eACd3B,EAAO4B,SAAWC,EAAAA"}

package/cjs/filter/filter.styles.js

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

package/cjs/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":"8PAkBO,MAAMA,EAAaC,EAAAA,QAAOC,GAAG;;;;EAUvBC,EAAqBF,EAAAA,QAAOG,EAAAA,cAAc;eACxCC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;;aAEzCC,EAAAA,UAAgB;;;;;;;;iBAQZA,EAAAA,UAAU;;EAQdC,EAAeN,EAAAA,QAAOC,GAAsB;eAC1CG,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;wBAC9BC,EAAAA,UAAc;kBACpBE,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UACnDF,EAAAA,UAAkB;MACrBG,GACCA,EAAMC,cAAgB,mBAAmBD,EAAMC;EAG1CC,EAAmBV,EAAAA,QAAOW,SAAOC,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`;\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":["filterFooter","insetBottom"],"mappings":"4FAcuB,mCAwCM,gCAXJ,8CAMe,qCAzBT,yBApBT,CAClBA,aAAc,CACVC,YAAa"}

package/cjs/filter/filter.styles_2fmaok.css

@@ -0,0 +1,5 @@
+.fh4ozpc{-webkit-flex:1;-ms-flex:1;flex:1;width:100%;overflow-y:auto;}
+.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/cjs/form/form-label-addon.js

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

package/cjs/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":["addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"+kCAiB4B,EACxBA,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,aAAmBC,SAC/BH,EAAAA,IAACI,gBAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAAAA,IAACO,EAAAA,gBAAe,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":["addon","rootNode","content","type","icon","id","zIndex","testId","_jsx","className","styles.addonWrapper","children","PopoverInline","trigger","popoverContent","ICircleFillIcon","ariaLabel"],"mappings":"knCAiB4B,EACxBA,QACAC,eAKA,MAAMC,QAAEA,EAAOC,KAAEA,EAAIC,KAAEA,EAAIC,GAAEA,EAAEC,OAAEA,EAAQ,cAAeC,GAAWP,EAKnE,OACIQ,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,aAAmBC,SAC/BH,EAAAA,IAACI,gBAAa,CACVC,QAAQ,QACRR,GAAIA,EAAE,cACOE,EACbO,eAAgBZ,EAChBD,SAAUA,EACVK,OAAQA,EACRF,KAAMA,QAAAA,EAAQI,EAAAA,IAACO,EAAAA,gBAAe,CAAA,cAAc,GAAGZ,WAC/Ca,UAAU,eAEZ"}

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

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

package/cjs/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":"wcAOA,MAoCaA,OAAkBC,QAAMC,YApCnB,CACdC,EACAC,KAEA,MAAMC,MACFA,EAAKC,aACLA,EAAYC,GACZA,EACA,oBAAqBC,EACrB,cAAeC,EAAMC,WACrBA,GAEAP,EADGQ,EAAUC,EAAAA,OACbT,EARE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,eAUAU,EAAaC,EAAAA,QACbC,EAAUR,QAAAA,EAAM,2BAA2BM,IAEjD,OACIG,EAAAA,IAACC,EAAAA,YAAW,CACRV,GAAIQ,EACJV,MAAOA,EACPC,aAAcA,EAAY,oBACPE,EACnBE,WAAYA,EAAUQ,SAEtBF,EAAAA,IAACG,EAAAA,YAAWC,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":"wcAOA,MAmDaA,OAAkBC,QAAMC,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,EAAAA,OACbhB,EAfE,CAAA,QAAA,eAAA,KAAA,oBAAA,cAAA,aAAA,UAAA,SAAA,SAAA,SAAA,SAAA,SAAA,YAiBAiB,EAAaC,EAAAA,QACbC,EAAUf,QAAAA,EAAM,2BAA2Ba,IAEjD,OACIG,MAACC,EAAAA,aACGjB,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,EAAAA,IAACE,EAAAA,2BACGrB,IAAKA,EACLG,GAAI,GAAGe,SAAc,cACRb,EAAS,GAAGA,cAAgBiB,EACzCC,QAASrB,GACLY,KAEE"}

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

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

package/cjs/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":["_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":"oaAKoCA,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,EAAAA,OAAAf,EAdmB,+IAgBhC,MAAMgB,EAAaC,EAAAA,QACbC,EAAUf,QAAAA,EAAM,0BAA0Ba,IAChD,OACIG,MAACC,EAAAA,YAAW,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,EAAAA,IAACG,iCACGnB,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":["_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":"oaAKoCA,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,EAAAA,OAAAf,EAdmB,+IAgBhC,MAAMgB,EAAaC,EAAAA,QACbC,EAAUf,QAAAA,EAAM,0BAA0Ba,IAChD,OACIG,MAACC,EAAAA,YAAW,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,EAAAA,IAACG,EAAAA,+BACGnB,GAAI,GAAGe,uBACMb,EAAS,GAAGA,cAAgBkB,EACzCC,QAAStB,GACLY,KAEE"}

package/cjs/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":"u3BAyBO,MAAMA,EAAO,CAChBC,UAAWC,EAAAA,cACXC,eAAgBC,EAAAA,mBAChBC,WAAYC,EAAAA,eACZC,gBAAiBC,EAAAA,oBACjBC,MAAOC,EAAAA,UACPC,WAAYC,EAAAA,eACZC,YAAaC,EAAAA,gBACbC,MAAOC,EAAAA,UACPC,YAAaC,EAAAA,gBACbC,aAAcC,EAAAA,iBACdC,kBAAmBC,EAAAA,sBACnBC,OAAQC,EAAAA,WACRC,gBAAiBC,EAAAA,oBACjBC,OAAQC,EAAAA,WACRC,YAAaC,EAAAA,gBACbC,YAAaC,EAAAA,gBACbC,SAAUC,EAAAA,aACVC,WAAYC,EAAAA,eACZC,gBAAiBC,EAAAA,oBACjBC,YAAaC,EAAAA,gBACbC,gBAAiBC,EAAAA,oBACjBC,iBAAkBC,EAAAA,qBAClBC,oBAAqBC,EAAAA,wBACrBC,gBAAiBC,EAAAA"}
+{"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":"u3BA2BO,MAAMA,EAAO,CAChBC,UAAWC,EAAAA,cACXC,eAAgBC,EAAAA,mBAChBC,WAAYC,EAAAA,eACZC,gBAAiBC,EAAAA,oBACjBC,MAAOC,EAAAA,UACPC,WAAYC,EAAAA,eACZC,YAAaC,EAAAA,gBACbC,MAAOC,EAAAA,UACPC,YAAaC,EAAAA,gBACbC,aAAcC,EAAAA,iBACdC,kBAAmBC,EAAAA,sBACnBC,OAAQC,EAAAA,WACRC,gBAAiBC,EAAAA,oBACjBC,OAAQC,EAAAA,WACRC,YAAaC,EAAAA,gBACbC,YAAaC,EAAAA,gBACbC,SAAUC,EAAAA,aACVC,WAAYC,EAAAA,eACZC,gBAAiBC,EAAAA,oBACjBC,YAAaC,EAAAA,gBACbC,gBAAiBC,EAAAA,oBACjBC,iBAAkBC,EAAAA,qBAClBC,oBAAqBC,EAAAA,wBACrBC,gBAAiBC,EAAAA"}

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

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