@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.6

package/cjs/phone-number-input/phone-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-number-input.js","sources":["../../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["normaliseCountryCode","countryCode","replace","addPlusPrefix","includes","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode"],"mappings":"kbAQO,MAuLDA,EAAwBC,GACnBA,EAAcA,EAAYC,QAAQ,IAAK,IAAM,GAGlDC,EAAiBF,GACdA,EACEA,EAAYG,SAAS,KAAOH,EAAc,IAAIA,IAD5B,4BA5LII,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAA,OAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EAAAA,SACdC,EAAAA,uBAAuBC,iBAGpBC,EAAiBC,GAAsBJ,EAAAA,cAE5CK,IACKC,EAAYC,GAAiBP,EAAAA,SAAiB,IAE/CQ,EAAUC,EAAAA,OAAyB,MAEnCC,EAAoBC,EAAAA,kBAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAAA,uBAAuBa,aACnBhC,EAAMN,QAAQ,UAAW,IACzB2B,KAINY,EAC6B,QAA/BC,EAAApB,aAAY,EAAZA,EAAeO,UAAgB,IAAAa,EAAAA,EAAI,qBAKvCC,EAAAA,WAAU,KACN,MAAMC,EAAiBnB,EAAQoB,QAC1BC,GACGA,EAAQ7C,cAAgBD,EAAqBQ,aAAK,EAALA,EAAOP,eAC1D,GAEF6B,EAAmBc,GACnBX,EACIN,EAAAA,uBAAuBa,aAAahC,aAAK,EAALA,EAAOuC,OAAQH,GACtD,GACF,CAACpC,IAKJ,MAqBMwC,EAAsBF,IACxBG,EAA0BjB,EAAYc,GAClCvC,GACA2C,EAAuBlB,EAAYc,EACvC,EAMEI,EAAyB,CAC3BlB,EACAH,KAEA,MAAMsB,EAAqBxB,EAAAA,uBAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACPwC,OAAQI,EAAmBjD,QAAQ,WAAY,IAC/CD,YACI4B,GAAmB1B,EAAc0B,EAAgB5B,cACvD,EAGAgD,EAA4B,CAC9BjB,EACAH,KAEAI,EACIN,EAAAA,uBAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIuB,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CACPjD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMiD,EAAYpB,IAClB,IAAKoB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAT,EAA0BQ,EAAW5B,GACjCtB,GACA2C,EAAuBO,EAAW5B,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbwC,MA5CA9C,EACO,CACH+C,KAAM,QACNC,WAAY,CACRrD,MAAOL,EAAc0B,aAAe,EAAfA,EAAiB5B,eAIvC,CACH2D,KAAM,OACNC,WAAY,CACR,aAAc,eACd1C,YAAaL,EACbW,UACAmB,eAAgBf,EAChBb,aAAcA,EACd8C,kBAAmB/C,EACnBgD,eAAiBC,GAAW,IAAIA,EAAO/D,cACvCgE,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjE,EAAc6D,EAAO/D,eAEzCoE,eAAgBrB,EAChB/B,cAAeA,EACfC,cAAeA,IAqBvBoD,UAAU,UACVlD,aAAcA,EACdC,SAAUA,EAAQ,aACNoB,GACRlB,GACN"}
+{"version":3,"file":"phone-number-input.js","sources":["../../../src/phone-number-input/phone-number-input.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group/input-group\";\nimport type { AddonProps, LabelAddon, ListAddon } from \"../input-group/types\";\nimport { useNextInputState } from \"../util\";\nimport { PhoneNumberInputHelper } from \"./phone-number-input-helper\";\nimport type { CountryValue, PhoneNumberInputProps } from \"./types\";\n\n/**\n * A phone number field composed of a country code selector and a number input.\n *\n * Use `PhoneNumberInput` when collecting an internationalised phone number.\n * The country code can be selected from a searchable dropdown or locked to a\n * fixed value via `fixedCountry`.\n */\nexport const PhoneNumberInput = ({\n    id,\n    onChange,\n    value,\n    allowClear,\n    onClear,\n    onBlur,\n    error,\n    fixedCountry = false,\n    optionPlaceholder = \"Select\",\n    optionSearchPlaceholder,\n    enableSearch,\n    onHideOptions,\n    onShowOptions,\n    placeholder,\n    autoComplete,\n    noBorder = false,\n    getAriaLabel,\n    ...otherProps\n}: PhoneNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [options] = useState<CountryValue[]>(\n        PhoneNumberInputHelper.getCountries()\n    );\n\n    const [selectedCountry, setSelectedCountry] = useState<\n        CountryValue | undefined\n    >(undefined);\n    const [inputValue, setInputValue] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLInputElement>(null);\n\n    const getNextInputState = useNextInputState({\n        ref: nodeRef,\n        formatter: (value) =>\n            PhoneNumberInputHelper.formatNumber(\n                value.replace(/[^0-9]/g, \"\"),\n                selectedCountry\n            ),\n    });\n\n    const resolvedAriaLabel =\n        getAriaLabel?.(selectedCountry) ?? \"Enter phone number\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const selectedOption = options.filter(\n            (country) =>\n                country.countryCode === normaliseCountryCode(value?.countryCode)\n        )[0];\n\n        setSelectedCountry(selectedOption);\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(value?.number, selectedOption)\n        );\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClear = () => {\n        if (onClear) {\n            onClear();\n        } else {\n            setInputValue(\"\");\n        }\n    };\n\n    const handleInputChange = () => {\n        const nextState = getNextInputState();\n        if (!nextState) return;\n\n        const { nextValue, updateCaretPosition } = nextState;\n\n        updateCaretPosition();\n        performLocalChangeHandler(nextValue, selectedCountry);\n        if (onChange) {\n            performOnChangeHandler(nextValue, selectedCountry);\n        }\n    };\n\n    const handleSelectOption = (country: CountryValue) => {\n        performLocalChangeHandler(inputValue, country);\n        if (onChange) {\n            performOnChangeHandler(inputValue, country);\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const performOnChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        const formatedInputValue = PhoneNumberInputHelper.formatNumber(\n            inputValue,\n            selectedCountry\n        );\n        onChange?.({\n            number: formatedInputValue.replace(/[\\s()]+/g, \"\"), // strip formatted spaces\n            countryCode:\n                selectedCountry && addPlusPrefix(selectedCountry.countryCode),\n        });\n    };\n\n    const performLocalChangeHandler = (\n        inputValue: string,\n        selectedCountry: CountryValue | undefined\n    ) => {\n        setInputValue(\n            PhoneNumberInputHelper.formatNumber(inputValue, selectedCountry)\n        );\n\n        setSelectedCountry(selectedCountry);\n    };\n\n    const getAddonProps = (): AddonProps<CountryValue, string> => {\n        if (fixedCountry) {\n            return {\n                type: \"label\",\n                attributes: {\n                    value: addPlusPrefix(selectedCountry?.countryCode),\n                } as LabelAddon,\n            };\n        } else {\n            return {\n                type: \"list\",\n                attributes: {\n                    \"aria-label\": \"Country code\",\n                    placeholder: optionPlaceholder,\n                    options,\n                    selectedOption: selectedCountry,\n                    enableSearch: enableSearch,\n                    searchPlaceholder: optionSearchPlaceholder,\n                    valueExtractor: (option) => `+${option.countryCode}`,\n                    listExtractor: (option) => ({\n                        title: option.name,\n                        secondaryLabel: addPlusPrefix(option.countryCode),\n                    }),\n                    onSelectOption: handleSelectOption,\n                    onHideOptions: onHideOptions,\n                    onShowOptions: onShowOptions,\n                } as ListAddon<CountryValue, string>,\n            };\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <InputGroup\n            id={id}\n            ref={nodeRef}\n            value={inputValue}\n            onChange={handleInputChange}\n            allowClear={allowClear && !!inputValue}\n            onClear={handleClear}\n            onBlur={onBlur}\n            error={error}\n            placeholder={placeholder}\n            addon={getAddonProps()}\n            inputMode=\"numeric\"\n            autoComplete={autoComplete}\n            noBorder={noBorder}\n            aria-label={resolvedAriaLabel}\n            {...otherProps}\n        />\n    );\n};\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\n/**\n * This strips the + off the specified country code if it\n * is present.\n */\nconst normaliseCountryCode = (countryCode: string | undefined): string => {\n    return countryCode ? countryCode.replace(\"+\", \"\") : \"\";\n};\n\nconst addPlusPrefix = (countryCode?: string): string => {\n    if (!countryCode) return \"\";\n    return countryCode.includes(\"+\") ? countryCode : `+${countryCode}`;\n};\n"],"names":["normaliseCountryCode","countryCode","replace","addPlusPrefix","includes","_a","id","onChange","value","allowClear","onClear","onBlur","error","fixedCountry","optionPlaceholder","optionSearchPlaceholder","enableSearch","onHideOptions","onShowOptions","placeholder","autoComplete","noBorder","getAriaLabel","otherProps","__rest","options","useState","PhoneNumberInputHelper","getCountries","selectedCountry","setSelectedCountry","undefined","inputValue","setInputValue","nodeRef","useRef","getNextInputState","useNextInputState","ref","formatter","formatNumber","resolvedAriaLabel","_b","useEffect","selectedOption","filter","country","number","handleSelectOption","performLocalChangeHandler","performOnChangeHandler","formatedInputValue","_jsx","InputGroup","Object","assign","nextState","nextValue","updateCaretPosition","addon","type","attributes","searchPlaceholder","valueExtractor","option","listExtractor","title","name","secondaryLabel","onSelectOption","inputMode"],"mappings":"kbAeO,MAuLDA,EAAwBC,GACnBA,EAAcA,EAAYC,QAAQ,IAAK,IAAM,GAGlDC,EAAiBF,GACdA,EACEA,EAAYG,SAAS,KAAOH,EAAc,IAAIA,IAD5B,4BA5LII,WAAAC,GAC7BA,EAAEC,SACFA,EAAQC,MACRA,EAAKC,WACLA,EAAUC,QACVA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,aACLA,GAAe,EAAKC,kBACpBA,EAAoB,SAAQC,wBAC5BA,EAAuBC,aACvBA,EAAYC,cACZA,EAAaC,cACbA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,SACZA,GAAW,EAAKC,aAChBA,GAAYjB,EACTkB,EAAUC,EAAAA,OAAAnB,EAlBgB,sOAuB7B,MAAOoB,GAAWC,EAAAA,SACdC,EAAAA,uBAAuBC,iBAGpBC,EAAiBC,GAAsBJ,EAAAA,cAE5CK,IACKC,EAAYC,GAAiBP,EAAAA,SAAiB,IAE/CQ,EAAUC,EAAAA,OAAyB,MAEnCC,EAAoBC,EAAAA,kBAAkB,CACxCC,IAAKJ,EACLK,UAAY/B,GACRmB,EAAAA,uBAAuBa,aACnBhC,EAAMN,QAAQ,UAAW,IACzB2B,KAINY,EAC6B,QAA/BC,EAAApB,aAAY,EAAZA,EAAeO,UAAgB,IAAAa,EAAAA,EAAI,qBAKvCC,EAAAA,WAAU,KACN,MAAMC,EAAiBnB,EAAQoB,QAC1BC,GACGA,EAAQ7C,cAAgBD,EAAqBQ,aAAK,EAALA,EAAOP,eAC1D,GAEF6B,EAAmBc,GACnBX,EACIN,EAAAA,uBAAuBa,aAAahC,aAAK,EAALA,EAAOuC,OAAQH,GACtD,GACF,CAACpC,IAKJ,MAqBMwC,EAAsBF,IACxBG,EAA0BjB,EAAYc,GAClCvC,GACA2C,EAAuBlB,EAAYc,EACvC,EAMEI,EAAyB,CAC3BlB,EACAH,KAEA,MAAMsB,EAAqBxB,EAAAA,uBAAuBa,aAC9CR,EACAH,GAEJtB,SAAAA,EAAW,CACPwC,OAAQI,EAAmBjD,QAAQ,WAAY,IAC/CD,YACI4B,GAAmB1B,EAAc0B,EAAgB5B,cACvD,EAGAgD,EAA4B,CAC9BjB,EACAH,KAEAI,EACIN,EAAAA,uBAAuBa,aAAaR,EAAYH,IAGpDC,EAAmBD,EAAgB,EAqCvC,OACIuB,EAAAA,IAACC,EAAAA,WAAUC,OAAAC,OAAA,CACPjD,GAAIA,EACJgC,IAAKJ,EACL1B,MAAOwB,EACPzB,SAxFkB,KACtB,MAAMiD,EAAYpB,IAClB,IAAKoB,EAAW,OAEhB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAE3CE,IACAT,EAA0BQ,EAAW5B,GACjCtB,GACA2C,EAAuBO,EAAW5B,EACtC,EA+EIpB,WAAYA,KAAgBuB,EAC5BtB,QAlGY,KACZA,EACAA,IAEAuB,EAAc,GAClB,EA8FItB,OAAQA,EACRC,MAAOA,EACPO,YAAaA,EACbwC,MA5CA9C,EACO,CACH+C,KAAM,QACNC,WAAY,CACRrD,MAAOL,EAAc0B,aAAe,EAAfA,EAAiB5B,eAIvC,CACH2D,KAAM,OACNC,WAAY,CACR,aAAc,eACd1C,YAAaL,EACbW,UACAmB,eAAgBf,EAChBb,aAAcA,EACd8C,kBAAmB/C,EACnBgD,eAAiBC,GAAW,IAAIA,EAAO/D,cACvCgE,cAAgBD,IAAM,CAClBE,MAAOF,EAAOG,KACdC,eAAgBjE,EAAc6D,EAAO/D,eAEzCoE,eAAgBrB,EAChB/B,cAAeA,EACfC,cAAeA,IAqBvBoD,UAAU,UACVlD,aAAcA,EACdC,SAAUA,EAAQ,aACNoB,GACRlB,GACN"}

package/cjs/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"gPAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EAAAA,kBACPC,KAAMC,EAAAA,iBACNC,MAAOC,EAAAA,kBACPC,OAAQC,EAAAA,mBACRC,IAAKC,EAAAA,gBACLC,KAAMC,EAAAA,iBACNC,QAASC,EAAAA,qBAEbC,QAAS,CACLd,MAAOe,EAAAA,oBACPb,KAAMc,EAAAA,mBACNZ,MAAOa,EAAAA,oBACPX,OAAQY,EAAAA,qBACRV,IAAKW,EAAAA,kBACLT,KAAMU,EAAAA,mBACNR,QAASS,EAAAA,qCAIIC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANI,oDAQjB,OACIQ,EAAAA,KAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EAAAA,QACPC,EAAAA,YACS,UAATX,GAAoBY,EAAAA,aACpBrC,EAAcyB,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,UAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAAA,IAAA,MAAA,CAAKX,UAAWY,EAAAA,MAAYd,SAAGA,OAC7B"}
+{"version":3,"file":"pill.js","sources":["../../../src/pill/pill.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport * as styles from \"./pill.styles\";\nimport type { PillColorType, PillProps, PillType } from \"./types\";\n\nconst WRAPPER_CLASS: Record<PillType, Record<PillColorType, string>> = {\n    solid: {\n        black: styles.wrapperSolidBlack,\n        grey: styles.wrapperSolidGrey,\n        green: styles.wrapperSolidGreen,\n        yellow: styles.wrapperSolidYellow,\n        red: styles.wrapperSolidRed,\n        blue: styles.wrapperSolidBlue,\n        primary: styles.wrapperSolidPrimary,\n    },\n    outline: {\n        black: styles.wrapperOutlineBlack,\n        grey: styles.wrapperOutlineGrey,\n        green: styles.wrapperOutlineGreen,\n        yellow: styles.wrapperOutlineYellow,\n        red: styles.wrapperOutlineRed,\n        blue: styles.wrapperOutlineBlue,\n        primary: styles.wrapperOutlinePrimary,\n    },\n};\n\n/**\n * A compact label used to display status, category, or metadata.\n *\n * Use `Pill` to surface short, read-only information — such as a tag or status\n * badge — inline with other content.\n */\nexport const Pill = ({\n    type,\n    colorType = \"black\",\n    children,\n    icon,\n    className,\n    ...otherProps\n}: PillProps): JSX.Element => {\n    return (\n        <div\n            {...otherProps}\n            className={clsx(\n                styles.wrapperBase,\n                type === \"solid\" && styles.wrapperSolid,\n                WRAPPER_CLASS[type][colorType],\n                className\n            )}\n        >\n            {icon && React.cloneElement(icon, { \"aria-hidden\": true })}\n            <div className={styles.label}>{children}</div>\n        </div>\n    );\n};\n"],"names":["WRAPPER_CLASS","solid","black","styles.wrapperSolidBlack","grey","styles.wrapperSolidGrey","green","styles.wrapperSolidGreen","yellow","styles.wrapperSolidYellow","red","styles.wrapperSolidRed","blue","styles.wrapperSolidBlue","primary","styles.wrapperSolidPrimary","outline","styles.wrapperOutlineBlack","styles.wrapperOutlineGrey","styles.wrapperOutlineGreen","styles.wrapperOutlineYellow","styles.wrapperOutlineRed","styles.wrapperOutlineBlue","styles.wrapperOutlinePrimary","_a","type","colorType","children","icon","className","otherProps","__rest","_jsxs","Object","assign","clsx","styles.wrapperBase","styles.wrapperSolid","React","cloneElement","_jsx","styles.label"],"mappings":"gPAMA,MAAMA,EAAiE,CACnEC,MAAO,CACHC,MAAOC,EAAAA,kBACPC,KAAMC,EAAAA,iBACNC,MAAOC,EAAAA,kBACPC,OAAQC,EAAAA,mBACRC,IAAKC,EAAAA,gBACLC,KAAMC,EAAAA,iBACNC,QAASC,EAAAA,qBAEbC,QAAS,CACLd,MAAOe,EAAAA,oBACPb,KAAMc,EAAAA,mBACNZ,MAAOa,EAAAA,oBACPX,OAAQY,EAAAA,qBACRV,IAAKW,EAAAA,kBACLT,KAAMU,EAAAA,mBACNR,QAASS,EAAAA,qCAUIC,IAAA,IAAAC,KACjBA,EAAIC,UACJA,EAAY,QAAOC,SACnBA,EAAQC,KACRA,EAAIC,UACJA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANI,oDAQjB,OACIQ,EAAAA,KAAA,MAAAC,OAAAC,OAAA,GACQJ,EAAU,CACdD,UAAWM,EAAAA,QACPC,EAAAA,YACS,UAATX,GAAoBY,EAAAA,aACpBrC,EAAcyB,GAAMC,GACpBG,GACHF,SAAA,CAEAC,GAAQU,UAAMC,aAAaX,EAAM,CAAE,eAAe,IACnDY,EAAAA,IAAA,MAAA,CAAKX,UAAWY,EAAAA,MAAYd,SAAGA,OAC7B"}

package/cjs/popover/popover-inline/popover-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-inline.js","sources":["../../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\n\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"4RAM8BA,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAA,OAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,OAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,2CACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAAA,IAAA,OAAA,CACIS,UAAWE,EAAAA,QACPZ,GAAca,gCACjBR,SAEAV,SAIA"}
+{"version":3,"file":"popover-inline.js","sources":["../../../../src/popover/popover-inline/popover-inline.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { PopoverTrigger } from \"../popover-trigger\";\nimport type { PopoverInlineProps } from \"../types\";\nimport * as styles from \"./popover-inline.styles\";\n\n/**\n * An inline text or icon element that opens a popover on interaction.\n *\n * Use `PopoverInline` to embed a labelled trigger directly within a body of content.\n */\nexport const PopoverInline = ({\n    ariaLabel,\n    content,\n    icon,\n    underlineStyle = \"default\",\n    underlineHoverStyle = \"default\",\n    ...otherProps\n}: PopoverInlineProps) => {\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const hasContent = !!content;\n\n    return (\n        <PopoverTrigger {...otherProps}>\n            <span\n                aria-label={ariaLabel ?? (hasContent ? undefined : \"More info\")}\n                role=\"button\"\n                aria-haspopup=\"dialog\"\n                tabIndex={0}\n                className={styles.popoverInlineText}\n                data-underline-style={underlineStyle}\n                data-underline-hover-style={underlineHoverStyle}\n            >\n                {content}\n                {icon && (\n                    <span\n                        className={clsx(\n                            hasContent && styles.popoverInlineIconWithContent\n                        )}\n                    >\n                        {icon}\n                    </span>\n                )}\n            </span>\n        </PopoverTrigger>\n    );\n};\n"],"names":["_a","ariaLabel","content","icon","underlineStyle","underlineHoverStyle","otherProps","__rest","hasContent","_jsx","PopoverTrigger","Object","assign","children","_jsxs","undefined","role","tabIndex","className","styles.popoverInlineText","clsx","styles.popoverInlineIconWithContent"],"mappings":"4RAW8BA,IAAA,IAAAC,UAC1BA,EAASC,QACTA,EAAOC,KACPA,EAAIC,eACJA,EAAiB,UAASC,oBAC1BA,EAAsB,WAASL,EAC5BM,EAAUC,EAAAA,OAAAP,EANa,uEAW1B,MAAMQ,IAAeN,EAErB,OACIO,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKN,EAAU,CAAAO,SAC1BC,OAAA,OAAA,CAAA,aACgBb,QAAAA,EAAcO,OAAaO,EAAY,YACnDC,KAAK,SAAQ,gBACC,SACdC,SAAU,EACVC,UAAWC,2CACWf,EAAc,6BACRC,EAAmBQ,SAAA,CAE9CX,EACAC,GACGM,EAAAA,IAAA,OAAA,CACIS,UAAWE,EAAAA,QACPZ,GAAca,gCACjBR,SAEAV,SAIA"}

package/cjs/popover/popover-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","sources":["../../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}
+{"version":3,"file":"popover-trigger.js","sources":["../../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\n/**\n * Wraps an element to make it a popover trigger.\n *\n * Use `PopoverTrigger` when you need to attach a popover to any arbitrary\n * child element.\n */\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/cjs/popover/popover.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),o=require("react"),s=require("../card/card.js"),a=require("../markup/markup.js"),t=require("../modal-v2/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");var l=require("../theme/utils/use-apply-styles.js"),d=require("../theme/utils/use-media-query.js"),n=require("../typography/index.js"),u=require("./popover.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(i);exports.Popover=i=>{var{children:p,visible:c=!1,onMobileClose:m,maxHeight:j,overflow:v,ariaLabel:x="More information",id:q,className:y,"data-testid":b="popover"}=i,f=e.__rest(i,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const C=d.useMaxWidthMediaQuery("sm"),M=o.useRef(null),g=o.useMemo((()=>({[u.tokens.popoverCard.maxHeight]:void 0===j?null:`${j}px`,[u.tokens.popoverCard.overflowY]:null!=v?v:null})),[j,v]);l.useApplyStyle(M,g);const k=()=>{m&&m()},w=()=>"string"==typeof p?r.jsx(n.Typography.BodyMD,{children:p}):p;return r.jsxs(r.Fragment,{children:[c&&!C&&r.jsx("div",Object.assign({ref:M,tabIndex:0,"data-testid":b},f,{className:h.default(u.popoverContainer,y),id:q,role:"dialog","aria-label":x,children:r.jsx(s.Card,{className:h.default(u.popoverCard,void 0!==j&&u.popoverCardWithMaxHeight,v&&u.popoverCardWithOverflow),children:r.jsx(a.Markup,{baseTextSize:"body-md",children:w()})})})),C&&r.jsx(t.ModalV2,{show:c,onOverlayClick:k,onClose:k,id:q,role:"dialog","aria-label":x,children:r.jsxs(t.ModalV2.Card,{children:[r.jsx(t.ModalV2.Content,{children:r.jsx(a.Markup,{children:w()})}),r.jsx(t.ModalV2.CloseButton,{})]})})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),o=require("react"),a=require("../card/card.js"),s=require("../markup/markup.js"),t=require("../modal-v2/modal-v2.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");var l=require("../theme/utils/use-apply-styles.js"),d=require("../theme/utils/use-media-query.js"),n=require("../typography/index.js"),u=require("./popover.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(i);exports.Popover=i=>{var{children:p,visible:c=!1,onMobileClose:m,maxHeight:v,overflow:j,ariaLabel:x="More information",id:q,className:y,"data-testid":b="popover"}=i,f=e.__rest(i,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const C=d.useMaxWidthMediaQuery("sm"),M=o.useRef(null),g=o.useMemo((()=>({[u.tokens.popoverCard.maxHeight]:void 0===v?null:`${v}px`,[u.tokens.popoverCard.overflowY]:null!=j?j:null})),[v,j]);l.useApplyStyle(M,g);const k=()=>{m&&m()},w=()=>"string"==typeof p?r.jsx(n.Typography.BodyMD,{children:p}):p;return r.jsxs(r.Fragment,{children:[c&&!C&&r.jsx("div",Object.assign({ref:M,tabIndex:0,"data-testid":b},f,{className:h.default(u.popoverContainer,y),id:q,role:"dialog","aria-label":x,children:r.jsx(a.Card,{className:h.default(u.popoverCard,void 0!==v&&u.popoverCardWithMaxHeight,j&&u.popoverCardWithOverflow),children:r.jsx(s.Markup,{baseTextSize:"body-md",children:w()})})})),C&&r.jsx(t.ModalV2,{show:c,onOverlayClick:k,onClose:k,id:q,role:"dialog","aria-label":x,children:r.jsxs(t.ModalV2.Card,{children:[r.jsx(t.ModalV2.Content,{children:r.jsx(s.Markup,{children:w()})}),r.jsx(t.ModalV2.CloseButton,{})]})})]})};
 //# sourceMappingURL=popover.js.map

package/cjs/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"otBAWwBA,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAAA,sBAAsB,MACjCC,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAAA,OAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAAAA,IAACC,aAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAAA,QAAKC,EAAAA,iBAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAAAA,IAACY,OAAI,CACD7B,UAAW0B,UACPI,EAAAA,iBACclB,IAAdhB,GACImC,EAAAA,yBACJlC,GAAYmC,EAAAA,yBACfvC,SAEDwB,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAApC,SAAA,CACTwB,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAA9C,SACZwB,EAAAA,IAACgB,SAAM,CAAAxC,SAAEuB,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}
+{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n/**\n * The presentational overlay for a popover panel. Renders as a floating card\n * on desktop and modal on mobile.\n *\n * Use with `PopoverTrigger`, which manages visibility state and positioning.\n */\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"utBAiBwBA,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAAA,sBAAsB,MACjCC,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAAA,OAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAAAA,IAACC,aAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAAA,QAAKC,EAAAA,iBAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAAAA,IAACY,OAAI,CACD7B,UAAW0B,UACPI,EAAAA,iBACclB,IAAdhB,GACImC,EAAAA,yBACJlC,GAAYmC,EAAAA,yBACfvC,SAEDwB,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAApC,SAAA,CACTwB,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAA9C,SACZwB,EAAAA,IAACgB,SAAM,CAAAxC,SAAEuB,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}

package/cjs/predictive-text-input/predictive-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={isFocused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\n/**\n * A text input that fetches and displays matching suggestions as the user types.\n *\n * Use `PredictiveTextInput` for search-as-you-type or autocomplete scenarios\n * where options are loaded asynchronously based on the current input.\n */\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={isFocused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"s3BASsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAAA,sBAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EAAAA,QACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,EAAAA,0BAAKb,UAAWc,UAAKC,EAAAA,QAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAAA,IAAA,MAAA,CAAKjB,UAAWkB,EAAAA,QAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAAA,IAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,YAAgBP,SAE3BC,EAAAA,IAAA,MAAA,CACIjB,UAAWc,UACPU,EAAAA,aACAH,GAAeI,8BAPlBhB,EAUH,MAgEVQ,EAAAA,WAAKjB,UAAWkB,EAAAA,QAAcF,SACzBb,EA3BLU,EAAAA,KAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAAA,UAAgBP,SAAA,CAE3BH,EAAAA,KAACa,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAAAA,IAACS,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAAA,IAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAAA,UAAgBP,SAE3BH,EAAAA,KAACa,EAAAA,WAAWC,OAAM,CACd3B,UAAWc,UACPkB,EAAAA,sBACAX,GACIY,oCAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAAAA,IAACiB,EAAAA,eAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}
+{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\n/**\n * A horizontal step-progress bar that tracks a user's position through a\n * multi-step flow.\n *\n * Use `ProgressIndicator` when you need to communicate progress through an\n * ordered sequence of steps.\n */\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"s3BAgBsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAAA,sBAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EAAAA,QACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,EAAAA,0BAAKb,UAAWc,UAAKC,EAAAA,QAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAAA,IAAA,MAAA,CAAKjB,UAAWkB,EAAAA,QAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAAA,IAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,YAAgBP,SAE3BC,EAAAA,IAAA,MAAA,CACIjB,UAAWc,UACPU,EAAAA,aACAH,GAAeI,8BAPlBhB,EAUH,MAgEVQ,EAAAA,WAAKjB,UAAWkB,EAAAA,QAAcF,SACzBb,EA3BLU,EAAAA,KAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAAA,UAAgBP,SAAA,CAE3BH,EAAAA,KAACa,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAAAA,IAACS,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAAA,IAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAAA,UAAgBP,SAE3BH,EAAAA,KAACa,EAAAA,WAAWC,OAAM,CACd3B,UAAWc,UACPkB,EAAAA,sBACAX,GACIY,oCAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAAAA,IAACiB,EAAAA,eAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"mRAO4BA,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,SAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAAA,KAAA,MAAA,CACIX,UAAWY,EAAAA,QAAKC,EAAAA,UAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,MAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,UAAKS,EAAAA,OAAenB,GAAYoB,EAAAA,cACvCf,IAtCLN,EACHc,EAAAA,IAACQ,EAAAA,cAAa,CAAA,cACE,gBACZvB,UAAWY,EAAAA,QACPY,OACAtB,EAAWuB,EAAAA,oBAA6BC,kCAKhDX,MAACY,EAAAA,WAAU,CAAA,cACK,kBACZ3B,UAAWY,EAAAA,QACPY,EAAAA,KACAtB,EACM0B,EAAAA,sBACAC,EAAAA,eACT,eAAA,MAwBH"}
+{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\n/**\n * A single radio button input.\n *\n * Use `RadioButton` as an input within a radio group.\n */\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"mRAY4BA,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,SAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAAA,KAAA,MAAA,CACIX,UAAWY,EAAAA,QAAKC,EAAAA,UAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,MAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,UAAKS,EAAAA,OAAenB,GAAYoB,EAAAA,cACvCf,IAtCLN,EACHc,EAAAA,IAACQ,EAAAA,cAAa,CAAA,cACE,gBACZvB,UAAWY,EAAAA,QACPY,OACAtB,EAAWuB,EAAAA,oBAA6BC,kCAKhDX,MAACY,EAAAA,WAAU,CAAA,cACK,kBACZ3B,UAAWY,EAAAA,QACPY,EAAAA,KACAtB,EACM0B,EAAAA,sBACAC,EAAAA,eACT,eAAA,MAwBH"}

package/cjs/schedule/schedule.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport * as styles from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { CommonScheduleViewProps, ScheduleProps } from \"./types\";\n\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n    let visibleServiceData = filteredServiceData;\n    if (isSmallScreen) {\n        visibleServiceData =\n            filteredServiceData.length > 0\n                ? [filteredServiceData[visibleServiceIdx]]\n                : [];\n    }\n    const showPrevArrow = isSmallScreen && visibleServiceIdx > 0;\n    const showNextArrow =\n        isSmallScreen && visibleServiceIdx < filteredServiceData.length - 1;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderEmptyContent = () => (\n        <div className={clsx(styles.emptyTableContainer, \"empty-container\")}>\n            <ErrorDisplay\n                className={styles.noResultsFound}\n                type=\"no-item-found\"\n                description={emptyContentMessage}\n            />\n        </div>\n    );\n\n    const commonScheduleViewProps: CommonScheduleViewProps = {\n        date,\n        loading,\n        minTime,\n        maxTime,\n        initialScrollTime,\n        containerRef: contentContainerRef,\n        blockedMessage,\n    };\n\n    const renderScheduleView = () => (\n        <div\n            className={styles.scheduleBodyContainer}\n            ref={contentContainerRef}\n            data-id=\"schedule-container\"\n        >\n            {effectiveView === \"day\" ? (\n                <ScheduleDayView\n                    {...commonScheduleViewProps}\n                    serviceData={visibleServiceData}\n                    emptySlotPopover={emptySlotPopover}\n                    isMobile={isSmallScreen}\n                    onNextService={handleNextService}\n                    onPrevService={handlePrevService}\n                    showPrevArrow={showPrevArrow}\n                    showNextArrow={showNextArrow}\n                    onEmptySlotClick={onEmptySlotClick}\n                />\n            ) : (\n                <ScheduleWeekView\n                    {...commonScheduleViewProps}\n                    serviceData={serviceData}\n                    onClickHiddenSlots={onClickHiddenSlots}\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <div\n            id={id}\n            className={clsx(\n                styles.container,\n                loading && styles.containerLoading,\n                className\n            )}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            {isEmptyContent ? renderEmptyContent() : renderScheduleView()}\n        </div>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","showPrevArrow","showNextArrow","useEffect","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","commonScheduleViewProps","containerRef","_jsxs","Object","assign","clsx","styles.container","styles.containerLoading","children","_jsx","ScheduleHeader","onViewChange","newView","styles.emptyTableContainer","ErrorDisplay","styles.noResultsFound","type","description","styles.scheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","ScheduleWeekView"],"mappings":"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"}
+{"version":3,"file":"schedule.js","sources":["../../../src/schedule/schedule.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ErrorDisplay } from \"../error-display\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport type { CommonScheduleViewProps } from \"./internal-types\";\nimport * as styles from \"./schedule.styles\";\nimport { ScheduleDayView } from \"./schedule-day-view/schedule-day-view\";\nimport { ScheduleHeader } from \"./schedule-header/schedule-header\";\nimport { ScheduleWeekView } from \"./schedule-week-view/schedule-week-view\";\nimport type { ScheduleProps } from \"./types\";\n\n/**\n * A grid visualisation of slot-based time availability for services across day and week views.\n */\nexport const Schedule = ({\n    id,\n    className,\n    view = \"day\",\n    date,\n    serviceData,\n    loading = false,\n    minTime = \"00:00\",\n    maxTime = \"23:59\",\n    initialScrollTime = minTime,\n    minDate,\n    maxDate,\n    emptyContentMessage,\n    emptySlotPopover,\n    onPreviousDayClick,\n    onNextDayClick,\n    onCalendarDateSelect,\n    onTodayClick,\n    onEmptySlotClick,\n    blockedMessage,\n    onClickHiddenSlots,\n    \"data-testid\": testId = \"schedule\",\n    ...otherProps\n}: ScheduleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [currentView, setCurrentView] = useState<\"day\" | \"week\">(view);\n    const isSmallScreen = useMaxWidthMediaQuery(\"lg\");\n    const effectiveView = isSmallScreen ? \"day\" : currentView;\n    const contentContainerRef = useRef<HTMLDivElement>(null);\n    const [visibleServiceIdx, setVisibleServiceIdx] = useState(0);\n    const isEmptyContent = serviceData.length === 0 || isEmpty(serviceData);\n    const filteredServiceData = useMemo(\n        () =>\n            serviceData.map((service) => ({\n                ...service,\n                slots: service.slots.filter((slot) => slot.date === date),\n            })),\n        [serviceData, date]\n    );\n    let visibleServiceData = filteredServiceData;\n    if (isSmallScreen) {\n        visibleServiceData =\n            filteredServiceData.length > 0\n                ? [filteredServiceData[visibleServiceIdx]]\n                : [];\n    }\n    const showPrevArrow = isSmallScreen && visibleServiceIdx > 0;\n    const showNextArrow =\n        isSmallScreen && visibleServiceIdx < filteredServiceData.length - 1;\n\n    useEffect(() => {\n        setVisibleServiceIdx(0);\n    }, [filteredServiceData]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewChange = (newView: \"day\" | \"week\") => {\n        setCurrentView(newView);\n    };\n\n    const handleTodayClick = useCallback(() => {\n        onTodayClick?.();\n    }, [onTodayClick]);\n\n    const handleNextService = useCallback(() => {\n        if (!filteredServiceData) return;\n        setVisibleServiceIdx((idx) =>\n            idx < filteredServiceData.length - 1 ? idx + 1 : idx\n        );\n    }, [filteredServiceData]);\n\n    const handlePrevService = useCallback(() => {\n        setVisibleServiceIdx((idx) => (idx > 0 ? idx - 1 : idx));\n    }, []);\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderEmptyContent = () => (\n        <div className={clsx(styles.emptyTableContainer, \"empty-container\")}>\n            <ErrorDisplay\n                className={styles.noResultsFound}\n                type=\"no-item-found\"\n                description={emptyContentMessage}\n            />\n        </div>\n    );\n\n    const commonScheduleViewProps: CommonScheduleViewProps = {\n        date,\n        loading,\n        minTime,\n        maxTime,\n        initialScrollTime,\n        containerRef: contentContainerRef,\n        blockedMessage,\n    };\n\n    const renderScheduleView = () => (\n        <div\n            className={styles.scheduleBodyContainer}\n            ref={contentContainerRef}\n            data-id=\"schedule-container\"\n        >\n            {effectiveView === \"day\" ? (\n                <ScheduleDayView\n                    {...commonScheduleViewProps}\n                    serviceData={visibleServiceData}\n                    emptySlotPopover={emptySlotPopover}\n                    isMobile={isSmallScreen}\n                    onNextService={handleNextService}\n                    onPrevService={handlePrevService}\n                    showPrevArrow={showPrevArrow}\n                    showNextArrow={showNextArrow}\n                    onEmptySlotClick={onEmptySlotClick}\n                />\n            ) : (\n                <ScheduleWeekView\n                    {...commonScheduleViewProps}\n                    serviceData={serviceData}\n                    onClickHiddenSlots={onClickHiddenSlots}\n                />\n            )}\n        </div>\n    );\n\n    return (\n        <div\n            id={id}\n            className={clsx(\n                styles.container,\n                loading && styles.containerLoading,\n                className\n            )}\n            data-testid={testId}\n            {...otherProps}\n        >\n            <ScheduleHeader\n                data-id=\"schedule-header\"\n                date={date}\n                view={effectiveView}\n                minDate={minDate}\n                maxDate={maxDate}\n                onPreviousDayClick={onPreviousDayClick}\n                onNextDayClick={onNextDayClick}\n                onCalendarDateSelect={onCalendarDateSelect}\n                onViewChange={handleViewChange}\n                onTodayClick={handleTodayClick}\n            />\n\n            {isEmptyContent ? renderEmptyContent() : renderScheduleView()}\n        </div>\n    );\n};\n"],"names":["_a","id","className","view","date","serviceData","loading","minTime","maxTime","initialScrollTime","minDate","maxDate","emptyContentMessage","emptySlotPopover","onPreviousDayClick","onNextDayClick","onCalendarDateSelect","onTodayClick","onEmptySlotClick","blockedMessage","onClickHiddenSlots","testId","otherProps","__rest","currentView","setCurrentView","useState","isSmallScreen","useMaxWidthMediaQuery","effectiveView","contentContainerRef","useRef","visibleServiceIdx","setVisibleServiceIdx","isEmptyContent","length","isEmpty","filteredServiceData","useMemo","map","service","slots","filter","slot","visibleServiceData","showPrevArrow","showNextArrow","useEffect","handleTodayClick","useCallback","handleNextService","idx","handlePrevService","commonScheduleViewProps","containerRef","_jsxs","Object","assign","clsx","styles.container","styles.containerLoading","children","_jsx","ScheduleHeader","onViewChange","newView","styles.emptyTableContainer","ErrorDisplay","styles.noResultsFound","type","description","styles.scheduleBodyContainer","ref","ScheduleDayView","isMobile","onNextService","onPrevService","ScheduleWeekView"],"mappings":"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"}

package/cjs/schedule/shared/with-optional-popover.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("../../_virtual/_tslib.js"),require("clsx"),require("react"),require("../../theme/theme-provider/context.js"),require("../../typography/typography.js"),require("../../card/card.styles_1gh9gs3.css"),require("../../markup/markup.js"),require("../../modal-v2/index.js"),require("../../theme/theme-provider/index.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var r=require("../../popover/popover-trigger.js");require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");var t=require("./with-optional-popover.styles.js");exports.WithOptionalPopover=({containerRef:i,children:o,customPopover:s})=>{if(!s)return o;const u={position:"bottom-start",rootNode:i,customOffset:s.offset,children:o,trigger:s.trigger,delay:s.delay,popoverContent:s.content};return e.jsx(r.PopoverTrigger,Object.assign({className:t.popoverTrigger,zIndex:2},u))};
+"use strict";var e=require("react/jsx-runtime");require("../../_virtual/_tslib.js"),require("clsx"),require("react"),require("../../theme/theme-provider/context.js"),require("../../typography/typography.js"),require("../../card/card.styles_1gh9gs3.css"),require("../../markup/markup.js"),require("../../modal-v2/modal-v2.js"),require("../../theme/theme-provider/index.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js"),require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer"),require("../../theme/utils/use-media-query.js"),require("../../popover/popover.styles_ujnf0h.css");var r=require("../../popover/popover-trigger.js");require("../../popover/popover-inline/popover-inline.styles_bkopnt.css");var t=require("./with-optional-popover.styles.js");exports.WithOptionalPopover=({containerRef:i,children:o,customPopover:s})=>{if(!s)return o;const u={position:"bottom-start",rootNode:i,customOffset:s.offset,children:o,trigger:s.trigger,delay:s.delay,popoverContent:s.content};return e.jsx(r.PopoverTrigger,Object.assign({className:t.popoverTrigger,zIndex:2},u))};
 //# sourceMappingURL=with-optional-popover.js.map

package/cjs/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"mjCAamC,EAC/BA,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CACXC,UAAWC,EAAAA,eACXC,OAAQ,GACJf,GACN"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"sjCAamC,EAC/BA,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CACXC,UAAWC,EAAAA,eACXC,OAAQ,GACJf,GACN"}

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

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\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    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\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={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\n/**\n * A form input that displays the selected range and reveals a histogram slider in a dropdown.\n *\n * Use `SelectHistogram` when users need to select a numeric range against a data distribution.\n */\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\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    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={focused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = ({\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\n    );\n\n    return (\n        <DropdownListState>\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={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/sidenav/sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav.js","sources":["../../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\nexport const Sidenav = Object.assign(SidenavBase, {\n    Group: SidenavGroup,\n    Item: SidenavItem,\n    DrawerItem: SidenavDrawerItem,\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"0mBAaA,MAuEaA,EAAUC,OAAOC,QAvETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAAA,OAAuB,MACpCC,EAAUD,EAAAA,OAAuB,MACjCE,EAAaC,EAAAA,SAEZC,EAAaC,GAAkBC,EAAAA,cAEpCC,IACKC,EAAcC,GAAmBH,EAAAA,cAEtCC,IACKG,EAA0BC,GAA+BL,EAAAA,cAE9DC,GAKF,OACIK,MAACC,EAAAA,eAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,OAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,UACPC,EAAAA,QACA1B,GAAS2B,eACTxB,GACHF,SAAA,CAEDkB,MAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EAAAA,QACPG,EAAAA,cACAC,oBACH5B,SAEAA,IAGLkB,EAAAA,IAAA,MAAA,CACIhB,UAAWsB,EAAAA,QACPG,EAAAA,cACAE,EAAAA,wBAIU,GAIgB,CAC9CC,MAAOC,EAAAA,aACPC,KAAMC,EAAAA,YACNC,WAAYC,EAAAA,kBACZC,cAAeC,EAAAA"}
+{"version":3,"file":"sidenav.js","sources":["../../../src/sidenav/sidenav.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./sidenav.styles\";\nimport type { SidenavContextItem } from \"./sidenav-context\";\nimport { SidenavContext } from \"./sidenav-context\";\nimport { SidenavDrawerItem } from \"./sidenav-drawer-item\";\nimport { SidenavDrawerSubitem } from \"./sidenav-drawer-subitem\";\nimport { SidenavGroup } from \"./sidenav-group\";\nimport { SidenavItem } from \"./sidenav-item\";\nimport type { SidenavProps } from \"./types\";\n\nconst SidenavBase = ({\n    fixed = true,\n    children,\n    \"aria-label\": ariaLabel = \"Sidebar\",\n    className,\n    ...otherProps\n}: SidenavProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n\n    const [currentItem, setCurrentItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [selectedItem, setSelectedItem] = useState<\n        SidenavContextItem | undefined\n    >(undefined);\n    const [previouslySelectedItemId, setPreviouslySelectedItemId] = useState<\n        string | undefined\n    >(undefined);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <SidenavContext.Provider\n            value={{\n                internalId,\n                menuRef,\n                currentItem,\n                selectedItem,\n                previouslySelectedItemId,\n                setCurrentItem,\n                setSelectedItem,\n                setPreviouslySelectedItemId,\n            }}\n        >\n            <div\n                ref={wrapperRef}\n                {...otherProps}\n                className={clsx(\n                    styles.wrapper,\n                    fixed && styles.wrapperFixed,\n                    className\n                )}\n            >\n                <nav\n                    ref={menuRef}\n                    aria-label={ariaLabel}\n                    className={clsx(\n                        styles.containerBase,\n                        styles.desktopContainer\n                    )}\n                >\n                    {children}\n                </nav>\n                {/** NOTE: Since mobile view not supported yet, children will not be rendered */}\n                <nav\n                    className={clsx(\n                        styles.containerBase,\n                        styles.mobileContainer\n                    )}\n                ></nav>\n            </div>\n        </SidenavContext.Provider>\n    );\n};\n\n/**\n * A fixed sidebar navigation component for multi-level page navigation.\n *\n * Use `Sidenav` to present a persistent icon-based navigation rail with\n * optional menu drawers.\n */\nexport const Sidenav = Object.assign(SidenavBase, {\n    /** Renders a group of navigation items, optionally separated by a divider. */\n    Group: SidenavGroup,\n    /** Renders a single icon-and-label navigation entry that can open a menu drawer. */\n    Item: SidenavItem,\n    /** Renders a menu item inside an item's drawer, with optional collapsible sub-items. */\n    DrawerItem: SidenavDrawerItem,\n    /** Renders a leaf-level navigation entry inside a `Sidenav.DrawerItem`. */\n    DrawerSubitem: SidenavDrawerSubitem,\n});\n"],"names":["Sidenav","Object","assign","_a","fixed","children","ariaLabel","className","otherProps","__rest","wrapperRef","useRef","menuRef","internalId","useId","currentItem","setCurrentItem","useState","undefined","selectedItem","setSelectedItem","previouslySelectedItemId","setPreviouslySelectedItemId","_jsx","SidenavContext","Provider","value","_jsxs","ref","clsx","styles.wrapper","styles.wrapperFixed","styles.containerBase","styles.desktopContainer","styles.mobileContainer","Group","SidenavGroup","Item","SidenavItem","DrawerItem","SidenavDrawerItem","DrawerSubitem","SidenavDrawerSubitem"],"mappings":"0mBAaA,MA6EaA,EAAUC,OAAOC,QA7ETC,IAAA,IAAAC,MACjBA,GAAQ,EAAIC,SACZA,EACA,aAAcC,EAAY,UAASC,UACnCA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALI,+CAUjB,MAAMO,EAAaC,EAAAA,OAAuB,MACpCC,EAAUD,EAAAA,OAAuB,MACjCE,EAAaC,EAAAA,SAEZC,EAAaC,GAAkBC,EAAAA,cAEpCC,IACKC,EAAcC,GAAmBH,EAAAA,cAEtCC,IACKG,EAA0BC,GAA+BL,EAAAA,cAE9DC,GAKF,OACIK,MAACC,EAAAA,eAAeC,SAAQ,CACpBC,MAAO,CACHb,aACAD,UACAG,cACAI,eACAE,2BACAL,iBACAI,kBACAE,+BACHjB,SAEDsB,OAAA,MAAA1B,OAAAC,OAAA,CACI0B,IAAKlB,GACDF,EAAU,CACdD,UAAWsB,UACPC,EAAAA,QACA1B,GAAS2B,eACTxB,GACHF,SAAA,CAEDkB,MAAA,MAAA,CACIK,IAAKhB,EAAO,aACAN,EACZC,UAAWsB,EAAAA,QACPG,EAAAA,cACAC,oBACH5B,SAEAA,IAGLkB,EAAAA,IAAA,MAAA,CACIhB,UAAWsB,EAAAA,QACPG,EAAAA,cACAE,EAAAA,wBAIU,GAUgB,CAE9CC,MAAOC,EAAAA,aAEPC,KAAMC,EAAAA,YAENC,WAAYC,EAAAA,kBAEZC,cAAeC,EAAAA"}