@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.11

package/cjs/histogram-slider/histogram-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\n\nimport { Typography } from \"../typography\";\nimport {\n    Bar,\n    Histogram,\n    Label,\n    Separator,\n    Slider,\n} from \"./histogram-slider.styles\";\nimport type { HistogramSliderProps } from \"./types\";\n\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        return (\n            <>\n                <Histogram>\n                    {items.map((item, i) => {\n                        const ratio = item.count / maxCount;\n                        return (\n                            <Bar\n                                key={i}\n                                style={{\n                                    height: ratio\n                                        ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)`\n                                        : 0,\n                                }}\n                                $selected={\n                                    item.minValue >= selection[0] &&\n                                    item.minValue < selection[1]\n                                }\n                                $disabled={disabled || readOnly}\n                            />\n                        );\n                    })}\n                </Histogram>\n                <Slider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            {showRangeLabels && (\n                <Label>\n                    {renderRangeItem(selection[0])}\n                    <Separator>-</Separator>\n                    {renderRangeItem(selection[1])}\n                </Label>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n"],"names":["_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","item","count","maxCount","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","handleChange","val1","val2","newSelection","handleChangeEnd","renderRangeItem","_jsxs","Typography","BodyBL","children","Label","_jsx","Separator","every","_Fragment","Histogram","ratio","Bar","style","height","$selected","$disabled","Slider","step","minRange","numOfThumbs"],"mappings":"4MAYgCA,IAAA,IAAAC,KAC5BA,EAAO,GAAEC,SACTA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,gBACLA,EAAeC,iBACfA,EAAgBC,iBAChBA,EAAgBC,WAChBA,EAAUC,SACVA,EAAQC,YACRA,EAAWC,gBACXA,EAAeC,iBACfA,GAAgBb,EACbc,EAAUC,EAAAA,OAAAf,EAde,sLAmB5B,MAAMgB,EAASf,EAAKgB,KAAKC,GAASA,EAAKC,QACjCC,EAAWC,KAAKC,OAAON,GAEvBO,EAAStB,EAAKgB,KAAKC,GAASA,EAAKM,WACjCC,EAAWJ,KAAKC,OAAOC,GACvBC,EAAWH,KAAKK,OAAOH,IAEtBI,EAAWC,GAAgBC,EAAAA,SAC9BC,KAGEC,EAAQC,EAAAA,SAAQ,KAClB,MAAMC,EAAS,IAAIhC,GAAMiC,MAAK,CAACC,EAAGC,IAAMD,EAAEX,SAAWY,EAAEZ,WACjDa,GAAWZ,EAAWD,GAAYtB,EAAW,EAE7C6B,EAAuB,GAC7B,IAAK,IAAIO,EAAI,EAAGA,EAAID,EAASC,IAAK,CAC9B,MAAMC,EAAMN,EAAOO,MACdJ,GAAMA,EAAEZ,WAAaA,EAAWtB,EAAWoC,IAE5CC,EACAR,EAAMU,KAAKF,GAEXR,EAAMU,KAAK,CAAEtB,MAAO,EAAGK,SAAUA,EAAWtB,EAAWoC,GAE/D,CACA,OAAOP,CAAK,GACb,CAAC9B,EAAMC,IAKVwC,EAAAA,WAAU,KACFrC,IAAUsB,GACVC,EAAaE,IACjB,GACD,CAACzB,IAKJ,MAAMsC,EAAgBpB,IAClB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbpC,SAAAA,EAAWoC,EAAa,EAGtBC,EAAmBxB,IACrB,MAAOqB,EAAMC,GAAQtB,EACfuB,EAAiC,CAACF,EAAMC,GAC9CjB,EAAakB,GACbnC,SAAAA,EAAcmC,EAAa,EAM/B,SAAShB,IACL,OAAOzB,QAAAA,EAAS,CAACmB,EAAUA,EAAWtB,EAC1C,CAKA,MAAM8C,EAAmB3C,GACjBQ,EACOA,EAAiBR,GAGxB4C,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb7C,EACAF,EACAG,KA6Cb,OACIyC,EAAAA,4BAASnC,EAAU,CAAAsC,SAAA,CACd9C,GACG2C,EAAAA,KAACI,EAAAA,MAAK,CAAAD,SAAA,CACDJ,EAAgBrB,EAAU,IAC3B2B,EAAAA,IAACC,EAAAA,UAAS,CAAAH,SAAA,MACTJ,EAAgBrB,EAAU,OAGlCI,EAAMyB,OAAOtC,GAAwB,IAAfA,EAAKC,SAAgBP,EACtCA,IAhDNqC,EAAAA,KAAAQ,EAAAA,SAAA,CAAAL,SAAA,CACIE,EAAAA,IAACI,EAAAA,oBACI3B,EAAMd,KAAI,CAACC,EAAMoB,KACd,MAAMqB,EAAQzC,EAAKC,MAAQC,EAC3B,OACIkC,EAAAA,IAACM,MAAG,CAEAC,MAAO,CACHC,OAAQH,EACF,+BAA+BA,eAC/B,GACTI,UAEG7C,EAAKM,UAAYG,EAAU,IAC3BT,EAAKM,SAAWG,EAAU,GAAEqC,UAErB7D,GAAYC,GAVlBkC,EAWP,MAIdgB,EAAAA,IAACW,EAAAA,QACGvC,IAAKF,EACLF,IAAKG,EAAWvB,EAChBgE,KAAMhE,EACNiE,SAAUjE,EACVkE,YAAa,EACb/D,MAAOsB,EACPxB,SAAUA,EACVC,SAAUA,EACVK,WAAYA,EACZC,SAAUiC,EACVhC,YAAaoC,UAkBnB"}
+{"version":3,"file":"histogram-slider.js","sources":["../../../src/histogram-slider/histogram-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./histogram-slider.styles\";\nimport type { HistogramBinProps, HistogramSliderProps } from \"./types\";\n\nconst ANNOUNCEMENT_DEBOUNCE_MS = 500;\n\n// @catalog\n/**\n * A histogram with an overlaid two-thumb range slider for numeric filtering.\n *\n * Use `HistogramSlider` to let users narrow a dataset by selecting a numeric\n * range while seeing how values are distributed across bins.\n * @keywords chart, distribution, field, form, input, range, visualization\n */\nexport const HistogramSlider = ({\n    bins = [],\n    interval,\n    disabled,\n    readOnly,\n    value,\n    showRangeLabels,\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    ariaLabels,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onChangeEnd,\n    renderEmptyView,\n    renderRangeLabel,\n    className,\n    ...otherProps\n}: HistogramSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const counts = bins.map((item) => item.count);\n    const maxCount = Math.max(...counts);\n\n    const values = bins.map((item) => item.minValue);\n    const maxValue = Math.max(...values);\n    const minValue = Math.min(...values);\n\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const internalId = useId();\n    const announcementTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n        null\n    );\n    const rangeLabelId = `${internalId}-range-label`;\n    const sliderDescribedBy = concatIds(\n        ariaDescribedBy,\n        showRangeLabels ? rangeLabelId : undefined\n    );\n\n    const items = useMemo(() => {\n        const sorted = [...bins].sort((a, b) => a.minValue - b.minValue);\n        const numCols = (maxValue - minValue) / interval + 1;\n\n        const items: typeof sorted = [];\n        for (let i = 0; i < numCols; i++) {\n            const bin = sorted.find(\n                (b) => b.minValue === minValue + interval * i\n            );\n            if (bin) {\n                items.push(bin);\n            } else {\n                items.push({ count: 0, minValue: minValue + interval * i });\n            }\n        }\n        return items;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [bins, interval]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    useEffect(() => {\n        return () => {\n            clearPendingAnnouncement();\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChange?.(newSelection);\n    };\n\n    const handleChangeEnd = (values: number[]) => {\n        const [val1, val2] = values;\n        const newSelection: [number, number] = [val1, val2];\n        setSelection(newSelection);\n        scheduleRangePercentageAnnouncement(newSelection);\n        onChangeEnd?.(newSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    function clearPendingAnnouncement() {\n        if (announcementTimeoutRef.current) {\n            clearTimeout(announcementTimeoutRef.current);\n            announcementTimeoutRef.current = null;\n        }\n    }\n\n    function getRangePercentageDescription(currentSelection: [number, number]) {\n        const totalCount = items.reduce((sum, item) => sum + item.count, 0);\n\n        if (totalCount === 0) {\n            return \"0% of results available in the range you specified.\";\n        }\n\n        const selectedCount = items.reduce((sum, item) => {\n            const isSelected =\n                item.minValue >= currentSelection[0] &&\n                item.minValue < currentSelection[1];\n\n            return isSelected ? sum + item.count : sum;\n        }, 0);\n\n        const percentage = Math.round((selectedCount / totalCount) * 100);\n\n        return `${percentage}% of results available in the range you specified.`;\n    }\n\n    function scheduleRangePercentageAnnouncement(\n        currentSelection: [number, number]\n    ) {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const announcement = getRangePercentageDescription(currentSelection);\n\n        clearPendingAnnouncement();\n\n        announcementTimeoutRef.current = setTimeout(() => {\n            clearAnnouncer(\"polite\");\n            announce(announcement, \"polite\");\n        }, ANNOUNCEMENT_DEBOUNCE_MS);\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderRangeItem = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const renderHistogramSlider = () => {\n        const selectionDescription = getRangePercentageDescription(selection);\n\n        return (\n            <>\n                <div className={styles.histogram}>\n                    {items.map((item, i) => (\n                        <HistogramBar\n                            key={i}\n                            item={item}\n                            maxCount={maxCount}\n                            isSelected={\n                                item.minValue >= selection[0] &&\n                                item.minValue < selection[1]\n                            }\n                            isDisabled={disabled || readOnly}\n                        />\n                    ))}\n                </div>\n                <InputRangeSlider\n                    min={minValue}\n                    max={maxValue + interval}\n                    step={interval}\n                    minRange={interval}\n                    numOfThumbs={2}\n                    value={selection}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    ariaLabels={ariaLabels}\n                    ariaDescriptions={[\n                        selectionDescription,\n                        selectionDescription,\n                    ]}\n                    aria-describedby={sliderDescribedBy}\n                    aria-labelledby={ariaLabelledBy}\n                    onChange={handleChange}\n                    onChangeEnd={handleChangeEnd}\n                    className={styles.slider}\n                />\n            </>\n        );\n    };\n\n    return (\n        <div role=\"group\" {...otherProps} className={className}>\n            {showRangeLabels && (\n                <div id={rangeLabelId} className={styles.label}>\n                    {renderRangeItem(selection[0])}\n                    <div className={styles.separator}>-</div>\n                    {renderRangeItem(selection[1])}\n                </div>\n            )}\n            {items.every((item) => item.count === 0) && renderEmptyView\n                ? renderEmptyView()\n                : renderHistogramSlider()}\n        </div>\n    );\n};\n\n// =============================================================================\n// SUB COMPONENT\n// =============================================================================\ninterface HistogramBarProps {\n    item: HistogramBinProps;\n    maxCount: number;\n    isSelected: boolean;\n    isDisabled: boolean | undefined;\n}\n\nconst HistogramBar = ({\n    item,\n    maxCount,\n    isSelected,\n    isDisabled,\n}: HistogramBarProps) => {\n    const ratio = item.count / maxCount;\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        height: ratio ? `calc(calc(100% - 0.25rem) * ${ratio} + 0.25rem)` : \"0\",\n    });\n\n    return (\n        <div\n            data-testid=\"histogram-bar\"\n            className={clsx(\n                styles.bar,\n                isDisabled && isSelected && styles.barSelectedDisabled,\n                isDisabled && styles.barDisabled,\n                isSelected && styles.barSelected\n            )}\n            ref={barRef}\n        />\n    );\n};\n"],"names":["HistogramBar","item","maxCount","isSelected","isDisabled","ratio","count","barRef","useRef","useApplyStyle","height","_jsx","className","clsx","styles.bar","styles.barSelectedDisabled","styles.barDisabled","styles.barSelected","ref","_a","bins","interval","disabled","readOnly","value","showRangeLabels","rangeLabelPrefix","rangeLabelSuffix","ariaLabels","ariaLabelledBy","ariaDescribedBy","onChange","onChangeEnd","renderEmptyView","renderRangeLabel","otherProps","__rest","counts","map","Math","max","values","minValue","maxValue","min","selection","setSelection","useState","initSelection","internalId","useId","announcementTimeoutRef","rangeLabelId","sliderDescribedBy","concatIds","undefined","items","useMemo","sorted","sort","a","b","numCols","i","bin","find","push","useEffect","clearPendingAnnouncement","handleChange","val1","val2","newSelection","scheduleRangePercentageAnnouncement","handleChangeEnd","current","clearTimeout","getRangePercentageDescription","currentSelection","totalCount","reduce","sum","selectedCount","round","announcement","setTimeout","clearAnnouncer","announce","renderRangeItem","_jsxs","Typography","BodyBL","children","Object","assign","role","id","styles.label","styles.separator","every","selectionDescription","_Fragment","styles.histogram","InputRangeSlider","step","minRange","numOfThumbs","ariaDescriptions","styles.slider","renderHistogramSlider"],"mappings":"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"}

package/cjs/histogram-slider/histogram-slider.styles.js

@@ -1,25 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../input-range-slider/input-range-slider.js"),t=require("../v3_theme/index.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(e);const i=d.default.div`
-    display: flex;
-    margin-bottom: ${t.V3_Spacing["spacing-16"]};
-    align-items: baseline;
-`,a=d.default.div`
-    margin: 0 0.5rem;
-`,l=d.default.div`
-    width: 100%;
-    height: 4rem;
-    display: flex;
-    align-items: flex-end;
-    padding: 0 0.4375rem;
-`,o=d.default.div`
-    flex: 1;
-    border-radius: ${t.V3_Radius.sm} ${t.V3_Radius.sm} 0 0;
-    border: 0.5px solid transparent; // space between bars
-    background-clip: content-box;
-
-    ${r=>{let s=t.V3_Colour["bg-strongest"];return r.$disabled&&r.$selected?s=t.V3_Colour["bg-selected-stronger-disabled"]:r.$disabled?s=t.V3_Colour["bg-disabled"]:r.$selected&&(s=t.V3_Colour["bg-selected-stronger"]),e.css`
-            background-color: ${s};
-        `}}
-`,n=d.default(r.InputRangeSlider)`
-    margin-top: -0.3125rem;
-`;exports.Bar=o,exports.Histogram=l,exports.Label=i,exports.Separator=a,exports.Slider=n;
+"use strict";require("./histogram-slider.styles_wvd4w.css");exports.bar="b1koddre",exports.barDisabled="b1im7sez",exports.barSelected="b8ooyxk",exports.barSelectedDisabled="b9tfims",exports.histogram="hu29dsu",exports.label="l1qwb62w",exports.separator="s1f028jb",exports.slider="s1q1626e";
 //# sourceMappingURL=histogram-slider.styles.js.map

package/cjs/histogram-slider/histogram-slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { V3_Colour, V3_Radius, V3_Spacing } from \"../v3_theme\";\n\ninterface BarStyleProps {\n    $selected: boolean;\n    $disabled: boolean | undefined;\n}\n\nexport const Label = styled.div`\n    display: flex;\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n`;\n\nexport const Histogram = styled.div`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const Bar = styled.div<BarStyleProps>`\n    flex: 1;\n    border-radius: ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n\n    ${(props) => {\n        let color = V3_Colour[\"bg-strongest\"];\n        if (props.$disabled && props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger-disabled\"];\n        } else if (props.$disabled) {\n            color = V3_Colour[\"bg-disabled\"];\n        } else if (props.$selected) {\n            color = V3_Colour[\"bg-selected-stronger\"];\n        }\n        return css`\n            background-color: ${color};\n        `;\n    }}\n`;\n\nexport const Slider = styled(InputRangeSlider)`\n    margin-top: -0.3125rem;\n`;\n"],"names":["Label","styled","div","V3_Spacing","Separator","Histogram","Bar","V3_Radius","props","color","V3_Colour","$disabled","$selected","css","Slider","InputRangeSlider"],"mappings":"8NAUO,MAAMA,EAAQC,EAAAA,QAAOC,GAAG;;qBAEVC,EAAAA,WAAW;;EAInBC,EAAYH,EAAAA,QAAOC,GAAG;;EAItBG,EAAYJ,EAAAA,QAAOC,GAAG;;;;;;EAQtBI,EAAML,EAAAA,QAAOC,GAAkB;;qBAEvBK,EAAAA,UAAc,MAAKA,EAAAA,UAAc;;;;MAI/CC,IACC,IAAIC,EAAQC,EAAAA,UAAU,gBAQtB,OAPIF,EAAMG,WAAaH,EAAMI,UACzBH,EAAQC,EAAAA,UAAU,iCACXF,EAAMG,UACbF,EAAQC,EAAAA,UAAU,eACXF,EAAMI,YACbH,EAAQC,EAAAA,UAAU,yBAEfG,KAAG;gCACcJ;SACvB;EAIIK,EAASb,EAAAA,QAAOc,EAAAA,iBAAiB;;"}
+{"version":3,"file":"histogram-slider.styles.js","sources":["../../../src/histogram-slider/histogram-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius, Spacing } from \"../theme\";\n\nexport const label = css`\n    display: flex;\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n`;\n\nexport const histogram = css`\n    width: 100%;\n    height: 4rem;\n    display: flex;\n    align-items: flex-end;\n    padding: 0 0.4375rem;\n`;\n\nexport const bar = css`\n    flex: 1;\n    border-radius: ${Radius[\"sm\"]} ${Radius[\"sm\"]} 0 0;\n    border: 0.5px solid transparent; // space between bars\n    background-clip: content-box;\n    background-color: ${Colour[\"bg-strongest\"]};\n`;\n\nexport const barDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const barSelected = css`\n    background-color: ${Colour[\"bg-selected-stronger\"]};\n`;\n\nexport const barSelectedDisabled = css`\n    background-color: ${Colour[\"bg-selected-stronger-disabled\"]};\n`;\n\nexport const slider = css`\n    margin-top: -0.3125rem;\n`;\n"],"names":[],"mappings":"wGAsBgB,+BAQQ,+BAIA,sCAIQ,4BAxBV,wBAVJ,6BAMI,0BAgCH"}

package/cjs/histogram-slider/histogram-slider.styles_wvd4w.css

@@ -0,0 +1,8 @@
+@layer fds{.l1qwb62w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:var(--fds-spacing-16);-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s1f028jb{margin:0 0.5rem;}
+.hu29dsu{width:100%;height:4rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;padding:0 0.4375rem;}
+.b1koddre{-webkit-flex:1;-ms-flex:1;flex:1;border-radius:var(--fds-radius-sm) var(--fds-radius-sm) 0 0;border:0.5px solid transparent;-webkit-background-clip:content-box;background-clip:content-box;background-color:var(--fds-colour-bg-strongest);}
+.b1im7sez{background-color:var(--fds-colour-bg-disabled);}
+.b8ooyxk{background-color:var(--fds-colour-bg-selected-stronger);}
+.b9tfims{background-color:var(--fds-colour-bg-selected-stronger-disabled);}
+.s1q1626e{margin-top:-0.3125rem;}}

package/cjs/image-button/image-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),a=require("./image-button.style.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=l(i).default.forwardRef(((i,l)=>{var{children:s,imgSrc:c,selected:d,error:n,type:u="button",disabled:o=!1,focusableWhenDisabled:b=!1,onClick:f}=i,h=e.__rest(i,["children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);return r.jsxs(a.Main,Object.assign({ref:l,$disabled:o,$selected:d,$error:n,type:u,"aria-disabled":o,disabled:o&&!b,onClick:o?void 0:f},h,{children:[r.jsx(t.ImageWithFallback,{src:c}),s]}))}));exports.ImageButton=s;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),i=require("react"),t=require("../shared/image-with-fallback/image-with-fallback.js"),s=require("./image-button.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(r);const n=l(i).default.forwardRef(((r,i)=>{var{children:l,className:n,imgSrc:d,selected:u,error:o,type:b="button",disabled:m=!1,focusableWhenDisabled:f=!1,onClick:h}=r,g=e.__rest(r,["children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick"]);const j=!!m&&!f;return a.jsxs("button",Object.assign({ref:i,type:b,"aria-disabled":m,disabled:j,onClick:m?void 0:h,className:c.default(s.main,u&&s.mainSelectedText,u&&s.mainSelected,o&&s.mainError,m&&s.mainDisabled,n)},g,{children:[a.jsx(t.ImageWithFallback,{src:d}),l]}))}));exports.ImageButton=n;
 //# sourceMappingURL=image-button.js.map

package/cjs/image-button/image-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-button.js","sources":["../../../src/image-button/image-button.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Main } from \"./image-button.style\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    return (\n        <Main\n            ref={ref}\n            $disabled={disabled}\n            $selected={selected}\n            $error={error}\n            type={type}\n            aria-disabled={disabled}\n            disabled={disabled && !focusableWhenDisabled}\n            onClick={disabled ? undefined : onClick}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </Main>\n    );\n};\n\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","_jsxs","Main","Object","assign","$disabled","$selected","$error","undefined","_jsx","ImageWithFallback","src"],"mappings":"qRAOA,MAgCaA,OAAcC,QAAMC,YAhCf,CACdC,EAWAC,SAXAC,SACIA,EAAQC,OACRA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOT,EACJU,EAAUC,EAAAA,OAAAX,EATjB,CAAA,WAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAaA,OACIY,EAAAA,KAACC,EAAAA,KAAIC,OAAAC,OAAA,CACDd,IAAKA,EAAGe,UACGT,EAAQU,UACRb,EAAQc,OACXb,EACRC,KAAMA,EAAI,gBACKC,EACfA,SAAUA,IAAaC,EACvBC,QAASF,OAAWY,EAAYV,GAC5BC,aAEJU,EAAAA,IAACC,EAAAA,kBAAiB,CAACC,IAAKnB,IACvBD,KACE"}
+{"version":3,"file":"image-button.js","sources":["../../../src/image-button/image-button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { ButtonRef } from \"../button/types\";\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./image-button.styles\";\nimport type { ImageButtonProps } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        imgSrc,\n        selected,\n        error,\n        type = \"button\",\n        disabled = false,\n        focusableWhenDisabled = false,\n        onClick,\n        ...otherProps\n    }: ImageButtonProps,\n    ref: ButtonRef\n) => {\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    return (\n        <button\n            ref={ref}\n            type={type}\n            aria-disabled={disabled}\n            disabled={isNativeDisabled}\n            onClick={disabled ? undefined : onClick}\n            className={clsx(\n                styles.main,\n                selected && styles.mainSelectedText,\n                selected && styles.mainSelected,\n                error && styles.mainError,\n                disabled && styles.mainDisabled,\n                className\n            )}\n            {...otherProps}\n        >\n            <ImageWithFallback src={imgSrc} />\n            {children}\n        </button>\n    );\n};\n\n// @catalog\n/**\n * A button that displays an image alongside optional label content.\n *\n * Use `ImageButton` for selectable image-based choices such as theme pickers or avatar\n * selectors, where each option is represented visually.\n * @keywords thumbnail, selection\n */\nexport const ImageButton = React.forwardRef(Component);\n"],"names":["ImageButton","React","forwardRef","_a","ref","children","className","imgSrc","selected","error","type","disabled","focusableWhenDisabled","onClick","otherProps","__rest","isNativeDisabled","_jsxs","Object","assign","undefined","clsx","styles.main","styles.mainSelectedText","styles.mainSelected","styles.mainError","styles.mainDisabled","_jsx","ImageWithFallback","src"],"mappings":"mTAQA,MAgDaA,OAAcC,QAAMC,YAhDf,CACdC,EAYAC,KAZA,IAAAC,SACIA,EAAQC,UACRA,EAASC,OACTA,EAAMC,SACNA,EAAQC,MACRA,EAAKC,KACLA,EAAO,SAAQC,SACfA,GAAW,EAAKC,sBAChBA,GAAwB,EAAKC,QAC7BA,GAAOV,EACJW,EAAUC,EAAAA,OAAAZ,EAVjB,CAAA,WAAA,YAAA,SAAA,WAAA,QAAA,OAAA,WAAA,wBAAA,YAcA,MAAMa,IAAqBL,IAAaC,EAExC,OACIK,EAAAA,KAAA,SAAAC,OAAAC,OAAA,CACIf,IAAKA,EACLM,KAAMA,EAAI,gBACKC,EACfA,SAAUK,EACVH,QAASF,OAAWS,EAAYP,EAChCP,UAAWe,EAAAA,QACPC,EAAAA,KACAd,GAAYe,mBACZf,GAAYgB,EAAAA,aACZf,GAASgB,EAAAA,UACTd,GAAYe,EAAAA,aACZpB,IAEAQ,EAAU,CAAAT,SAAA,CAEdsB,MAACC,EAAAA,kBAAiB,CAACC,IAAKtB,IACvBF,KACI"}

package/cjs/image-button/image-button.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./image-button.styles_6n1qsr.css");exports.main="mqb1plh",exports.mainDisabled="m1hsk0n5",exports.mainError="mz6wr40",exports.mainSelected="mroo32y",exports.mainSelectedText="mpjl8bn";
+//# sourceMappingURL=image-button.styles.js.map

package/cjs/image-button/image-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-button.styles.js","sources":["../../../src/image-button/image-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, MediaQuery, Motion, Radius } from \"../theme\";\n\nexport const main = css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    justify-content: center;\n    align-items: center;\n    padding: 1.5rem 1rem;\n    background-color: ${Colour.bg};\n    border: ${Border[\"width-010\"]} ${Border.solid} transparent;\n    border-radius: ${Radius[\"md\"]};\n    cursor: pointer;\n    max-width: 13rem;\n    transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    overflow-wrap: anywhere;\n\n    img {\n        min-width: 3.5rem;\n        width: 3.5rem;\n        height: 3.5rem;\n        object-fit: contain;\n    }\n\n    &:hover {\n        border-color: ${Colour[\"border-hover-strong\"]};\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        padding: 0.5rem 0.25rem;\n        gap: 0.25rem;\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const mainSelectedText = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const mainSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n    border-color: ${Colour[\"border-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-selected-hover\"]};\n        border-color: ${Colour[\"border-selected-hover\"]};\n    }\n`;\n\nexport const mainError = css`\n    background: ${Colour.bg};\n    border-color: ${Colour[\"border-error\"]};\n\n    &:hover {\n        background: ${Colour.bg};\n        border-color: ${Colour[\"border-error\"]};\n    }\n`;\n\nexport const mainDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n\n    img {\n        filter: grayscale(100%);\n    }\n\n    &:hover {\n        border-color: transparent;\n    }\n`;\n"],"names":[],"mappings":"kGAIiB,+BA4DQ,6BAVH,+BAVG,mCAJI"}

package/cjs/image-button/image-button.styles_6n1qsr.css

@@ -0,0 +1,5 @@
+@layer fds{.mqb1plh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.5rem 1rem;background-color:var(--fds-colour-bg);border:var(--fds-border-width-010) var(--fds-border-style-solid) transparent;border-radius:var(--fds-radius-md);cursor:pointer;max-width:13rem;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-default);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);overflow-wrap:anywhere;}.mqb1plh img{min-width:3.5rem;width:3.5rem;height:3.5rem;object-fit:contain;}.mqb1plh:hover{border-color:var(--fds-colour-border-hover-strong);}:where(body.fds-breakpoint-sm-max) .mqb1plh{padding:0.5rem 0.25rem;gap:0.25rem;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.mpjl8bn{color:var(--fds-colour-text-primary);}
+.mroo32y{background:var(--fds-colour-bg-selected);border-color:var(--fds-colour-border-selected);}.mroo32y:hover{background:var(--fds-colour-bg-selected-hover);border-color:var(--fds-colour-border-selected-hover);}
+.mz6wr40{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}.mz6wr40:hover{background:var(--fds-colour-bg);border-color:var(--fds-colour-border-error);}
+.m1hsk0n5{color:var(--fds-colour-text-disabled);cursor:not-allowed;}.m1hsk0n5 img{-webkit-filter:grayscale(100%);filter:grayscale(100%);}.m1hsk0n5:hover{border-color:transparent;}}

package/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),o=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),i=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),p=require("./badge/badge.js"),a=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),x=require("./button-with-icon/button-with-icon.js"),d=require("./calendar/calendar.js"),m=require("./card/card.js"),g=require("./checkbox/checkbox.js"),h=require("./countdown-timer/countdown-timer.js"),c=require("./dashed-border/dashed-border.js"),T=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),q=require("./date-navigator/date-navigator.js"),V=require("./date-range-input/date-range-input.js"),S=require("./divider/divider.js"),b=require("./drawer/drawer.js"),_=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),k=require("./error-display/helper.js"),y=require("./example/example.js"),B=require("./feedback-rating/feedback-rating.js"),I=require("./file-download/file-download.js"),C=require("./file-upload/file-upload.js"),M=require("./filter/filter.js"),P=require("./footer/footer.js"),D=require("./form/index.js"),f=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),w=require("./histogram-slider/histogram-slider.js"),L=require("./icon-button/icon-button.js"),R=require("./image-button/image-button.js"),F=require("./input/input.js"),W=require("./input-group/input-group.js"),N=require("./input-multi-select/input-multi-select.js"),O=require("./input-nested-multi-select/input-nested-multi-select.js"),A=require("./input-nested-select/input-nested-select.js"),G=require("./input-range-select/input-range-select.js"),E=require("./input-range-slider/input-range-slider.js"),H=require("./input-select/input-select.js"),Q=require("./input-slider/input-slider.js"),U=require("./input-textarea/textarea.js"),K=require("./layout/index.js"),z=require("./link-list/link-list.js"),J=require("./markup/markup.js"),X=require("./masked-input/masked-input.js"),Y=require("./masonry/masonry.js"),Z=require("./masthead/masthead.js"),$=require("./menu/menu.js"),ee=require("./modal/index.js"),re=require("./modal-v2/index.js"),te=require("./navbar/navbar.js"),oe=require("./notification-banner/notification-banner.js"),ie=require("./notification-banner/notification-banner-hoc.js"),se=require("./otp-input/otp-input.js"),ne=require("./overlay/overlay.js"),pe=require("./pagination/pagination.js"),ae=require("./phone-number-input/phone-number-input.js"),ue=require("./pill/pill.js"),le=require("./popover/popover.js"),xe=require("./popover/popover-hoc.js"),de=require("./popover-v2/popover.js"),me=require("./popover-v2/popover-inline/popover-inline.js"),ge=require("./popover-v2/popover-trigger.js"),he=require("./predictive-text-input/predictive-text-input.js"),ce=require("./progress-indicator/progress-indicator.js"),Te=require("./radio-button/radio-button.js"),je=require("./select-histogram/select-histogram.js"),qe=require("./sidenav/sidenav.js"),Ve=require("./singpass-button/singpass-button.js"),Se=require("./smart-app-banner/smart-app-banner.js"),be=require("./tab/tab.js"),_e=require("./table/table.js"),ve=require("./tag/tag.js"),ke=require("./text-list/index.js"),ye=require("./theme/theme-provider/index.js"),Be=require("./theme/theme-provider/hooks.js"),Ie=require("./theme/tokens/border.js"),Ce=require("./theme/tokens/breakpoint.js"),Me=require("./theme/tokens/colour.js"),Pe=require("./theme/tokens/component.js"),De=require("./theme/tokens/font.js"),fe=require("./theme/tokens/media-query.js"),we=require("./theme/tokens/motion.js"),Le=require("./theme/tokens/radius.js"),Re=require("./theme/tokens/shadow.js"),Fe=require("./theme/tokens/spacing.js"),We=require("./theme/utils/css-variable.js"),Ne=require("./theme/utils/font.js"),Oe=require("./theme/utils/token-resolver.js"),Ae=require("./theme/utils/use-apply-styles.js"),Ge=require("./theme/utils/use-design-token.js"),Ee=require("./time-range-picker/time-range-picker.js"),He=require("./time-slot-bar/time-slot-bar.js"),Qe=require("./time-slot-bar-week/time-slot-bar-week.js"),Ue=require("./time-slot-week-view/time-slot-week-view.js"),Ke=require("./timeline/timeline.js"),ze=require("./timepicker/timepicker.js"),Je=require("./timetable/timetable.js"),Xe=require("./toast/toast.js"),Ye=require("./toggle/toggle.js"),Ze=require("./tooltip/tooltip.js"),$e=require("./tooltip/tooltip-hoc.js"),er=require("./typography/index.js"),rr=require("./uneditable-section/index.js"),tr=require("./unit-number/unit-number-input.js"),or=require("./v2_color/color.js"),ir=require("./v2_design-token/design-token.js"),sr=require("./v2_layout/index.js"),nr=require("./v2_media/media.js"),pr=require("./v2_text/helper.js"),ar=require("./v2_text/text.js"),ur=require("./v2_text/text-style.js"),lr=require("./v2_text/types.js"),xr=require("./v2_text-list/index.js"),dr=require("./v2_theme/index.js"),mr=require("./v2_transition/index.js"),gr=require("./v3_theme/index.js"),hr=require("./v2_theme/types.js"),cr=require("./v3_theme/ds-theme-provider.js"),Tr=require("./v3_theme/use-theme-mode.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=o.LoadingDotsSpinner,exports.LoadingSpinner=i.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=p.Badge,exports.BoxContainer=a.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.ButtonWithIcon=x.ButtonWithIcon,exports.Calendar=d.Calendar,exports.Card=m.Card,exports.Checkbox=g.Checkbox,exports.CountdownTimer=h.CountdownTimer,exports.DashedBorder=c.DashedBorder,exports.DataTable=T.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=q.DateNavigator,exports.DateRangeInput=V.DateRangeInput,exports.Divider=S.Divider,exports.Drawer=b.Drawer,exports.ESignature=_.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=k.ErrorDisplayHelper,exports.Example=y.Example,exports.FeedbackRating=B.FeedbackRating,exports.FileDownload=I.FileDownload,exports.FileUpload=C.FileUpload,exports.Filter=M.Filter,exports.Footer=P.Footer,exports.Form=D.Form,exports.FullscreenImageCarousel=f.FullscreenImageCarousel,exports.HistogramSlider=w.HistogramSlider,exports.IconButton=L.IconButton,exports.ImageButton=R.ImageButton,exports.Input=F.Input,exports.InputGroup=W.InputGroup,exports.InputMultiSelect=N.InputMultiSelect,exports.InputNestedMultiSelect=O.InputNestedMultiSelect,exports.InputNestedSelect=A.InputNestedSelect,exports.InputRangeSelect=G.InputRangeSelect,exports.InputRangeSlider=E.InputRangeSlider,exports.InputSelect=H.InputSelect,exports.InputSlider=Q.InputSlider,exports.Textarea=U.Textarea,exports.Layout=K.Layout,exports.LinkList=z.LinkList,exports.Markup=J.Markup,exports.MaskedInput=X.MaskedInput,exports.Masonry=Y.Masonry,exports.Masthead=Z.Masthead,exports.Menu=$.Menu,exports.MenuTrigger=$.MenuTrigger,exports.Modal=ee.Modal,exports.ModalV2=re.ModalV2,exports.Navbar=te.Navbar,exports.NBComponent=oe.NBComponent,exports.NotificationBanner=oe.NotificationBanner,exports.withNotificationBanner=ie.withNotificationBanner,exports.OtpInput=se.OtpInput,exports.Overlay=ne.Overlay,exports.Pagination=pe.Pagination,exports.PhoneNumberInput=ae.PhoneNumberInput,exports.Pill=ue.Pill,exports.Popover=le.Popover,exports.withPopover=xe.withPopover,exports.PopoverV2=de.PopoverV2,exports.PopoverInline=me.PopoverInline,exports.PopoverTrigger=ge.PopoverTrigger,exports.PredictiveTextInput=he.PredictiveTextInput,exports.ProgressIndicator=ce.ProgressIndicator,exports.RadioButton=Te.RadioButton,exports.SelectHistogram=je.SelectHistogram,exports.Sidenav=qe.Sidenav,exports.SingpassButton=Ve.SingpassButton,exports.SmartAppBanner=Se.SmartAppBanner,exports.Tab=be.Tab,exports.Table=_e.Table,exports.Tag=ve.Tag,exports.TextList=ke.TextList,exports.ThemeProvider=ye.ThemeProvider,exports.useInheritedThemeScope=Be.useInheritedThemeScope,exports.useTheme=Be.useTheme,exports.Border=Ie.Border,exports.BorderStyle=Ie.BorderStyle,exports.BorderThickness=Ie.BorderThickness,exports.Breakpoint=Ce.Breakpoint,exports.Colour=Me.Colour,exports.PrimitiveColours=Me.PrimitiveColours,exports.SemanticColours=Me.SemanticColours,exports.ComponentToken=Pe.ComponentToken,exports.Font=De.Font,exports.FontSpec=De.FontSpec,exports.MediaQuery=fe.MediaQuery,exports.Motion=we.Motion,exports.Radius=Le.Radius,exports.Shadow=Re.Shadow,exports.Spacing=Fe.Spacing,exports.getInheritedInlineCssVariables=We.getInheritedInlineCssVariables,exports.parseCSSVariableValue=We.parseCSSVariableValue,exports.parsePxOrRemValue=We.parsePxOrRemValue,exports.generateFont=Ne.generateFont,exports.getEffectiveTokenOrCustom=Oe.getEffectiveTokenOrCustom,exports.getResolvedValue=Oe.getResolvedValue,exports.getTokenOrDefault=Oe.getTokenOrDefault,exports.isTokenFromSet=Oe.isTokenFromSet,exports.isTokenWithPrefix=Oe.isTokenWithPrefix,exports.toCssValue=Oe.toCssValue,exports.useApplyStyle=Ae.useApplyStyle,exports.useDesignToken=Ge.useDesignToken,exports.useResolvedTokenValue=Ge.useResolvedTokenValue,exports.TimeRangePicker=Ee.TimeRangePicker,exports.TimeSlotBar=He.TimeSlotBar,exports.TimeSlotBarWeek=Qe.TimeSlotBarWeek,exports.TimeSlotWeekView=Ue.TimeSlotWeekView,exports.Timeline=Ke.Timeline,exports.Timepicker=ze.Timepicker,exports.TimeTable=Je.TimeTable,exports.Toast=Xe.Toast,exports.Toggle=Ye.Toggle,exports.Tooltip=Ze.Tooltip,exports.withTooltip=$e.withTooltip,exports.Typography=er.Typography,exports.UneditableSection=rr.UneditableSection,exports.UnitNumberInput=tr.UnitNumberInput,exports.V2_Color=or.V2_Color,exports.V2_DesignToken=ir.V2_DesignToken,exports.V2_Layout=sr.V2_Layout,exports.V2_MediaQuery=nr.V2_MediaQuery,exports.V2_MediaWidths=nr.V2_MediaWidths,exports.V2_TextStyleHelper=pr.V2_TextStyleHelper,Object.defineProperty(exports,"V2_Text",{enumerable:!0,get:function(){return ar.V2_Text}}),exports.V2_TextStyle=ur.V2_TextStyle,Object.defineProperty(exports,"RedirectScope",{enumerable:!0,get:function(){return lr.RedirectScope}}),exports.V2_TextList=xr.V2_TextList,exports.V2_BaseTheme=dr.V2_BaseTheme,exports.V2_BookingSGTheme=dr.V2_BookingSGTheme,exports.V2_CCubeTheme=dr.V2_CCubeTheme,exports.V2_MyLegacyTheme=dr.V2_MyLegacyTheme,exports.V2_OneServiceTheme=dr.V2_OneServiceTheme,exports.V2_RBSTheme=dr.V2_RBSTheme,exports.V2_Transition=mr.V2_Transition,exports.V3_A11yPlaygroundTheme=gr.V3_A11yPlaygroundTheme,exports.V3_BookingSGTheme=gr.V3_BookingSGTheme,exports.V3_Border=gr.V3_Border,exports.V3_Breakpoint=gr.V3_Breakpoint,exports.V3_CCubeTheme=gr.V3_CCubeTheme,exports.V3_Colour=gr.V3_Colour,exports.V3_Font=gr.V3_Font,exports.V3_IMDATheme=gr.V3_IMDATheme,exports.V3_LifeSGTheme=gr.V3_LifeSGTheme,exports.V3_MediaQuery=gr.V3_MediaQuery,exports.V3_Motion=gr.V3_Motion,exports.V3_MyLegacyTheme=gr.V3_MyLegacyTheme,exports.V3_OneServiceTheme=gr.V3_OneServiceTheme,exports.V3_PATheme=gr.V3_PATheme,exports.V3_RBSTheme=gr.V3_RBSTheme,exports.V3_Radius=gr.V3_Radius,exports.V3_SGWDigitalLobbyTheme=gr.V3_SGWDigitalLobbyTheme,exports.V3_SGWDigitalLobbyThemeBase=gr.V3_SGWDigitalLobbyThemeBase,exports.V3_SPFTheme=gr.V3_SPFTheme,exports.V3_Shadow=gr.V3_Shadow,exports.V3_Spacing=gr.V3_Spacing,exports.V3_SupportGoWhereTheme=gr.V3_SupportGoWhereTheme,exports.V3_SupportGoWhereThemeBase=gr.V3_SupportGoWhereThemeBase,Object.defineProperty(exports,"V2_ThemeContextKeys",{enumerable:!0,get:function(){return hr.V2_ThemeContextKeys}}),exports.V3_DSThemeProvider=cr.V3_DSThemeProvider,exports.createThemeWithColourMode=Tr.createThemeWithColourMode,exports.getSystemColourMode=Tr.getSystemColourMode,exports.useDSTheme=Tr.useDSTheme;
+"use strict";var e=require("./accordion/accordion.js"),r=require("./alert/alert.js"),t=require("./animations/loading-dots/loading-dots.js"),i=require("./animations/loading-dots-spinner/loading-dots-spinner.js"),o=require("./animations/loading-spinner/loading-spinner.js"),s=require("./animations/themed-loading-spinner/themed-loading-spinner.js"),n=require("./avatar/avatar.js"),a=require("./badge/badge.js"),p=require("./box-container/box-container.js"),u=require("./breadcrumb/breadcrumb.js"),l=require("./button/button.js"),d=require("./calendar/calendar.js"),x=require("./card/card.js"),m=require("./checkbox/checkbox.js"),g=require("./countdown-timer/countdown-timer.js"),c=require("./dashed-border/dashed-border.js"),q=require("./data-table/data-table.js"),j=require("./date-input/date-input.js"),b=require("./date-navigator/date-navigator.js"),h=require("./date-range-input/date-range-input.js"),T=require("./divider/divider.js"),k=require("./drawer/drawer.js"),S=require("./e-signature/e-signature.js"),v=require("./error-display/error-display.js"),I=require("./error-display/helper.js"),y=require("./feedback-rating/feedback-rating.js"),B=require("./file-download/file-download.js"),M=require("./file-upload/file-upload.js"),w=require("./filter/filter.js"),D=require("./footer/footer.js"),P=require("./form/index.js"),f=require("./fullscreen-image-carousel/fullscreen-image-carousel.js"),C=require("./histogram-slider/histogram-slider.js"),F=require("./image-button/image-button.js"),L=require("./input/input.js"),N=require("./input-group/input-group.js"),R=require("./input-multi-select/input-multi-select.js"),E=require("./input-nested-multi-select/input-nested-multi-select.js"),A=require("./input-nested-select/input-nested-select.js"),H=require("./input-range-select/input-range-select.js"),Q=require("./input-range-slider/input-range-slider.js"),U=require("./input-select/input-select.js"),V=require("./input-slider/input-slider.js"),W=require("./input-textarea/textarea.js"),O=require("./language-switcher/language-switcher.js"),G=require("./layout/index.js"),Y=require("./link-list/link-list.js"),_=require("./markup/markup.js"),z=require("./masked-input/masked-input.js"),J=require("./masthead/masthead.js"),K=require("./menu/menu.js"),X=require("./modal/index.js"),Z=require("./modal-v2/modal-v2.js"),$=require("./navbar/navbar.js"),ee=require("./notification-banner/notification-banner.js"),re=require("./notification-banner/notification-banner-hoc.js"),te=require("./otp-input/otp-input.js"),ie=require("./overlay/overlay.js"),oe=require("./pagination/pagination.js"),se=require("./phone-number-input/phone-number-input.js"),ne=require("./pill/pill.js"),ae=require("./popover/popover.js"),pe=require("./popover/popover-inline/popover-inline.js"),ue=require("./popover/popover-trigger.js"),le=require("./predictive-text-input/predictive-text-input.js"),de=require("./progress-indicator/progress-indicator.js"),xe=require("./radio-button/radio-button.js"),me=require("./select-histogram/select-histogram.js"),ge=require("./sidenav/sidenav.js"),ce=require("./singpass-button/singpass-button.js"),qe=require("./smart-app-banner/smart-app-banner.js"),je=require("./tab/tab.js"),be=require("./table/table.js"),he=require("./tag/tag.js"),Te=require("./text-list/index.js"),ke=require("./theme/theme-provider/index.js"),Se=require("./theme/theme-provider/hooks.js"),ve=require("./theme/tokens/border.js"),Ie=require("./theme/tokens/breakpoint.js"),ye=require("./theme/tokens/colour.js"),Be=require("./theme/tokens/component.js"),Me=require("./theme/tokens/font.js"),we=require("./theme/tokens/media-query.js"),De=require("./theme/tokens/motion.js"),Pe=require("./theme/tokens/radius.js"),fe=require("./theme/tokens/shadow.js"),Ce=require("./theme/tokens/spacing.js"),Fe=require("./theme/types.js"),Le=require("./theme/utils/css-variable.js"),Ne=require("./theme/utils/use-apply-styles.js"),Re=require("./theme/utils/use-design-token.js"),Ee=require("./theme/utils/use-media-query.js"),Ae=require("./time-range-picker/time-range-picker.js"),He=require("./time-slot-bar/time-slot-bar.js"),Qe=require("./time-slot-bar-week/time-slot-bar-week.js"),Ue=require("./time-slot-week-view/time-slot-week-view.js"),Ve=require("./timeline/timeline.js"),We=require("./timepicker/timepicker.js"),Oe=require("./timetable/timetable.js"),Ge=require("./toast/toast.js"),Ye=require("./toggle/toggle.js"),_e=require("./typography/index.js"),ze=require("./uneditable-section/index.js"),Je=require("./unit-number/unit-number-input.js");exports.Accordion=e.Accordion,exports.Alert=r.Alert,exports.LoadingDots=t.LoadingDots,exports.LoadingDotsSpinner=i.LoadingDotsSpinner,exports.LoadingSpinner=o.LoadingSpinner,exports.ThemedLoadingSpinner=s.ThemedLoadingSpinner,exports.Avatar=n.Avatar,exports.Badge=a.Badge,exports.BoxContainer=p.BoxContainer,exports.Breadcrumb=u.Breadcrumb,exports.Button=l.Button,exports.Calendar=d.Calendar,exports.Card=x.Card,exports.Checkbox=m.Checkbox,exports.CountdownTimer=g.CountdownTimer,exports.DashedBorder=c.DashedBorder,exports.DataTable=q.DataTable,exports.DateInput=j.DateInput,exports.DateNavigator=b.DateNavigator,exports.DateRangeInput=h.DateRangeInput,exports.Divider=T.Divider,exports.Drawer=k.Drawer,exports.ESignature=S.ESignature,exports.ErrorDisplay=v.ErrorDisplay,exports.ErrorDisplayHelper=I.ErrorDisplayHelper,exports.FeedbackRating=y.FeedbackRating,exports.FileDownload=B.FileDownload,exports.FileUpload=M.FileUpload,exports.Filter=w.Filter,exports.Footer=D.Footer,exports.Form=P.Form,exports.Component=f.Component,exports.FullscreenImageCarousel=f.FullscreenImageCarousel,exports.HistogramSlider=C.HistogramSlider,exports.ImageButton=F.ImageButton,exports.Input=L.Input,exports.InputGroup=N.InputGroup,exports.InputMultiSelect=R.InputMultiSelect,exports.InputNestedMultiSelect=E.InputNestedMultiSelect,exports.InputNestedSelect=A.InputNestedSelect,exports.InputRangeSelect=H.InputRangeSelect,exports.InputRangeSlider=Q.InputRangeSlider,exports.InputSelect=U.InputSelect,exports.InputSlider=V.InputSlider,exports.Textarea=W.Textarea,exports.LanguageSwitcher=O.LanguageSwitcher,exports.Layout=G.Layout,exports.LinkList=Y.LinkList,exports.Markup=_.Markup,exports.MaskedInput=z.MaskedInput,exports.Masthead=J.Masthead,exports.Menu=K.Menu,exports.MenuTrigger=K.MenuTrigger,exports.Modal=X.Modal,exports.ModalV2=Z.ModalV2,exports.Navbar=$.Navbar,exports.NBComponent=ee.NBComponent,exports.NotificationBanner=ee.NotificationBanner,exports.withNotificationBanner=re.withNotificationBanner,exports.OtpInput=te.OtpInput,exports.Overlay=ie.Overlay,exports.Pagination=oe.Pagination,exports.PhoneNumberInput=se.PhoneNumberInput,exports.Pill=ne.Pill,exports.Popover=ae.Popover,exports.PopoverInline=pe.PopoverInline,exports.PopoverTrigger=ue.PopoverTrigger,exports.PredictiveTextInput=le.PredictiveTextInput,exports.ProgressIndicator=de.ProgressIndicator,exports.RadioButton=xe.RadioButton,exports.SelectHistogram=me.SelectHistogram,exports.Sidenav=ge.Sidenav,exports.SingpassButton=ce.SingpassButton,exports.SmartAppBanner=qe.SmartAppBanner,exports.Tab=je.Tab,exports.Table=be.Table,exports.Tag=he.Tag,exports.TextList=Te.TextList,exports.ThemeProvider=ke.ThemeProvider,exports.useInheritedThemeScope=Se.useInheritedThemeScope,exports.useTheme=Se.useTheme,exports.Border=ve.Border,exports.BorderStyle=ve.BorderStyle,exports.BorderThickness=ve.BorderThickness,exports.Breakpoint=Ie.Breakpoint,exports.Colour=ye.Colour,exports.PrimitiveColours=ye.PrimitiveColours,exports.SemanticColours=ye.SemanticColours,exports.ComponentToken=Be.ComponentToken,exports.Font=Me.Font,exports.FontSpec=Me.FontSpec,exports.MediaQuery=we.MediaQuery,exports.Motion=De.Motion,exports.Radius=Pe.Radius,exports.Shadow=fe.Shadow,exports.Spacing=Ce.Spacing,exports.THEME_TYPES=Fe.THEME_TYPES,exports.formatUnitValue=Le.formatUnitValue,exports.parsePxOrRemValue=Le.parsePxOrRemValue,exports.useApplyStyle=Ne.useApplyStyle,exports.useDesignToken=Re.useDesignToken,exports.useMaxWidthMediaQuery=Ee.useMaxWidthMediaQuery,exports.useMediaQuery=Ee.useMediaQuery,exports.useMinWidthMediaQuery=Ee.useMinWidthMediaQuery,exports.useResolvedBreakpointToken=Ee.useResolvedBreakpointToken,exports.TimeRangePicker=Ae.TimeRangePicker,exports.TimeSlotBar=He.TimeSlotBar,exports.TimeSlotBarWeek=Qe.TimeSlotBarWeek,exports.TimeSlotWeekView=Ue.TimeSlotWeekView,exports.Timeline=Ve.Timeline,exports.Timepicker=We.Timepicker,exports.TimeTable=Oe.TimeTable,exports.Toast=Ge.Toast,exports.Toggle=Ye.Toggle,exports.Typography=_e.Typography,exports.UneditableSection=ze.UneditableSection,exports.UnitNumberInput=Je.UnitNumberInput;
 //# sourceMappingURL=index.js.map

package/cjs/input/input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/string-helper.js"),l=require("../util/use-next-input-state.js"),n=require("./input.style.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const i=s(a).default.forwardRef(((s,i)=>{var{value:u,spacing:o,type:d,error:c,disabled:p,readOnly:y,onChange:j,onClear:f,allowClear:h=!1,className:g,styleType:m="bordered"}=s,x=e.__rest(s,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const C=((e,r)=>"tel"===e&&!!r)(d,o),b=a.useRef(null);a.useImperativeHandle(i,(()=>b.current),[]);const v=l.useNextInputState({ref:b,formatter:e=>C?t.StringHelper.transformWithSpaces(e,o):e}),q=e=>{j&&(C?N(e):j(e))},$=()=>{f&&f(),b&&b.current&&b.current.focus()},N=e=>{const r=v();if(!r)return;const{nextValue:a,updateCaretPosition:t}=r,l=a.replace(/\s/g,"");e.target.value=l,null==j||j(e),t()},O=u?(e=>e?C?t.StringHelper.transformWithSpaces(e,o):e:"")(u):u,I=h&&!p&&!y&&!!u,S=()=>r.jsxs(r.Fragment,{children:[r.jsx(n.InputElement,Object.assign({"data-testid":"input",ref:b,"aria-disabled":p,value:O,onChange:q,type:d,readOnly:y||p,$showClear:I,$styleType:m,$visuallyReadOnly:y},x)),I&&r.jsx(n.ClearButton,{onClick:$,type:"button","aria-label":"Clear input",$styleType:m,children:r.jsx(n.ClearIcon,{"aria-hidden":!0})})]});return r.jsx(r.Fragment,{children:"no-border"===m?r.jsx(n.NoBorderWrapper,{className:g,children:S()}):r.jsx(n.DefaultWrapper,{$disabled:p,$error:c,$readOnly:y,className:g,children:S()})})}));exports.Input=i;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/cross"),t=require("clsx"),n=require("react"),l=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js");var s=require("../util/string-helper.js");require("@react-aria/live-announcer");var i=require("../util/use-next-input-state.js"),u=require("./input.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(t);const c=d(n).default.forwardRef(((t,d)=>{var{value:c,spacing:p,type:f,error:j,disabled:m,readOnly:g,onChange:y,onClear:b,allowClear:h=!1,className:x,styleType:q="bordered"}=t,v=e.__rest(t,["value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType"]);const C=((e,r)=>"tel"===e&&!!r)(f,p),N=n.useRef(null);n.useImperativeHandle(d,(()=>N.current),[]);const B=i.useNextInputState({ref:N,formatter:e=>C?s.StringHelper.transformWithSpaces(e,p):e}),I=e=>{y&&(C?O(e):y(e))},W=()=>{b&&b(),N&&N.current&&N.current.focus()},O=e=>{const r=B();if(!r)return;const{nextValue:a,updateCaretPosition:t}=r,n=a.replace(/\s/g,"");e.target.value=n,null==y||y(e),t()},w=c?(e=>e?C?s.StringHelper.transformWithSpaces(e,p):e:"")(c):c,E=h&&!m&&!g&&!!c,S=()=>{const e=o.default(u.inputElement,{[u.inputElementDisabled]:m,[u.inputElementPaddingLeft]:"no-border"!==q&&!g,[u.inputElementPaddingRight]:"no-border"!==q&&!g&&!E}),t=o.default(u.clearButton,"no-border"===q&&u.clearButtonNoBorder);return r.jsxs(r.Fragment,{children:[r.jsx(l.BasicInput,Object.assign({"data-testid":"input",ref:N,"aria-disabled":m,value:w,onChange:I,type:f,readOnly:g||m,className:e},v)),E&&r.jsx(l.BasicButton,{onClick:W,type:"button","aria-label":"Clear input",className:t,children:r.jsx(a.CrossIcon,{className:u.clearIcon,"aria-hidden":!0})})]})};return r.jsx(r.Fragment,{children:"no-border"===q?r.jsx("div",{className:o.default(u.noBorderWrapper,x),children:S()}):r.jsx(l.InputBox,{className:o.default(u.defaultWrapper,x,{[u.defaultWrapperDisabled]:m,[u.defaultWrapperError]:j,[u.defaultWrapperReadOnly]:g}),disabled:m,error:j,readOnly:g,children:S()})})}));exports.Input=c;
 //# sourceMappingURL=input.js.map

package/cjs/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/input/input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef } from \"react\";\n\nimport { StringHelper, useNextInputState } from \"../util\";\nimport {\n    ClearButton,\n    ClearIcon,\n    DefaultWrapper,\n    InputElement,\n    NoBorderWrapper,\n} from \"./input.style\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        return (\n            <>\n                <InputElement\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    $showClear={showClear}\n                    $styleType={styleType}\n                    $visuallyReadOnly={readOnly}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        $styleType={styleType}\n                    >\n                        <ClearIcon aria-hidden />\n                    </ClearButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <NoBorderWrapper className={className}>\n                    {renderInputElement()}\n                </NoBorderWrapper>\n            ) : (\n                <DefaultWrapper\n                    $disabled={disabled}\n                    $error={error}\n                    $readOnly={readOnly}\n                    className={className}\n                >\n                    {renderInputElement()}\n                </DefaultWrapper>\n            )}\n        </>\n    );\n};\n\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","_jsxs","_Fragment","children","_jsx","InputElement","Object","assign","$showClear","$styleType","$visuallyReadOnly","ClearButton","onClick","ClearIcon","NoBorderWrapper","DefaultWrapper","$disabled","$error"],"mappings":"mXAYA,MA2JaA,OAAQC,QAAMC,YApJT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAA,OAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAAA,OAAyB,MAC5CC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAAA,kBAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,eAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,eAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,IAEnBC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,eAAYC,OAAAC,OAAA,CAAA,cACG,QACZ9C,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EAAQ0C,WAClBT,EAASU,WACTrC,EAASsC,kBACF3C,GACfM,IAEP0B,GACGK,EAAAA,IAACO,EAAAA,YAAW,CACRC,QAASvB,EACTzB,KAAK,SAAQ,aACF,yBACCQ,EAAS+B,SAErBC,EAAAA,IAACS,EAAAA,UAAS,CAAA,eAAA,SAO9B,OACIT,EAAAA,IAAAF,EAAAA,SAAA,CAAAC,SACmB,cAAd/B,EACGgC,EAAAA,IAACU,EAAAA,gBAAe,CAAC3C,UAAWA,WACvB6B,MAGLI,MAACW,EAAAA,eAAc,CAAAC,UACAlD,EAAQmD,OACXpD,YACGE,EACXI,UAAWA,WAEV6B,OAGV"}
+{"version":3,"file":"input.js","sources":["../../../src/input/input.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport React, { useImperativeHandle, useRef } from \"react\";\n\nimport { BasicButton, BasicInput, InputBox } from \"../shared/input-wrapper\";\nimport { StringHelper, useNextInputState } from \"../util\";\nimport * as styles from \"./input.styles\";\nimport type { InputProps, InputRef } from \"./types\";\n\nconst shouldAllowSpacing = (\n    type: string | undefined,\n    spacing: number | undefined\n): spacing is number => {\n    return type === \"tel\" && !!spacing;\n};\n\nconst Component = (\n    {\n        value,\n        spacing,\n        type,\n        error,\n        disabled,\n        readOnly,\n        onChange,\n        onClear,\n        allowClear = false,\n        className,\n        styleType = \"bordered\",\n        ...otherProps\n    }: InputProps,\n    ref: InputRef\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const allowSpacing = shouldAllowSpacing(type, spacing);\n    const elementRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => elementRef.current!, []);\n\n    const getNextInputState = useNextInputState({\n        ref: elementRef,\n        formatter: (value) => {\n            return allowSpacing\n                ? StringHelper.transformWithSpaces(value, spacing)\n                : value;\n        },\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            if (allowSpacing) {\n                handleSpacingAndCaretPosition(event);\n            } else {\n                onChange(event);\n            }\n        }\n    };\n\n    const handleClear = () => {\n        if (onClear) onClear();\n\n        if (elementRef && elementRef.current) {\n            elementRef.current.focus();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const convertInputString = (value: string | number | readonly string[]) => {\n        if (!value) return \"\";\n        if (allowSpacing) {\n            return StringHelper.transformWithSpaces(value, spacing);\n        }\n        return value;\n    };\n\n    const handleSpacingAndCaretPosition = (\n        event: React.ChangeEvent<HTMLInputElement>\n    ) => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        // Send to handler unspaced value\n        const valueWithoutSpace = nextValue.replace(/\\s/g, \"\");\n        event.target.value = valueWithoutSpace;\n        onChange?.(event);\n\n        updateCaretPosition();\n    };\n\n    const shouldShowClear = () => {\n        return allowClear && !disabled && !readOnly && !!value;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    /**\n     * To clear controlled input value, you have to pass in value as empty string,\n     * then set `updatedValue` to empty string.\n     * `updatedValue` for uncontrolled components remains as undefined such that the\n     * user is free to edit the field. (else the value of the InputElement will\n     * be set to empty string)\n     */\n    const updatedValue = value ? convertInputString(value) : value;\n    const showClear = shouldShowClear();\n\n    const renderInputElement = () => {\n        const inputClassName = clsx(styles.inputElement, {\n            [styles.inputElementDisabled]: disabled,\n            [styles.inputElementPaddingLeft]:\n                styleType !== \"no-border\" && !readOnly,\n            [styles.inputElementPaddingRight]:\n                styleType !== \"no-border\" && !readOnly && !showClear,\n        });\n\n        const clearButtonClassName = clsx(\n            styles.clearButton,\n            styleType === \"no-border\" && styles.clearButtonNoBorder\n        );\n\n        return (\n            <>\n                <BasicInput\n                    data-testid=\"input\"\n                    ref={elementRef}\n                    aria-disabled={disabled}\n                    value={updatedValue}\n                    onChange={handleChange}\n                    type={type}\n                    readOnly={readOnly || disabled}\n                    className={inputClassName}\n                    {...otherProps}\n                />\n                {showClear && (\n                    <BasicButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear input\"\n                        className={clearButtonClassName}\n                    >\n                        <CrossIcon className={styles.clearIcon} aria-hidden />\n                    </BasicButton>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <>\n            {styleType === \"no-border\" ? (\n                <div className={clsx(styles.noBorderWrapper, className)}>\n                    {renderInputElement()}\n                </div>\n            ) : (\n                <InputBox\n                    className={clsx(styles.defaultWrapper, className, {\n                        [styles.defaultWrapperDisabled]: disabled,\n                        [styles.defaultWrapperError]: error,\n                        [styles.defaultWrapperReadOnly]: readOnly,\n                    })}\n                    disabled={disabled}\n                    error={error}\n                    readOnly={readOnly}\n                >\n                    {renderInputElement()}\n                </InputBox>\n            )}\n        </>\n    );\n};\n\n// @catalog\n/**\n * A single-line text input field.\n *\n * Use `Input` for free-form text entry. It supports controlled and uncontrolled\n * usage.\n * @keywords field, form, input, text field\n */\nexport const Input = React.forwardRef(Component);\n"],"names":["Input","React","forwardRef","_a","ref","value","spacing","type","error","disabled","readOnly","onChange","onClear","allowClear","className","styleType","otherProps","__rest","allowSpacing","shouldAllowSpacing","elementRef","useRef","useImperativeHandle","current","getNextInputState","useNextInputState","formatter","StringHelper","transformWithSpaces","handleChange","event","handleSpacingAndCaretPosition","handleClear","focus","nextState","nextValue","updateCaretPosition","valueWithoutSpace","replace","target","updatedValue","convertInputString","showClear","renderInputElement","inputClassName","clsx","styles.inputElement","styles.inputElementDisabled","styles.inputElementPaddingLeft","styles.inputElementPaddingRight","clearButtonClassName","styles.clearButton","styles.clearButtonNoBorder","_jsxs","_Fragment","children","_jsx","BasicInput","BasicButton","onClick","CrossIcon","styles.clearIcon","styles.noBorderWrapper","InputBox","styles.defaultWrapper","styles.defaultWrapperDisabled","styles.defaultWrapperError","styles.defaultWrapperReadOnly"],"mappings":"kkBASA,MAkLaA,OAAQC,QAAMC,YA3KT,CACdC,EAcAC,KAdA,IAAAC,MACIA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,MACJA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,WACPA,GAAa,EAAKC,UAClBA,EAASC,UACTA,EAAY,YAAUZ,EACnBa,EAAUC,EAAAA,OAAAd,EAZjB,oHAmBA,MAAMe,EA3BiB,EACvBX,EACAD,IAEgB,QAATC,KAAoBD,EAuBNa,CAAmBZ,EAAMD,GACxCc,EAAaC,EAAAA,OAAyB,MAC5CC,EAAAA,oBAAoBlB,GAAK,IAAMgB,EAAWG,SAAU,IAEpD,MAAMC,EAAoBC,EAAAA,kBAAkB,CACxCrB,IAAKgB,EACLM,UAAYrB,GACDa,EACDS,eAAaC,oBAAoBvB,EAAOC,GACxCD,IAORwB,EAAgBC,IACdnB,IACIO,EACAa,EAA8BD,GAE9BnB,EAASmB,GAEjB,EAGEE,EAAc,KACZpB,GAASA,IAETQ,GAAcA,EAAWG,SACzBH,EAAWG,QAAQU,OACvB,EAcEF,EACFD,IAEA,MAAMI,EAAYV,IAClB,IAAKU,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAGrCG,EAAoBF,EAAUG,QAAQ,MAAO,IACnDR,EAAMS,OAAOlC,MAAQgC,EACrB1B,SAAAA,EAAWmB,GAEXM,GAAqB,EAiBnBI,EAAenC,EAtCM,CAACA,GACnBA,EACDa,EACOS,eAAaC,oBAAoBvB,EAAOC,GAE5CD,EAJY,GAqCMoC,CAAmBpC,GAASA,EACnDqC,EAdK7B,IAAeJ,IAAaC,KAAcL,EAgB/CsC,EAAqB,KACvB,MAAMC,EAAiBC,EAAAA,QAAKC,eAAqB,CAC7C,CAACC,EAAAA,sBAA8BtC,EAC/B,CAACuC,2BACiB,cAAdjC,IAA8BL,EAClC,CAACuC,EAAAA,0BACiB,cAAdlC,IAA8BL,IAAagC,IAG7CQ,EAAuBL,EAAAA,QACzBM,EAAAA,YACc,cAAdpC,GAA6BqC,EAAAA,qBAGjC,OACIC,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,0CACe,QACZrD,IAAKgB,EAAU,gBACAX,EACfJ,MAAOmC,EACP7B,SAAUkB,EACVtB,KAAMA,EACNG,SAAUA,GAAYD,EACtBK,UAAW8B,GACP5B,IAEP0B,GACGc,EAAAA,IAACE,EAAAA,YAAW,CACRC,QAAS3B,EACTzB,KAAK,sBACM,cACXO,UAAWoC,EAAoBK,SAE/BC,MAACI,EAAAA,WAAU9C,UAAW+C,YAAgB,eAAA,QAG/C,EAIX,OACIL,MAAAF,EAAAA,SAAA,CAAAC,SACmB,cAAdxC,EACGyC,EAAAA,IAAA,MAAA,CAAK1C,UAAW+B,UAAKiB,EAAAA,gBAAwBhD,GAAUyC,SAClDZ,MAGLa,EAAAA,IAACO,EAAAA,UACGjD,UAAW+B,UAAKmB,EAAAA,eAAuBlD,EAAW,CAC9C,CAACmD,EAAAA,wBAAgCxD,EACjC,CAACyD,EAAAA,qBAA6B1D,EAC9B,CAAC2D,EAAAA,wBAAgCzD,IAErCD,SAAUA,EACVD,MAAOA,EACPE,SAAUA,WAETiC,OAGV"}

package/cjs/input/input.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input.styles_1cblor0.css");exports.clearButton="cw4xcs5",exports.clearButtonNoBorder="c12bgeeg",exports.clearIcon="c1v4p080",exports.defaultWrapper="d7twtqb",exports.defaultWrapperDisabled="d1rboro0",exports.defaultWrapperError="d6he67o",exports.defaultWrapperReadOnly="dtt8rz0",exports.inputElement="in7cu42",exports.inputElementDisabled="igi2hjf",exports.inputElementPaddingLeft="i13ih4tu",exports.inputElementPaddingRight="itgr0ej",exports.noBorderWrapper="n1rpxuv8";
+//# sourceMappingURL=input.styles.js.map

package/cjs/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sources":["../../../src/input/input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputElement = css`\n    width: 100%;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n\nexport const inputElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n\n    &:hover {\n        cursor: not-allowed;\n    }\n`;\n\nexport const inputElementPaddingLeft = css`\n    padding-left: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputElementPaddingRight = css`\n    padding-right: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const clearButton = css`\n    height: auto;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    cursor: pointer;\n    color: ${Colour.icon};\n`;\n\nexport const clearButtonNoBorder = css`\n    margin-right: calc(${Spacing[\"spacing-12\"]} * -1);\n`;\n\nexport const clearIcon = css`\n    height: 1.25rem;\n    width: 1.25rem;\n    vertical-align: middle;\n`;\n\nexport const noBorderWrapper = css`\n    display: flex;\n    width: 100%;\n`;\n\nexport const defaultWrapper = css`\n    display: flex;\n    align-items: center;\n    width: 100%;\n`;\n\nexport const defaultWrapperReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const defaultWrapperDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const defaultWrapperError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n"],"names":[],"mappings":"4FA4BwB,sCAOQ,6BAIV,kCAWK,yCAgBQ,uCASH,yCAnBG,+BAjDV,uCAKQ,0CAQG,4CAIC,kCAqBT"}

package/cjs/input/input.styles_1cblor0.css

@@ -0,0 +1,12 @@
+@layer fds{.in7cu42{width:100%;height:calc(3rem - 2px);}
+.igi2hjf{color:var(--fds-colour-text-subtler);}.igi2hjf:hover{cursor:not-allowed;}
+.i13ih4tu{padding-left:var(--fds-spacing-16);}
+.itgr0ej{padding-right:var(--fds-spacing-16);}
+.cw4xcs5{height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);cursor:pointer;color:var(--fds-colour-icon);}
+.c12bgeeg{margin-right:calc(var(--fds-spacing-12) * -1);}
+.c1v4p080{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.n1rpxuv8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}
+.d7twtqb{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;width:100%;}
+.dtt8rz0{border-color:transparent;padding:0;background:transparent!important;}.dtt8rz0:focus-within{outline-color:var(--fds-colour-border-focus);}
+.d1rboro0{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.d1rboro0:focus-within{outline-color:var(--fds-colour-border-disabled);}
+.d6he67o{border-color:var(--fds-colour-border-error);}.d6he67o:focus-within{outline-color:var(--fds-colour-border-error-focus);}}

package/cjs/input-group/input-group-list-addon.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var t=require("../shared/dropdown-list-v2/dropdown-list.js"),s=require("../shared/dropdown-list-v2/dropdown-list-state.js");require("../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js"),d=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),o=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var n=require("./input-group-list-addon.style.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=(u,c)=>{var{addon:p,error:h,onChange:b,readOnly:x,disabled:j,className:y,onBlur:q,noBorder:m,"data-testid":v,"aria-labelledby":w,"aria-describedby":f,"aria-invalid":g,"aria-label":S}=u,$=e.__rest(u,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:_,placeholder:L="Select",displayValueExtractor:C,"data-selector-testid":N,options:F,selectedOption:V,onSelectOption:H,optionsLoadState:A,optionTruncationType:P,onRetry:k,onHideOptions:G,onShowOptions:W,dropdownZIndex:Z,dropdownRootNode:z,"aria-label":J}=p.attributes,{position:K}=p,[M,Q]=a.useState(V),[U,X]=a.useState(!1),[Y,ee]=a.useState(!1),[re]=a.useState((()=>l.SimpleIdGenerator.generate())),ae=`${re}-listbox`,ie=`${re}-instruction`,te=`${re}-combobox-label`,se=`${re}-textbox-label`,le=a.useRef(null),de=a.useRef(null);a.useEffect((()=>{Q(V)}),[V]);const oe=()=>{if(M)return C?C(M):I?I(M):M.toString()},ne=e=>{e?null==W||W():null==G||G()},ue=(e,r)=>{var a;null===(a=de.current)||void 0===a||a.focus(),Q(e),X(!1),ne(!1),null==H||H(e,r)},ce=()=>{U&&(X(!1),ne(!1))},pe=()=>{X(!0),ne(!0),ee(!0)},he=e=>{X(!1),ne(!1),"click"!==e&&(ee(!1),null==q||q())},be=()=>{var e;null===(e=de.current)||void 0===e||e.focus(),X(!1),ne(!1)},xe=()=>r.jsxs("div",{children:[r.jsx(n.StyledExpandableElement,{ref:de,disabled:j,expanded:U,listboxId:ae,popupRole:"listbox",readOnly:x,"aria-labelledby":i.concatIds(w,te),"aria-describedby":i.concatIds(f,ie),"aria-invalid":g,$noBorder:m,$position:K,children:r.jsx(d.LabelContainer,{$disabled:j,children:M?r.jsx(d.ValueLabel,{children:oe()}):r.jsx(d.PlaceholderLabel,{children:L})})}),r.jsx(i.VisuallyHidden,{id:ie,children:"Press space to open options"})]}),je=()=>r.jsx(t.DropdownList,{listboxId:ae,listItems:F,onSelectItem:ue,onDismiss:ce,valueExtractor:I,listExtractor:O,enableSearch:R,hideNoResultsDisplay:T,noResultsDescription:D,searchPlaceholder:E,searchFunction:B,onSearch:_,selectedItems:M?[M]:[],itemsLoadState:A,itemTruncationType:P,onRetry:k,matchElementWidth:!0});return r.jsx(s.DropdownListState,{children:r.jsxs(n.FieldWrapper,{$focused:Y,$disabled:j,$readOnly:x,$error:h,$position:K,ref:le,className:y,"data-testid":v,$noBorder:m,tabIndex:-1,onFocus:()=>{Y||U||ee(!0)},onBlur:e=>{Y&&!U&&le.current&&!le.current.contains(e.relatedTarget)&&(ee(!1),null==q||q())},children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:te,children:J}),r.jsx(n.FieldSelector,{"data-testid":N,children:x?M?r.jsx(n.SelectorReadOnly,{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":w,"aria-describedby":f,"aria-invalid":g,children:r.jsx(d.ValueLabel,{children:oe()})}):null:r.jsx(o.ElementWithDropdown,{enabled:!x&&!j,isOpen:U,renderElement:xe,renderDropdown:je,onOpen:pe,onClose:he,onDismiss:be,clickToToggle:!0,offset:8,alignment:"right"===K?"right":"left",fitAvailableHeight:!0,customZIndex:Z,rootNode:z,positionRef:le})}),r.jsx(n.Divider,{$readOnly:x,$position:K}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:se,children:S}),r.jsx(n.FieldInput,Object.assign({ref:c},$,{$position:K,$noBorder:m,readOnly:x,disabled:j,error:h,onChange:e=>{b&&b(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(w,se),"aria-describedby":f,"aria-invalid":g}))]})})},p=u(a).default.forwardRef(c);exports.Component=c,exports.InputGroupListAddon=p;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),a=require("react"),s=require("../input/input.js"),t=require("../shared/accessibility/index.js");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");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var d=require("../shared/dropdown-list/dropdown-list.js"),o=require("../shared/dropdown-list/dropdown-list-state.js"),n=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),h=require("./input-group-list-addon.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=b(i);const j=(i,b)=>{var{addon:j,error:q,onChange:m,readOnly:f,disabled:y,className:w,onBlur:v,noBorder:g,"data-testid":_,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":O,"aria-label":T}=i,R=e.__rest(i,["addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","data-testid","aria-labelledby","aria-describedby","aria-invalid","aria-label"]);const{valueExtractor:N,listExtractor:k,isOptionDisabled:A,enableSearch:D,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:H,onSearch:L,placeholder:P="Select",displayValueExtractor:G,"data-selector-testid":V,options:M,selectedOption:$,onSelectOption:F,optionsLoadState:W,optionTruncationType:Z,onRetry:z,onHideOptions:J,onShowOptions:K,dropdownZIndex:Q,dropdownRootNode:U,"aria-label":X}=j.attributes,{position:Y="left"}=j,[ee,re]=a.useState($),[ie,ae]=a.useState(!1),[se,te]=a.useState(!1),le=l.useId(),de=`${le}-listbox`,oe=`${le}-instruction`,ne=`${le}-combobox-label`,ue=`${le}-textbox-label`,ce=a.useRef(null),pe=a.useRef(null);a.useEffect((()=>{re($)}),[$]);const he=()=>{if(ee)return G?G(ee):N?N(ee):ee.toString()},be=e=>{e?null==K||K():null==J||J()},xe=(e,r)=>{var i;null===(i=pe.current)||void 0===i||i.focus(),re(e),ae(!1),be(!1),null==F||F(e,r)},je=()=>{ie&&(ae(!1),be(!1))},qe=()=>{ae(!0),be(!0),te(!0)},me=e=>{ae(!1),be(!1),"click"!==e&&(te(!1),null==v||v())},fe=()=>{var e;null===(e=pe.current)||void 0===e||e.focus(),ae(!1),be(!1)},ye=()=>r.jsxs("div",{children:[r.jsx(n.ExpandableElement,{ref:pe,disabled:y,expanded:ie,listboxId:de,popupRole:"listbox",readOnly:f,"aria-labelledby":t.concatIds(I,ne),"aria-describedby":t.concatIds(S,oe),"aria-invalid":O,"data-position":Y,className:x.default(g&&h.expandableElementNoBorder),children:r.jsx(p.LabelContainer,{disabled:y,children:ee?r.jsx(p.ValueLabel,{children:he()}):r.jsx(p.PlaceholderLabel,{children:P})})}),r.jsx(t.VisuallyHidden,{id:oe,children:"Press space to open options"})]}),we=()=>r.jsx(d.DropdownList,{listboxId:de,listItems:M,onSelectItem:xe,onDismiss:je,valueExtractor:N,listExtractor:k,isOptionDisabled:A,enableSearch:D,hideNoResultsDisplay:E,noResultsDescription:B,searchPlaceholder:C,searchFunction:H,onSearch:L,selectedItems:ee?[ee]:[],itemsLoadState:W,itemTruncationType:Z,onRetry:z,matchElementWidth:!0});return r.jsx(o.DropdownListState,{children:r.jsxs(c.InputBox,{focused:se,disabled:y,readOnly:f,error:q,ref:ce,noBorder:g,"data-testid":_,tabIndex:-1,onFocus:()=>{se||ie||te(!0)},onBlur:e=>{se&&!ie&&ce.current&&!ce.current.contains(e.relatedTarget)&&(te(!1),null==v||v())},"data-position":Y,className:x.default(h.fieldWrapper,w),children:[r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ne,children:X}),r.jsx("div",{"data-testid":V,className:h.fieldSelector,children:f?ee?r.jsx("div",{"data-testid":"selector-label",tabIndex:0,role:"combobox","aria-haspopup":"listbox","aria-readonly":!0,"aria-expanded":!1,"aria-labelledby":I,"aria-describedby":S,"aria-invalid":O,className:h.selectorReadOnly,children:r.jsx(p.ValueLabel,{children:he()})}):null:r.jsx(u.ElementWithDropdown,{enabled:!f&&!y,isOpen:ie,renderElement:ye,renderDropdown:we,onOpen:qe,onClose:me,onDismiss:fe,clickToToggle:!0,offset:8,alignment:"right"===Y?"right":"left",fitAvailableHeight:!0,customZIndex:Q,rootNode:U,positionRef:ce})}),r.jsx("div",{"data-position":Y,className:x.default(h.divider,f&&h.dividerReadOnly)}),r.jsx(t.VisuallyHidden,{"aria-hidden":!0,id:ue,children:T}),r.jsx("div",{"data-position":Y,className:x.default(h.fieldInput,g&&h.fieldInputNoBorder,f&&h.fieldInputReadOnly),children:r.jsx(s.Input,Object.assign({ref:b},R,{readOnly:f,disabled:y,error:q,onChange:e=>{m&&m(e)},"data-testid":"input",styleType:"no-border","aria-labelledby":t.concatIds(I,ue),"aria-describedby":S,"aria-invalid":O}))})]})})},q=b(a).default.forwardRef(j);exports.Component=j,exports.InputGroupListAddon=q;
 //# sourceMappingURL=input-group-list-addon.js.map

package/cjs/input-group/input-group-list-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    Divider,\n    FieldInput,\n    FieldSelector,\n    FieldWrapper,\n    SelectorReadOnly,\n    StyledExpandableElement,\n} from \"./input-group-list-addon.style\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n        } else {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer $disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <StyledExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    $noBorder={noBorder}\n                    $position={position}\n                >\n                    {renderSelectorContent()}\n                </StyledExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <SelectorReadOnly\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </SelectorReadOnly>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <FieldWrapper\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $position={position}\n                ref={nodeRef}\n                className={className}\n                data-testid={testId}\n                $noBorder={noBorder}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <FieldSelector data-testid={selectorTestId}>\n                    {renderSelector()}\n                </FieldSelector>\n                <Divider $readOnly={readOnly} $position={position} />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <FieldInput\n                    ref={ref}\n                    {...otherProps}\n                    $position={position}\n                    $noBorder={noBorder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    error={error}\n                    onChange={handleInputChange}\n                    data-testid=\"input\"\n                    styleType=\"no-border\"\n                    aria-labelledby={concatIds(ariaLabelledBy, textboxLabelId)}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                />\n            </FieldWrapper>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","SimpleIdGenerator","generate","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","StyledExpandableElement","expanded","popupRole","concatIds","$noBorder","$position","LabelContainer","$disabled","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","FieldWrapper","$focused","$readOnly","$error","tabIndex","onFocus","e","contains","relatedTarget","FieldSelector","SelectorReadOnly","role","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","Divider","FieldInput","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"input-group-list-addon.js","sources":["../../../src/input-group/input-group-list-addon.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-group-list-addon.styles\";\nimport type { InputGroupProps, ListAddon } from \"./types\";\n\nexport const Component = <T, V>(\n    {\n        addon,\n        error,\n        onChange,\n        readOnly,\n        disabled,\n        className,\n        onBlur,\n        noBorder,\n        \"data-testid\": testId,\n        \"aria-labelledby\": ariaLabelledBy,\n        \"aria-describedby\": ariaDescribedBy,\n        \"aria-invalid\": ariaInvalid,\n        \"aria-label\": textboxAriaLabel,\n        ...otherProps\n    }: InputGroupProps<T, V>,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    const {\n        /* display props */\n        valueExtractor,\n        listExtractor,\n        isOptionDisabled,\n        /* search props */\n        enableSearch,\n        hideNoResultsDisplay,\n        noResultsDescription,\n        searchPlaceholder,\n        searchFunction,\n        onSearch,\n        /* list addon props */\n        placeholder = \"Select\",\n        displayValueExtractor,\n        \"data-selector-testid\": selectorTestId,\n        options,\n        selectedOption,\n        onSelectOption,\n        optionsLoadState,\n        optionTruncationType,\n        onRetry,\n        onHideOptions,\n        onShowOptions,\n        dropdownZIndex,\n        dropdownRootNode,\n        \"aria-label\": comboboxAriaLabel,\n    } = addon!.attributes as ListAddon<T, V>;\n\n    const { position = \"left\" } = addon!;\n\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n    const listboxId = `${internalId}-listbox`;\n    const instructionId = `${internalId}-instruction`;\n    const comboboxLabelId = `${internalId}-combobox-label`;\n    const textboxLabelId = `${internalId}-textbox-label`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = () => {\n        if (!selected) return;\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            return valueExtractor(selected);\n        }\n\n        return selected.toString();\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) onChange(event);\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (selected) {\n            return <ValueLabel>{getDisplayValue()}</ValueLabel>;\n        }\n\n        return <PlaceholderLabel>{placeholder}</PlaceholderLabel>;\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer disabled={disabled}>{renderLabel()}</LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <div>\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={listboxId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    aria-labelledby={concatIds(ariaLabelledBy, comboboxLabelId)}\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    aria-invalid={ariaInvalid}\n                    data-position={position}\n                    className={clsx(\n                        noBorder && styles.expandableElementNoBorder\n                    )}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n                <VisuallyHidden id={instructionId}>\n                    Press space to open options\n                </VisuallyHidden>\n            </div>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={listboxId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                onSearch={onSearch}\n                selectedItems={selected ? [selected] : []}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                matchElementWidth\n            />\n        );\n    };\n\n    const renderSelector = () => {\n        if (readOnly) {\n            return selected ? (\n                <div\n                    data-testid=\"selector-label\"\n                    tabIndex={0}\n                    role=\"combobox\"\n                    aria-haspopup=\"listbox\"\n                    aria-readonly\n                    aria-expanded={false}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                    className={styles.selectorReadOnly}\n                >\n                    <ValueLabel>{getDisplayValue()}</ValueLabel>\n                </div>\n            ) : null;\n        } else {\n            return (\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={showOptions}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle\n                    offset={8}\n                    alignment={position === \"right\" ? \"right\" : \"left\"}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                    positionRef={nodeRef}\n                />\n            );\n        }\n    };\n\n    return (\n        <DropdownListState>\n            <InputBox\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                ref={nodeRef}\n                noBorder={noBorder}\n                data-testid={testId}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                data-position={position}\n                className={clsx(styles.fieldWrapper, className)}\n            >\n                <VisuallyHidden aria-hidden id={comboboxLabelId}>\n                    {comboboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-testid={selectorTestId}\n                    className={styles.fieldSelector}\n                >\n                    {renderSelector()}\n                </div>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.divider,\n                        readOnly && styles.dividerReadOnly\n                    )}\n                />\n                <VisuallyHidden aria-hidden id={textboxLabelId}>\n                    {textboxAriaLabel}\n                </VisuallyHidden>\n                <div\n                    data-position={position}\n                    className={clsx(\n                        styles.fieldInput,\n                        noBorder && styles.fieldInputNoBorder,\n                        readOnly && styles.fieldInputReadOnly\n                    )}\n                >\n                    <Input\n                        ref={ref}\n                        {...otherProps}\n                        readOnly={readOnly}\n                        disabled={disabled}\n                        error={error}\n                        onChange={handleInputChange}\n                        data-testid=\"input\"\n                        styleType=\"no-border\"\n                        aria-labelledby={concatIds(\n                            ariaLabelledBy,\n                            textboxLabelId\n                        )}\n                        aria-describedby={ariaDescribedBy}\n                        aria-invalid={ariaInvalid}\n                    />\n                </div>\n            </InputBox>\n        </DropdownListState>\n    );\n};\n\nexport const InputGroupListAddon = React.forwardRef(Component);\n"],"names":["Component","_a","ref","addon","error","onChange","readOnly","disabled","className","onBlur","noBorder","testId","ariaLabelledBy","ariaDescribedBy","ariaInvalid","textboxAriaLabel","otherProps","__rest","valueExtractor","listExtractor","isOptionDisabled","enableSearch","hideNoResultsDisplay","noResultsDescription","searchPlaceholder","searchFunction","onSearch","placeholder","displayValueExtractor","selectorTestId","options","selectedOption","onSelectOption","optionsLoadState","optionTruncationType","onRetry","onHideOptions","onShowOptions","dropdownZIndex","dropdownRootNode","comboboxAriaLabel","attributes","position","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","listboxId","instructionId","comboboxLabelId","textboxLabelId","nodeRef","useRef","selectorRef","useEffect","getDisplayValue","toString","triggerOptionDisplayCallback","show","handleListItemClick","item","extractedValue","current","focus","handleListDismiss","handleOpen","handleClose","reason","handleDismiss","renderElement","_jsxs","children","_jsx","ExpandableElement","expanded","popupRole","concatIds","clsx","styles.expandableElementNoBorder","LabelContainer","ValueLabel","PlaceholderLabel","VisuallyHidden","id","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","DropdownListState","InputBox","tabIndex","onFocus","e","contains","relatedTarget","styles.fieldWrapper","styles.fieldSelector","role","styles.selectorReadOnly","ElementWithDropdown","enabled","isOpen","onOpen","onClose","clickToToggle","offset","alignment","fitAvailableHeight","customZIndex","rootNode","positionRef","styles.divider","styles.dividerReadOnly","styles.fieldInput","styles.fieldInputNoBorder","styles.fieldInputReadOnly","Input","Object","assign","event","styleType","InputGroupListAddon","React","forwardRef"],"mappings":"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"}

package/cjs/input-group/input-group-list-addon.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./input-group-list-addon.styles_17iuqtw.css");exports.divider="d7gwol5",exports.dividerReadOnly="d181f48m",exports.expandableElementNoBorder="e135ws0j",exports.fieldInput="f96umbl",exports.fieldInputNoBorder="f3g4d0l",exports.fieldInputReadOnly="fioonlm",exports.fieldSelector="faf95up",exports.fieldWrapper="fmhspm1",exports.selectorReadOnly="s1b40hsu";
+//# sourceMappingURL=input-group-list-addon.styles.js.map

package/cjs/input-group/input-group-list-addon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-list-addon.styles.js","sources":["../../../src/input-group/input-group-list-addon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const fieldWrapper = css`\n    display: flex;\n    align-items: center;\n\n    &[data-position=\"right\"] {\n        flex-direction: row-reverse;\n    }\n`;\n\nexport const expandableElementNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-right: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-left: 0;\n    }\n`;\n\nexport const fieldSelector = css`\n    flex: 0 0 auto;\n`;\n\nexport const fieldInput = css`\n    width: 100%;\n\n    &[data-position=\"right\"] {\n        padding-left: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const fieldInputNoBorder = css`\n    &[data-position=\"right\"] {\n        padding-left: 0;\n    }\n\n    &[data-position=\"left\"] {\n        padding-right: 0;\n    }\n`;\n\nexport const fieldInputReadOnly = css`\n    padding: 0;\n`;\n\nexport const selectorReadOnly = css`\n    display: flex;\n    align-items: center;\n    padding: 0;\n    background: transparent;\n    margin-right: ${Spacing[\"spacing-12\"]};\n    color: ${Colour[\"text\"]};\n`;\n\nexport const divider = css`\n    width: 1px;\n    background: ${Colour[\"border\"]};\n    flex-shrink: 0;\n    height: 1.25rem;\n\n    &[data-position=\"right\"] {\n        margin-left: ${Spacing[\"spacing-12\"]};\n    }\n\n    &[data-position=\"left\"] {\n        margin-right: ${Spacing[\"spacing-12\"]};\n    }\n`;\n\nexport const dividerReadOnly = css`\n    display: none;\n`;\n"],"names":[],"mappings":"+GAiEoB,kCAeQ,6CAhEU,8BAcf,qCAYQ,qCAUA,gCA1BL,+BAnBD,mCAiDI"}

package/cjs/input-group/input-group-list-addon.styles_17iuqtw.css

@@ -0,0 +1,9 @@
+@layer fds{.fmhspm1{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;}.fmhspm1[data-position="right"]{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.e135ws0j[data-position="right"]{padding-right:0;}.e135ws0j[data-position="left"]{padding-left:0;}
+.faf95up{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}
+.f96umbl{width:100%;}.f96umbl[data-position="right"]{padding-left:var(--fds-spacing-16);}.f96umbl[data-position="left"]{padding-right:var(--fds-spacing-16);}
+.f3g4d0l[data-position="right"]{padding-left:0;}.f3g4d0l[data-position="left"]{padding-right:0;}
+.fioonlm{padding:0;}
+.s1b40hsu{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;padding:0;background:transparent;margin-right:var(--fds-spacing-12);color:var(--fds-colour-text);}
+.d7gwol5{width:1px;background:var(--fds-colour-border);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:1.25rem;}.d7gwol5[data-position="right"]{margin-left:var(--fds-spacing-12);}.d7gwol5[data-position="left"]{margin-right:var(--fds-spacing-12);}
+.d181f48m{display:none;}}

package/cjs/input-group/input-group.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),d=require("./input-group.style.js"),a=require("./input-group-list-addon.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=s(t).default.forwardRef(((t,s)=>{var{addon:n,error:o,className:i}=t,l=e.__rest(t,["addon","error","className"]);const u=()=>r.jsx(d.NoAddonWrapper,{$disabled:l.disabled,$error:o,$readOnly:l.readOnly,"data-testid":l["data-testid"],className:i,$noBorder:l.noBorder,children:r.jsx(d.MainInput,Object.assign({ref:s},l,{"data-testid":"input",styleType:"no-border"}))});if(!n)return u();{const{type:e="label",position:t="left"}=n,{allowClear:p}=l;switch(e){case"list":{const e=n.attributes;return e.options&&e.options.length>0?r.jsx(a.InputGroupListAddon,Object.assign({ref:s,addon:n,error:o,className:i,noBorder:l.noBorder},l)):u()}case"custom":{const e=n.attributes;return e.children?r.jsxs(d.AddonWrapper,{$error:o,$disabled:l.disabled,$readOnly:l.readOnly,"data-testid":l["data-testid"],$position:t,className:i,$noBorder:l.noBorder,children:[r.jsx(d.LabelAddonContainer,{"data-testid":"addon",$disabled:l.disabled,$readOnly:l.readOnly,$position:t,children:e.children}),r.jsx(d.MainInput,Object.assign({ref:s},l,{allowClear:p&&"right"!==t,error:o,"data-testid":"input",styleType:"no-border"}))]}):u()}default:{const e=n.attributes;return e.value?r.jsxs(d.AddonWrapper,{$disabled:l.disabled,$error:o,$readOnly:l.readOnly,"data-testid":l["data-testid"],$position:t,className:i,$noBorder:l.noBorder,children:[r.jsx(d.LabelAddonContainer,{"data-testid":"addon",$disabled:l.disabled,$readOnly:l.readOnly,$position:t,children:e.value}),r.jsx(d.MainInput,Object.assign({ref:s},l,{allowClear:p&&"right"!==t,error:o,"data-testid":"input",styleType:"no-border"}))]}):u()}}}}));exports.InputGroup=n;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),d=require("react"),t=require("../input/input.js"),i=require("../shared/accessibility/index.js"),s=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./input-group.styles.js"),o=require("./input-group-list-addon.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(a);const p=u(d).default.forwardRef(((a,d)=>{var{addon:u,error:p,className:b,noBorder:y,"aria-label":j,"aria-labelledby":h}=a,f=e.__rest(a,["addon","error","className","noBorder","aria-label","aria-labelledby"]);const x=l.useId(),q=`${x}-addon`,m=`${x}-ariaLabelId`,v=()=>r.jsxs(s.InputBox,{disabled:f.disabled,error:p,readOnly:f.readOnly,noBorder:y,"data-testid":f["data-testid"],className:c.default(n.noAddonWrapper,b),"data-read-only":f.readOnly,"data-no-border":y,children:[r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:m,children:j}),r.jsx(t.Input,Object.assign({ref:d},f,{"data-testid":"input",styleType:"no-border","aria-labelledby":i.concatIds(m,h)}))]}),I=(e,a,l)=>r.jsxs(s.InputBox,{disabled:f.disabled,error:p,readOnly:f.readOnly,noBorder:y,"data-testid":f["data-testid"],className:c.default(n.addonWrapper,b),"data-read-only":f.readOnly,"data-no-border":y,"data-position":a,children:[r.jsx("div",{"data-testid":"addon",id:q,className:n.labelAddonContainer,"data-disabled":f.disabled,"data-read-only":f.readOnly,"data-position":a,children:e}),r.jsx(i.VisuallyHidden,{"aria-hidden":!0,id:m,children:j}),r.jsx(t.Input,Object.assign({ref:d},f,{"aria-labelledby":i.concatIds(m,h,q),allowClear:l&&"right"!==a,error:p,"data-testid":"input",styleType:"no-border"}))]});if(!u)return v();{const{type:e="label",position:a="left"}=u,{allowClear:t}=f;switch(e){case"list":{const e=u.attributes;return e.options&&e.options.length>0?r.jsx(o.InputGroupListAddon,Object.assign({ref:d,addon:u,error:p,className:b,noBorder:y,"aria-label":j,"aria-labelledby":h},f)):v()}case"custom":{const e=u.attributes;return e.children?I(e.children,a,t):v()}default:{const e=u.attributes;return e.value?I(e.value,a,t):v()}}}}));exports.InputGroup=p;
 //# sourceMappingURL=input-group.js.map