@evolve.ui/core-components 1.0.1 → 1.2.0

package/{Pagination-DIpGKMLz.mjs.map → Pagination-Dyfeys4B.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Pagination-DIpGKMLz.mjs","names":[],"sources":["../src/Pagination/paginationProvider.tsx","../src/Pagination/utils.tsx","../src/Pagination/Pagination.tsx","../src/Pagination/components/AdvancedPaginator/components/PageSelect/PageSelect.tsx","../src/Pagination/components/AdvancedPaginator/AdvancedPaginator.tsx","../src/Pagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Pagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Pagination/AdvancedPagination.tsx"],"sourcesContent":["import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nexport type CurrentPaginationState = Omit<\n    PaginationState,\n    'goToNextPage' | 'goToPage' | 'headInfoUpdateCallback' | 'onPageChange' | 'onPageSizeChange' | 'setPageSize'\n>;\nexport type PageSizeOptions = number | 'all';\n\ntype CommonValues = {\n    /**\n     * This prop allows you to control how the urls for the links are formatted.\n     *\n     * By default, they're just `?page=PAGE`,\n     * (omitted as necessary)\n     * but you can append to that using this object.\n     *\n     * @see https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading#avoid-indexing-variations\n     */\n    extraQueryParams?: Record<string, string>;\n    /**\n     * The path of the current location\n     *\n     * IE if url = example.com/search?page=3\n     * `path` = /search\n     */\n    path: string;\n};\n\nexport type PaginationState = CommonValues & {\n    /**\n     * Defacto method of changing pages. Does not route.\n     * See PaginationProvider's `onPageChange` to handle these changes.\n     *\n     * Pagination components use this.\n     *\n     * @param page Page number to go to\n     */\n    goToPage: (page: number) => void;\n    /**\n     * Default page size.\n     */\n    initialPageSize: PageSizeOptions;\n    /**\n     * Passes down the `itemCount` given to PaginationProvider\n     */\n    itemCount: number;\n    /**\n     * This should always be one indexed\n     *\n     * Remember pages are `1` indexed NOT `0` indexed.\n     */\n    page: number;\n    /** The total number of pages */\n    pageCount: number;\n    /** The current page size */\n    pageSize: PageSizeOptions;\n    /** The current page size options. */\n    pageSizeOptions: PageSizeOptions[];\n    /**\n     * Defacto method of changing page size.\n     * See PaginationProvider's `onPageSizeChange` to handle these changes.\n     *\n     * Pagination components use this. (None implemented right now)\n     *\n     * @param page Page number to jump to\n     */\n    setPageSize: (pageSize: PageSizeOptions) => void;\n};\n\nconst PaginationContext = createContext<PaginationState>({\n    extraQueryParams: {},\n    goToPage: () => 0,\n    initialPageSize: 24,\n    itemCount: 1,\n    page: 1,\n    pageCount: 1,\n    pageSize: 24,\n    pageSizeOptions: [],\n    path: '',\n    setPageSize: () => 0,\n});\n\ntype Props = CommonValues & {\n    children: ReactNode;\n    /** The current page number. This is used if you wish to control the page number externally.*/\n    currentPage?: number;\n    /**\n     * The current page size. Use this to control page size externally (e.g. from URL params).\n     * Mirrors `currentPage` behaviour — when this value changes, the internal `pageSize` state\n     * updates to match without remounting the provider.\n     *\n     * **Note**: `onPageSizeChange` is not fired when `currentPageSize` drives the update. Adjusting currentPage is the user/developer responsibility.\n     */\n    currentPageSize?: PageSizeOptions;\n    /**\n     * Default value for page. Does not affect anything past the first render.\n     *\n     * Remember pages are `1` indexed NOT `0` indexed.\n     */\n    initialPage?: number;\n    /**\n     * Default value for pageSize. Does not affect anything past the first render.\n     */\n    initialPageSize?: PageSizeOptions;\n    /**\n     * The total number of items you're paginating over. This is usually provided by the API.\n     *\n     * Internally, it's only used to determine the number of pages with `Math.ceil(itemCount / pageSize)`\n     */\n    itemCount: number;\n    /**\n     * Callback that runs when something changes page. Useful for updating your API call / routing.\n     *\n     * You can also just listen with the `usePagination` hook.\n     */\n    onPageChange?: (currentPaginationState: CurrentPaginationState) => void;\n    /**\n     * Callback that runs when something changes pageSize. Useful for updating your API call / routing.\n     *\n     * You can also just listen with the `usePagination` hook.\n     */\n    onPageSizeChange?: (currentPaginationState: CurrentPaginationState) => void;\n    /**  */\n    pageSizeOptions?: PageSizeOptions[];\n};\n\n/**\n * `1` based pagination logic provider\n */\nexport const PaginationProvider = ({\n    children,\n    currentPage,\n    currentPageSize,\n    extraQueryParams,\n    initialPage = 1,\n    initialPageSize = 24,\n    itemCount,\n    onPageChange,\n    onPageSizeChange,\n    pageSizeOptions = [],\n    path,\n}: Props) => {\n    const [page, setPage] = useState<number>(Math.max(initialPage, 1));\n    const [pageSize, _setPageSize] = useState<PageSizeOptions>(initialPageSize);\n\n    const pageCount = useMemo(\n        () => (pageSize === 'all' ? 1 : Math.max(Math.ceil(itemCount / pageSize), 1)),\n        [itemCount, pageSize]\n    );\n\n    const dataValues = useMemo(\n        () => ({\n            extraQueryParams,\n            initialPageSize,\n            itemCount,\n            page,\n            pageCount,\n            pageSize,\n            pageSizeOptions,\n            path,\n        }),\n        [extraQueryParams, initialPageSize, itemCount, page, pageCount, pageSize, path, pageSizeOptions]\n    );\n\n    // If page is changed externally, update the page number to reflect the current page inside the component\n    // This will changed the component to be more controlled.\n    useEffect(() => {\n        if (currentPage && currentPage !== page) {\n            setPage(currentPage);\n        }\n    }, [currentPage, page]);\n\n    useEffect(() => {\n        if (currentPageSize !== undefined && currentPageSize !== pageSize) {\n            _setPageSize(currentPageSize);\n        }\n    }, [currentPageSize, pageSize]);\n\n    const goToPage = useCallback(\n        (newPage: number) => {\n            setPage(newPage);\n            onPageChange?.({ ...dataValues, page: newPage });\n        },\n        [dataValues, onPageChange]\n    );\n\n    const setPageSize = useCallback(\n        (newPageSize: PageSizeOptions) => {\n            _setPageSize(newPageSize);\n\n            // Set page to highest possible page if we're on a page that's too high\n            if (newPageSize === 'all') {\n                setPage(1);\n            } else {\n                // Make sure page is least 1 since we're doing 1 indexed.\n                const newPageCount = Math.max(Math.ceil(itemCount / newPageSize), 1);\n\n                if (page > newPageCount) {\n                    setPage(newPageCount);\n                }\n            }\n\n            onPageSizeChange?.({ ...dataValues, pageSize: newPageSize });\n        },\n        [dataValues, itemCount, onPageSizeChange, page]\n    );\n\n    const value: PaginationState = useMemo(\n        () => ({\n            ...dataValues,\n            goToPage,\n            setPageSize,\n        }),\n        [dataValues, goToPage, setPageSize]\n    );\n\n    return <PaginationContext.Provider value={value}>{children}</PaginationContext.Provider>;\n};\n\n/**\n * Provides access to all these values\n * ```tsx\n * goToPage: (page: number) => void;\n * initialPageSize: PageSizeOptions; // number | 'all'\n * items: number;\n * page: number;\n * pageCount: number;\n * pageSize: PageSizeOptions; // number | 'all'\n * setPageSize: (pageSize: PageSizeOptions) => void;\n * ```\n *\n * @see https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading\n */\nexport const usePagination = () => useContext(PaginationContext);\n","import { cloneDeep, merge } from 'es-toolkit';\nimport { useCallback } from 'react';\n\nimport { CurrentPaginationState, usePagination } from './paginationProvider';\n\nexport const usePaginationQueryParams = () => {\n    const currentPaginationState = usePagination();\n\n    const buildQueryParams = useCallback(\n        (newState: Partial<CurrentPaginationState>): string => {\n            const { extraQueryParams, page, path } = merge(cloneDeep(currentPaginationState), newState);\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: params values are stringified below regardless of source type\n            const params: Record<string, any> = {\n                ...extraQueryParams,\n            };\n\n            if (page !== 1) {\n                params.page = page;\n            }\n\n            if (Object.keys(params).length === 0) {\n                return path;\n            }\n\n            const cleanedParams = Object.fromEntries(\n                Object.entries(params).map(([key, value]) => [key, value.toString()])\n            );\n\n            return `${path.startsWith('/') ? '' : '/'}${path}?${new URLSearchParams(cleanedParams).toString()}`;\n        },\n        [currentPaginationState]\n    );\n\n    return buildQueryParams;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useMemo } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../Icons';\nimport { useWindowIsDesktop } from '../providers';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { usePagination } from './paginationProvider';\nimport { usePaginationQueryParams } from './utils';\n\nconst ellipsis = '...' as const;\n\ntype Props = {\n    /**\n     * This prop is useful when multiple paginations are on the same page.\n     *\n     * For instance, if a page had a \"featured items\" section\n     * and a \"recent activity\" section, you might want to label one as\n     * \"Featured Items Pagination\" and the other as \"Recent Activity Pagination\"\n     */\n    'aria-label'?: string;\n    className?: string;\n    /** aria-label applied to the collapsed-pages ellipsis element. */\n    collapsedPagesLabel?: string;\n    /** aria-label for the next-page button (only applied when not disabled). */\n    nextPageLabel?: string;\n    /** Returns the aria-label for a specific page anchor. Receives the page number. */\n    pageLabel?: (page: number) => string;\n    /** aria-label for the previous-page button (only applied when not disabled). */\n    previousPageLabel?: string;\n};\n\n/**\n * `1` based pagination component\n *\n * @see https://www.a11ymatters.com/pattern/pagination/\n */\nexport const Pagination = ({\n    'aria-label': ariaLabel = 'Pagination Navigation',\n    className,\n    collapsedPagesLabel = 'Collapsed pages',\n    nextPageLabel = 'Next Page',\n    pageLabel = (page) => `Page ${page}`,\n    previousPageLabel = 'Previous Page',\n}: Props) => {\n    const { goToPage, page, pageCount } = usePagination();\n    const isDesktop = useWindowIsDesktop();\n    const buildQueryParams = usePaginationQueryParams();\n\n    const pageList = useMemo<(typeof ellipsis | number)[]>(() => {\n        let max = isDesktop ? 9 : 6;\n        const leftEllipsis = pageCount > max + 1 && page > 5;\n        if (leftEllipsis && isDesktop) {\n            max += 1;\n        }\n\n        const increment = isDesktop ? 3 : 1;\n        const theRestFits = page - increment + (max - 3) >= pageCount;\n        let pageCounter = leftEllipsis ? (theRestFits ? pageCount - (max - 3) - 1 : page - increment) : 2;\n\n        const resultingPages: (typeof ellipsis | number)[] = [1];\n        let pagesAdded = 1;\n\n        if (leftEllipsis) {\n            pagesAdded += 1;\n            resultingPages.push(ellipsis);\n        }\n\n        while (pagesAdded < max && pageCounter <= pageCount) {\n            resultingPages.push(pageCounter);\n\n            if (pagesAdded === max - 2 && pageCounter + 2 <= pageCount) {\n                if (pageCounter + 2 === pageCount) {\n                    resultingPages.push(pageCount - 1);\n                } else {\n                    resultingPages.push(ellipsis);\n                }\n                resultingPages.push(pageCount);\n                break;\n            }\n\n            pageCounter += 1;\n            pagesAdded += 1;\n        }\n\n        return resultingPages;\n    }, [isDesktop, page, pageCount]);\n\n    const renderedList = useMemo(() => {\n        return pageList.map((item, index) => {\n            return (\n                <li\n                    className={cn({\n                        'flex h-[34px] min-w-[34px] items-center justify-center': item === ellipsis,\n                    })}\n                    key={`pagination-${item}-${index}`}\n                >\n                    {item === ellipsis ? (\n                        <BodyPrimary\n                            aria-label={collapsedPagesLabel}\n                            className=\"text-link-disabled\"\n                        >\n                            {item}\n                        </BodyPrimary>\n                    ) : (\n                        <a\n                            aria-current={item === page ? 'page' : undefined}\n                            aria-label={pageLabel(item)}\n                            className={cn(\n                                'hui-text-body-secondary flex h-[34px] min-w-[34px] items-center justify-center rounded-full px-xs',\n                                // FOCUS\n                                'hui-focus-visible-outline',\n                                // HOVER\n                                'hover:bg-background-hover',\n                                // CURRENT\n                                {\n                                    'hui-text-label-strong border-2 border-border-selected text-link-primary':\n                                        item === page,\n                                }\n                            )}\n                            href={buildQueryParams({ page: item })}\n                            key={`content-${item}-index-${index}`}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                goToPage(item);\n                            }}\n                            // `rel` is not recommended by google's seo guidelines\n                            rel={\n                                page - 1 === item && item !== 1\n                                    ? 'prev'\n                                    : page + 1 === item && item !== pageCount\n                                      ? 'next'\n                                      : undefined\n                            }\n                        >\n                            {item}\n                        </a>\n                    )}\n                </li>\n            );\n        });\n    }, [buildQueryParams, collapsedPagesLabel, goToPage, page, pageCount, pageLabel, pageList]);\n\n    const previousPage = useMemo(() => {\n        const disabled = page === 1;\n        return (\n            <li\n                className=\"mr-sm\"\n                key={`previous-page-${page}`}\n            >\n                <IconButton\n                    aria-disabled={disabled}\n                    aria-label={disabled ? undefined : previousPageLabel}\n                    as={disabled ? 'button' : 'a'}\n                    data-testid=\"pagination-previous-page\"\n                    disabled={disabled}\n                    href={disabled ? undefined : buildQueryParams({ page: page - 1 })}\n                    icon={CaretLeft}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        if (!disabled) {\n                            goToPage(page - 1);\n                        }\n                    }}\n                    // `rel` is not recommended by google's seo guidelines\n                    rel={disabled ? undefined : 'prev'}\n                    size=\"sm\"\n                    variant=\"outlined\"\n                />\n            </li>\n        );\n    }, [buildQueryParams, goToPage, page, previousPageLabel]);\n\n    const nextPage = useMemo(() => {\n        const disabled = page === pageCount;\n        return (\n            <li\n                className=\"ml-sm\"\n                key={`next-page-${page}`}\n            >\n                <IconButton\n                    aria-disabled={disabled}\n                    aria-label={disabled ? undefined : nextPageLabel}\n                    as={disabled ? 'button' : 'a'}\n                    data-testid=\"pagination-next-page\"\n                    disabled={disabled}\n                    href={disabled ? undefined : buildQueryParams({ page: page + 1 })}\n                    icon={CaretRight}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        if (!disabled) {\n                            goToPage(page + 1);\n                        }\n                    }}\n                    // `rel` is not recommended by google's seo guidelines\n                    rel={disabled ? undefined : 'next'}\n                    size=\"sm\"\n                    variant=\"outlined\"\n                />\n            </li>\n        );\n    }, [buildQueryParams, goToPage, nextPageLabel, page, pageCount]);\n\n    return (\n        <nav\n            aria-label={ariaLabel}\n            className={className}\n        >\n            <ul className=\"flex gap-2xs\">\n                {previousPage}\n                {renderedList}\n                {nextPage}\n            </ul>\n        </nav>\n    );\n};\n","import { useMemo } from 'react';\nimport { components, SingleValueProps } from 'react-select';\n\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { usePagination } from '../../../../paginationProvider';\n\nconst SingleValue = ({ children, ...props }: SingleValueProps) => {\n    return <components.SingleValue {...props}>{children}</components.SingleValue>;\n};\n\nexport const PageSelect = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    const options = useMemo(\n        () =>\n            new Array(pageCount).fill(0).map((_, i) => ({\n                label: `${i + 1}`,\n                value: i + 1,\n            })),\n        [pageCount]\n    );\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"pl-sm\"\n            components={{ SingleValue }}\n            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page:\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            styles={{\n                singleValue: (base) => ({\n                    ...base,\n                    overflow: 'visible',\n                }),\n            }}\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../Icons';\nimport { BodyPrimary } from '../../../Typography/Text/Text';\nimport { usePagination } from '../../paginationProvider';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\ntype Props = {\n    /** aria-label for the next-page button. */\n    nextPageLabel?: string;\n    /** Renders the page-count suffix. Receives total page count. */\n    ofLabel?: (pageCount: number) => string;\n    /** aria-label for the previous-page button. */\n    previousPageLabel?: string;\n};\n\nexport const AdvancedPaginator = ({\n    nextPageLabel = 'Next Page',\n    ofLabel = (pageCount) => `of ${pageCount}`,\n    previousPageLabel = 'Previous Page',\n}: Props) => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label={previousPageLabel}\n                data-testid=\"previous-page\"\n                disabled={page === 1}\n                icon={CaretLeft}\n                onClick={() => {\n                    if (page !== 1) {\n                        goToPage(page - 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n            <PageSelect /> <BodyPrimary className=\"whitespace-nowrap px-xs\">{ofLabel(pageCount)}</BodyPrimary>\n            <IconButton\n                aria-label={nextPageLabel}\n                data-testid=\"next-page\"\n                disabled={page === pageCount}\n                icon={CaretRight}\n                onClick={() => {\n                    if (page !== pageCount) {\n                        goToPage(page + 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n        </div>\n    );\n};\n","import { BodyPrimary } from '../../../Typography/Text/Text';\nimport { usePagination } from '../../paginationProvider';\n\nexport type ItemRangeLabelArgs = { end: number; start: number; total: number };\n\ntype Props = {\n    /** Renders the label when all items are shown (pageSize === 'all'). Receives total item count. */\n    allItemsLabel?: (itemCount: number) => string;\n    /** Renders the label for a paginated range. Receives start, end, and total item count. */\n    itemRangeLabel?: (args: ItemRangeLabelArgs) => string;\n};\n\nexport const ItemCountDisplay = ({\n    allItemsLabel = (itemCount) => `${itemCount} Items`,\n    itemRangeLabel = ({ end, start, total }) => `${start} - ${end} of ${total}`,\n}: Props) => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{allItemsLabel(itemCount)}</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>\n            {itemRangeLabel({\n                end: Math.min(page * pageSize, itemCount),\n                start: (page - 1) * pageSize + 1,\n                total: itemCount,\n            })}\n        </BodyPrimary>\n    );\n};\n","import { useMemo } from 'react';\n\nimport { OptionType, Select } from '../../../Select/Select';\nimport { usePagination } from '../../paginationProvider';\n\ntype Props = {\n    /** Label text for the results-per-page select input. */\n    resultsPerPageLabel?: string;\n};\n\nexport const ItemCountSelect = ({ resultsPerPageLabel = 'Results per page:' }: Props) => {\n    const { pageSize, pageSizeOptions, setPageSize } = usePagination();\n\n    const generatedOptions: OptionType[] = useMemo(() => {\n        return pageSizeOptions.map((option) => {\n            return { label: option.toString(), value: option };\n        });\n    }, [pageSizeOptions]);\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"mr-sm w-[224px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText={resultsPerPageLabel}\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            value={{ label: pageSize, value: pageSize }}\n        />\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\n\nimport { AdvancedPaginator } from './components/AdvancedPaginator/AdvancedPaginator';\nimport { ItemCountDisplay, ItemRangeLabelArgs } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\n\ntype Props = {\n    /** Renders the label when all items are shown (pageSize === 'all'). Forwarded to ItemCountDisplay. */\n    allItemsLabel?: (itemCount: number) => string;\n    className?: string;\n    /** Renders the label for a paginated range. Forwarded to ItemCountDisplay. */\n    itemRangeLabel?: (args: ItemRangeLabelArgs) => string;\n    /** aria-label for the next-page button. Forwarded to AdvancedPaginator. */\n    nextPageLabel?: string;\n    /** Renders the page-count suffix. Forwarded to AdvancedPaginator. */\n    ofLabel?: (pageCount: number) => string;\n    /** aria-label for the previous-page button. Forwarded to AdvancedPaginator. */\n    previousPageLabel?: string;\n    /** Label text for the results-per-page select input. Forwarded to ItemCountSelect. */\n    resultsPerPageLabel?: string;\n};\n\nexport const AdvancedPagination = ({\n    allItemsLabel,\n    className,\n    itemRangeLabel,\n    nextPageLabel,\n    ofLabel,\n    previousPageLabel,\n    resultsPerPageLabel,\n}: Props) => {\n    return (\n        <div className={cn('flex items-center justify-between p-sm', className)}>\n            <AdvancedPaginator\n                nextPageLabel={nextPageLabel}\n                ofLabel={ofLabel}\n                previousPageLabel={previousPageLabel}\n            />\n            <div className=\"flex items-center\">\n                <ItemCountSelect resultsPerPageLabel={resultsPerPageLabel} />\n                <ItemCountDisplay\n                    allItemsLabel={allItemsLabel}\n                    itemRangeLabel={itemRangeLabel}\n                />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination-Dyfeys4B.mjs","names":[],"sources":["../src/Pagination/paginationProvider.tsx","../src/Pagination/utils.tsx","../src/Pagination/Pagination.tsx","../src/Pagination/components/AdvancedPaginator/components/PageSelect/PageSelect.tsx","../src/Pagination/components/AdvancedPaginator/AdvancedPaginator.tsx","../src/Pagination/components/ItemCountDisplay/ItemCountDisplay.tsx","../src/Pagination/components/ItemCountSelect/ItemCountSelect.tsx","../src/Pagination/AdvancedPagination.tsx"],"sourcesContent":["import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nexport type CurrentPaginationState = Omit<\n    PaginationState,\n    'goToNextPage' | 'goToPage' | 'headInfoUpdateCallback' | 'onPageChange' | 'onPageSizeChange' | 'setPageSize'\n>;\nexport type PageSizeOptions = number | 'all';\n\ntype CommonValues = {\n    /**\n     * This prop allows you to control how the urls for the links are formatted.\n     *\n     * By default, they're just `?page=PAGE`,\n     * (omitted as necessary)\n     * but you can append to that using this object.\n     *\n     * @see https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading#avoid-indexing-variations\n     */\n    extraQueryParams?: Record<string, string>;\n    /**\n     * The path of the current location\n     *\n     * IE if url = example.com/search?page=3\n     * `path` = /search\n     */\n    path: string;\n};\n\nexport type PaginationState = CommonValues & {\n    /**\n     * Defacto method of changing pages. Does not route.\n     * See PaginationProvider's `onPageChange` to handle these changes.\n     *\n     * Pagination components use this.\n     *\n     * @param page Page number to go to\n     */\n    goToPage: (page: number) => void;\n    /**\n     * Default page size.\n     */\n    initialPageSize: PageSizeOptions;\n    /**\n     * Passes down the `itemCount` given to PaginationProvider\n     */\n    itemCount: number;\n    /**\n     * This should always be one indexed\n     *\n     * Remember pages are `1` indexed NOT `0` indexed.\n     */\n    page: number;\n    /** The total number of pages */\n    pageCount: number;\n    /** The current page size */\n    pageSize: PageSizeOptions;\n    /** The current page size options. */\n    pageSizeOptions: PageSizeOptions[];\n    /**\n     * Defacto method of changing page size.\n     * See PaginationProvider's `onPageSizeChange` to handle these changes.\n     *\n     * Pagination components use this. (None implemented right now)\n     *\n     * @param page Page number to jump to\n     */\n    setPageSize: (pageSize: PageSizeOptions) => void;\n};\n\nconst PaginationContext = createContext<PaginationState>({\n    extraQueryParams: {},\n    goToPage: () => 0,\n    initialPageSize: 24,\n    itemCount: 1,\n    page: 1,\n    pageCount: 1,\n    pageSize: 24,\n    pageSizeOptions: [],\n    path: '',\n    setPageSize: () => 0,\n});\n\ntype Props = CommonValues & {\n    children: ReactNode;\n    /** The current page number. This is used if you wish to control the page number externally.*/\n    currentPage?: number;\n    /**\n     * The current page size. Use this to control page size externally (e.g. from URL params).\n     * Mirrors `currentPage` behaviour — when this value changes, the internal `pageSize` state\n     * updates to match without remounting the provider.\n     *\n     * **Note**: `onPageSizeChange` is not fired when `currentPageSize` drives the update. Adjusting currentPage is the user/developer responsibility.\n     */\n    currentPageSize?: PageSizeOptions;\n    /**\n     * Default value for page. Does not affect anything past the first render.\n     *\n     * Remember pages are `1` indexed NOT `0` indexed.\n     */\n    initialPage?: number;\n    /**\n     * Default value for pageSize. Does not affect anything past the first render.\n     */\n    initialPageSize?: PageSizeOptions;\n    /**\n     * The total number of items you're paginating over. This is usually provided by the API.\n     *\n     * Internally, it's only used to determine the number of pages with `Math.ceil(itemCount / pageSize)`\n     */\n    itemCount: number;\n    /**\n     * Callback that runs when something changes page. Useful for updating your API call / routing.\n     *\n     * You can also just listen with the `usePagination` hook.\n     */\n    onPageChange?: (currentPaginationState: CurrentPaginationState) => void;\n    /**\n     * Callback that runs when something changes pageSize. Useful for updating your API call / routing.\n     *\n     * You can also just listen with the `usePagination` hook.\n     */\n    onPageSizeChange?: (currentPaginationState: CurrentPaginationState) => void;\n    /**  */\n    pageSizeOptions?: PageSizeOptions[];\n};\n\n/**\n * `1` based pagination logic provider\n */\nexport const PaginationProvider = ({\n    children,\n    currentPage,\n    currentPageSize,\n    extraQueryParams,\n    initialPage = 1,\n    initialPageSize = 24,\n    itemCount,\n    onPageChange,\n    onPageSizeChange,\n    pageSizeOptions = [],\n    path,\n}: Props) => {\n    const [page, setPage] = useState<number>(Math.max(initialPage, 1));\n    const [pageSize, _setPageSize] = useState<PageSizeOptions>(initialPageSize);\n\n    const pageCount = useMemo(\n        () => (pageSize === 'all' ? 1 : Math.max(Math.ceil(itemCount / pageSize), 1)),\n        [itemCount, pageSize]\n    );\n\n    const dataValues = useMemo(\n        () => ({\n            extraQueryParams,\n            initialPageSize,\n            itemCount,\n            page,\n            pageCount,\n            pageSize,\n            pageSizeOptions,\n            path,\n        }),\n        [extraQueryParams, initialPageSize, itemCount, page, pageCount, pageSize, path, pageSizeOptions]\n    );\n\n    // If page is changed externally, update the page number to reflect the current page inside the component\n    // This will changed the component to be more controlled.\n    useEffect(() => {\n        if (currentPage && currentPage !== page) {\n            setPage(currentPage);\n        }\n    }, [currentPage, page]);\n\n    useEffect(() => {\n        if (currentPageSize !== undefined && currentPageSize !== pageSize) {\n            _setPageSize(currentPageSize);\n        }\n    }, [currentPageSize, pageSize]);\n\n    const goToPage = useCallback(\n        (newPage: number) => {\n            setPage(newPage);\n            onPageChange?.({ ...dataValues, page: newPage });\n        },\n        [dataValues, onPageChange]\n    );\n\n    const setPageSize = useCallback(\n        (newPageSize: PageSizeOptions) => {\n            _setPageSize(newPageSize);\n\n            // Set page to highest possible page if we're on a page that's too high\n            if (newPageSize === 'all') {\n                setPage(1);\n            } else {\n                // Make sure page is least 1 since we're doing 1 indexed.\n                const newPageCount = Math.max(Math.ceil(itemCount / newPageSize), 1);\n\n                if (page > newPageCount) {\n                    setPage(newPageCount);\n                }\n            }\n\n            onPageSizeChange?.({ ...dataValues, pageSize: newPageSize });\n        },\n        [dataValues, itemCount, onPageSizeChange, page]\n    );\n\n    const value: PaginationState = useMemo(\n        () => ({\n            ...dataValues,\n            goToPage,\n            setPageSize,\n        }),\n        [dataValues, goToPage, setPageSize]\n    );\n\n    return <PaginationContext.Provider value={value}>{children}</PaginationContext.Provider>;\n};\n\n/**\n * Provides access to all these values\n * ```tsx\n * goToPage: (page: number) => void;\n * initialPageSize: PageSizeOptions; // number | 'all'\n * items: number;\n * page: number;\n * pageCount: number;\n * pageSize: PageSizeOptions; // number | 'all'\n * setPageSize: (pageSize: PageSizeOptions) => void;\n * ```\n *\n * @see https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading\n */\nexport const usePagination = () => useContext(PaginationContext);\n","import { cloneDeep, merge } from 'es-toolkit';\nimport { useCallback } from 'react';\n\nimport { CurrentPaginationState, usePagination } from './paginationProvider';\n\nexport const usePaginationQueryParams = () => {\n    const currentPaginationState = usePagination();\n\n    const buildQueryParams = useCallback(\n        (newState: Partial<CurrentPaginationState>): string => {\n            const { extraQueryParams, page, path } = merge(cloneDeep(currentPaginationState), newState);\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: params values are stringified below regardless of source type\n            const params: Record<string, any> = {\n                ...extraQueryParams,\n            };\n\n            if (page !== 1) {\n                params.page = page;\n            }\n\n            if (Object.keys(params).length === 0) {\n                return path;\n            }\n\n            const cleanedParams = Object.fromEntries(\n                Object.entries(params).map(([key, value]) => [key, value.toString()])\n            );\n\n            return `${path.startsWith('/') ? '' : '/'}${path}?${new URLSearchParams(cleanedParams).toString()}`;\n        },\n        [currentPaginationState]\n    );\n\n    return buildQueryParams;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useMemo } from 'react';\n\nimport { IconButton } from '../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../Icons';\nimport { useWindowIsDesktop } from '../providers';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { usePagination } from './paginationProvider';\nimport { usePaginationQueryParams } from './utils';\n\nconst ellipsis = '...' as const;\n\ntype Props = {\n    /**\n     * This prop is useful when multiple paginations are on the same page.\n     *\n     * For instance, if a page had a \"featured items\" section\n     * and a \"recent activity\" section, you might want to label one as\n     * \"Featured Items Pagination\" and the other as \"Recent Activity Pagination\"\n     */\n    'aria-label'?: string;\n    className?: string;\n    /** aria-label applied to the collapsed-pages ellipsis element. */\n    collapsedPagesLabel?: string;\n    /** aria-label for the next-page button (only applied when not disabled). */\n    nextPageLabel?: string;\n    /** Returns the aria-label for a specific page anchor. Receives the page number. */\n    pageLabel?: (page: number) => string;\n    /** aria-label for the previous-page button (only applied when not disabled). */\n    previousPageLabel?: string;\n};\n\n/**\n * `1` based pagination component\n *\n * @see https://www.a11ymatters.com/pattern/pagination/\n */\nexport const Pagination = ({\n    'aria-label': ariaLabel = 'Pagination Navigation',\n    className,\n    collapsedPagesLabel = 'Collapsed pages',\n    nextPageLabel = 'Next Page',\n    pageLabel = (page) => `Page ${page}`,\n    previousPageLabel = 'Previous Page',\n}: Props) => {\n    const { goToPage, page, pageCount } = usePagination();\n    const isDesktop = useWindowIsDesktop();\n    const buildQueryParams = usePaginationQueryParams();\n\n    const pageList = useMemo<(typeof ellipsis | number)[]>(() => {\n        let max = isDesktop ? 9 : 6;\n        const leftEllipsis = pageCount > max + 1 && page > 5;\n        if (leftEllipsis && isDesktop) {\n            max += 1;\n        }\n\n        const increment = isDesktop ? 3 : 1;\n        const theRestFits = page - increment + (max - 3) >= pageCount;\n        let pageCounter = leftEllipsis ? (theRestFits ? pageCount - (max - 3) - 1 : page - increment) : 2;\n\n        const resultingPages: (typeof ellipsis | number)[] = [1];\n        let pagesAdded = 1;\n\n        if (leftEllipsis) {\n            pagesAdded += 1;\n            resultingPages.push(ellipsis);\n        }\n\n        while (pagesAdded < max && pageCounter <= pageCount) {\n            resultingPages.push(pageCounter);\n\n            if (pagesAdded === max - 2 && pageCounter + 2 <= pageCount) {\n                if (pageCounter + 2 === pageCount) {\n                    resultingPages.push(pageCount - 1);\n                } else {\n                    resultingPages.push(ellipsis);\n                }\n                resultingPages.push(pageCount);\n                break;\n            }\n\n            pageCounter += 1;\n            pagesAdded += 1;\n        }\n\n        return resultingPages;\n    }, [isDesktop, page, pageCount]);\n\n    const renderedList = useMemo(() => {\n        return pageList.map((item, index) => {\n            return (\n                <li\n                    className={cn({\n                        'flex h-[34px] min-w-[34px] items-center justify-center': item === ellipsis,\n                    })}\n                    key={`pagination-${item}-${index}`}\n                >\n                    {item === ellipsis ? (\n                        <BodyPrimary\n                            aria-label={collapsedPagesLabel}\n                            className=\"text-link-disabled\"\n                        >\n                            {item}\n                        </BodyPrimary>\n                    ) : (\n                        <a\n                            aria-current={item === page ? 'page' : undefined}\n                            aria-label={pageLabel(item)}\n                            className={cn(\n                                'hui-text-body-secondary flex h-[34px] min-w-[34px] items-center justify-center rounded-full px-xs',\n                                // FOCUS\n                                'hui-focus-visible-outline',\n                                // HOVER\n                                'hover:bg-background-hover',\n                                // CURRENT\n                                {\n                                    'hui-text-label-strong border-2 border-border-selected text-link-primary':\n                                        item === page,\n                                }\n                            )}\n                            href={buildQueryParams({ page: item })}\n                            key={`content-${item}-index-${index}`}\n                            onClick={(e) => {\n                                e.preventDefault();\n                                goToPage(item);\n                            }}\n                            // `rel` is not recommended by google's seo guidelines\n                            rel={\n                                page - 1 === item && item !== 1\n                                    ? 'prev'\n                                    : page + 1 === item && item !== pageCount\n                                      ? 'next'\n                                      : undefined\n                            }\n                        >\n                            {item}\n                        </a>\n                    )}\n                </li>\n            );\n        });\n    }, [buildQueryParams, collapsedPagesLabel, goToPage, page, pageCount, pageLabel, pageList]);\n\n    const previousPage = useMemo(() => {\n        const disabled = page === 1;\n        return (\n            <li\n                className=\"mr-sm\"\n                key={`previous-page-${page}`}\n            >\n                <IconButton\n                    aria-disabled={disabled}\n                    aria-label={disabled ? undefined : previousPageLabel}\n                    as={disabled ? 'button' : 'a'}\n                    data-testid=\"pagination-previous-page\"\n                    disabled={disabled}\n                    href={disabled ? undefined : buildQueryParams({ page: page - 1 })}\n                    icon={CaretLeft}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        if (!disabled) {\n                            goToPage(page - 1);\n                        }\n                    }}\n                    // `rel` is not recommended by google's seo guidelines\n                    rel={disabled ? undefined : 'prev'}\n                    size=\"sm\"\n                    variant=\"outlined\"\n                />\n            </li>\n        );\n    }, [buildQueryParams, goToPage, page, previousPageLabel]);\n\n    const nextPage = useMemo(() => {\n        const disabled = page === pageCount;\n        return (\n            <li\n                className=\"ml-sm\"\n                key={`next-page-${page}`}\n            >\n                <IconButton\n                    aria-disabled={disabled}\n                    aria-label={disabled ? undefined : nextPageLabel}\n                    as={disabled ? 'button' : 'a'}\n                    data-testid=\"pagination-next-page\"\n                    disabled={disabled}\n                    href={disabled ? undefined : buildQueryParams({ page: page + 1 })}\n                    icon={CaretRight}\n                    onClick={(event) => {\n                        event.preventDefault();\n                        if (!disabled) {\n                            goToPage(page + 1);\n                        }\n                    }}\n                    // `rel` is not recommended by google's seo guidelines\n                    rel={disabled ? undefined : 'next'}\n                    size=\"sm\"\n                    variant=\"outlined\"\n                />\n            </li>\n        );\n    }, [buildQueryParams, goToPage, nextPageLabel, page, pageCount]);\n\n    return (\n        <nav\n            aria-label={ariaLabel}\n            className={className}\n        >\n            <ul className=\"flex gap-2xs\">\n                {previousPage}\n                {renderedList}\n                {nextPage}\n            </ul>\n        </nav>\n    );\n};\n","import { useMemo } from 'react';\nimport { components, SingleValueProps } from 'react-select';\n\nimport { OptionType, Select } from '../../../../../Select/Select';\nimport { usePagination } from '../../../../paginationProvider';\n\nconst SingleValue = ({ children, ...props }: SingleValueProps) => {\n    return <components.SingleValue {...props}>{children}</components.SingleValue>;\n};\n\nexport const PageSelect = () => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    const options = useMemo(\n        () =>\n            new Array(pageCount).fill(0).map((_, i) => ({\n                label: `${i + 1}`,\n                value: i + 1,\n            })),\n        [pageCount]\n    );\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"pl-sm\"\n            components={{ SingleValue }}\n            defaultValue={pageCount}\n            isInsideLabel\n            labelText=\"Page:\"\n            onChange={(event?: OptionType) => goToPage(event?.value)}\n            options={options}\n            small\n            styles={{\n                singleValue: (base) => ({\n                    ...base,\n                    overflow: 'visible',\n                }),\n            }}\n            value={options[page - 1]}\n        />\n    );\n};\n","import { IconButton } from '../../../IconButton/IconButton';\nimport { CaretLeft, CaretRight } from '../../../Icons';\nimport { BodyPrimary } from '../../../Typography/Text/Text';\nimport { usePagination } from '../../paginationProvider';\nimport { PageSelect } from './components/PageSelect/PageSelect';\n\ntype Props = {\n    /** aria-label for the next-page button. */\n    nextPageLabel?: string;\n    /** Renders the page-count suffix. Receives total page count. */\n    ofLabel?: (pageCount: number) => string;\n    /** aria-label for the previous-page button. */\n    previousPageLabel?: string;\n};\n\nexport const AdvancedPaginator = ({\n    nextPageLabel = 'Next Page',\n    ofLabel = (pageCount) => `of ${pageCount}`,\n    previousPageLabel = 'Previous Page',\n}: Props) => {\n    const { goToPage, page, pageCount } = usePagination();\n\n    return (\n        <div className=\"flex items-center\">\n            <IconButton\n                aria-label={previousPageLabel}\n                data-testid=\"previous-page\"\n                disabled={page === 1}\n                icon={CaretLeft}\n                onClick={() => {\n                    if (page !== 1) {\n                        goToPage(page - 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n            <PageSelect /> <BodyPrimary className=\"whitespace-nowrap px-xs\">{ofLabel(pageCount)}</BodyPrimary>\n            <IconButton\n                aria-label={nextPageLabel}\n                data-testid=\"next-page\"\n                disabled={page === pageCount}\n                icon={CaretRight}\n                onClick={() => {\n                    if (page !== pageCount) {\n                        goToPage(page + 1);\n                    }\n                }}\n                size=\"sm\"\n            />\n        </div>\n    );\n};\n","import { BodyPrimary } from '../../../Typography/Text/Text';\nimport { usePagination } from '../../paginationProvider';\n\nexport type ItemRangeLabelArgs = { end: number; start: number; total: number };\n\ntype Props = {\n    /** Renders the label when all items are shown (pageSize === 'all'). Receives total item count. */\n    allItemsLabel?: (itemCount: number) => string;\n    /** Renders the label for a paginated range. Receives start, end, and total item count. */\n    itemRangeLabel?: (args: ItemRangeLabelArgs) => string;\n};\n\nexport const ItemCountDisplay = ({\n    allItemsLabel = (itemCount) => `${itemCount} Items`,\n    itemRangeLabel = ({ end, start, total }) => `${start} - ${end} of ${total}`,\n}: Props) => {\n    const { itemCount, page, pageSize } = usePagination();\n\n    if (pageSize === 'all') {\n        return <BodyPrimary>{allItemsLabel(itemCount)}</BodyPrimary>;\n    }\n\n    return (\n        <BodyPrimary>\n            {itemRangeLabel({\n                end: Math.min(page * pageSize, itemCount),\n                start: (page - 1) * pageSize + 1,\n                total: itemCount,\n            })}\n        </BodyPrimary>\n    );\n};\n","import { useMemo } from 'react';\n\nimport { OptionType, Select } from '../../../Select/Select';\nimport { usePagination } from '../../paginationProvider';\n\ntype Props = {\n    /** Label text for the results-per-page select input. */\n    resultsPerPageLabel?: string;\n};\n\nexport const ItemCountSelect = ({ resultsPerPageLabel = 'Results per page:' }: Props) => {\n    const { pageSize, pageSizeOptions, setPageSize } = usePagination();\n\n    const generatedOptions: OptionType[] = useMemo(() => {\n        return pageSizeOptions.map((option) => {\n            return { label: option.toString(), value: option };\n        });\n    }, [pageSizeOptions]);\n\n    return (\n        <Select\n            autoComplete=\"off\"\n            className=\"mr-sm w-[224px]\"\n            defaultValue={pageSize}\n            isInsideLabel\n            labelText={resultsPerPageLabel}\n            onChange={(event?: OptionType) => setPageSize(event?.value)}\n            options={generatedOptions}\n            small\n            value={{ label: pageSize, value: pageSize }}\n        />\n    );\n};\n","import { cn } from '@evolve.ui/theme-system';\n\nimport { AdvancedPaginator } from './components/AdvancedPaginator/AdvancedPaginator';\nimport { ItemCountDisplay, ItemRangeLabelArgs } from './components/ItemCountDisplay/ItemCountDisplay';\nimport { ItemCountSelect } from './components/ItemCountSelect/ItemCountSelect';\n\ntype Props = {\n    /** Renders the label when all items are shown (pageSize === 'all'). Forwarded to ItemCountDisplay. */\n    allItemsLabel?: (itemCount: number) => string;\n    className?: string;\n    /** Renders the label for a paginated range. Forwarded to ItemCountDisplay. */\n    itemRangeLabel?: (args: ItemRangeLabelArgs) => string;\n    /** aria-label for the next-page button. Forwarded to AdvancedPaginator. */\n    nextPageLabel?: string;\n    /** Renders the page-count suffix. Forwarded to AdvancedPaginator. */\n    ofLabel?: (pageCount: number) => string;\n    /** aria-label for the previous-page button. Forwarded to AdvancedPaginator. */\n    previousPageLabel?: string;\n    /** Label text for the results-per-page select input. Forwarded to ItemCountSelect. */\n    resultsPerPageLabel?: string;\n};\n\nexport const AdvancedPagination = ({\n    allItemsLabel,\n    className,\n    itemRangeLabel,\n    nextPageLabel,\n    ofLabel,\n    previousPageLabel,\n    resultsPerPageLabel,\n}: Props) => {\n    return (\n        <div className={cn('flex items-center justify-between p-sm', className)}>\n            <AdvancedPaginator\n                nextPageLabel={nextPageLabel}\n                ofLabel={ofLabel}\n                previousPageLabel={previousPageLabel}\n            />\n            <div className=\"flex items-center\">\n                <ItemCountSelect resultsPerPageLabel={resultsPerPageLabel} />\n                <ItemCountDisplay\n                    allItemsLabel={allItemsLabel}\n                    itemRangeLabel={itemRangeLabel}\n                />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/PhoneInput-B5pkpkdt.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput-B5pkpkdt.mjs","names":[],"sources":["../src/PhoneInput/useDropdownLogic.tsx","../src/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { Country } from 'react-phone-number-input';\n\nimport { effectEventListener } from '../utils/effectEventListener';\n\nexport const useDropdownLogic = ({\n    country,\n    countryMenuOpen,\n    disabled,\n    setCountry,\n    setCountryMenuOpen,\n}: {\n    country: Country;\n    countryMenuOpen: boolean;\n    disabled?: boolean;\n    setCountry: (value: Country) => void;\n    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;\n}) => {\n    const keyboardNavigatedCountryIndex = useRef(-1);\n    const dropdownMenuRef = useRef<HTMLElement | null>(null);\n    const [countrySearch, setCountrySearch] = useState('');\n    const searchInputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            if (disabled) {\n                setCountryMenuOpen(false);\n            } else {\n                // Focus the search input when dropdown opens\n                setTimeout(() => {\n                    searchInputRef.current?.focus();\n                }, 0);\n\n                return effectEventListener(window, 'click', () => {\n                    setCountryMenuOpen(false);\n                });\n            }\n        } else {\n            keyboardNavigatedCountryIndex.current = -1;\n            // Clear search when dropdown closes\n            setCountrySearch('');\n        }\n        return undefined;\n    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);\n\n    const onClick = useCallback(\n        (e: React.MouseEvent, index?: number) => {\n            if (!disabled) {\n                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                    // Same stale-index hazard as onKeydown: fall back to toggling the menu\n                    // when the tracked index no longer exists in the (filtered) list.\n                    const target = dropdownMenuRef.current.children[\n                        index !== undefined ? index : keyboardNavigatedCountryIndex.current\n                    ] as HTMLElement | undefined;\n\n                    if (target?.dataset.country) {\n                        setCountry(target.dataset.country as Country);\n                    } else {\n                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                    }\n                } else {\n                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                }\n            }\n            e.stopPropagation();\n        },\n        [disabled, setCountry, setCountryMenuOpen]\n    );\n\n    const dropdownMenuRefFunc = useCallback(\n        (ref: HTMLDivElement | null) => {\n            if (ref) {\n                dropdownMenuRef.current = ref;\n\n                // Use setTimeout to ensure the DOM is fully rendered\n                setTimeout(() => {\n                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);\n\n                    if (possibleTarget) {\n                        const target = possibleTarget as HTMLElement;\n\n                        // Use scrollIntoView to properly center the selected country\n                        target.scrollIntoView({\n                            behavior: 'instant',\n                            block: 'center',\n                        });\n\n                        // Set keyboard navigation index\n                        for (let i = 0; i < ref.children.length; i++) {\n                            if ((ref.children[i] as HTMLElement).dataset.country === country) {\n                                keyboardNavigatedCountryIndex.current = i;\n                                break;\n                            }\n                        }\n                    }\n                }, 0);\n            }\n        },\n        [country]\n    );\n\n    const onKeydown = useCallback<EventListener>(\n        (e: Event) => {\n            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                const children = dropdownMenuRef.current.children;\n\n                // The index can go stale (out of bounds) after the search input filters the\n                // list — hammer crashes uncaught here; guard instead of indexing blindly.\n                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {\n                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');\n                }\n\n                switch ((e as KeyboardEvent).key) {\n                    case 'ArrowDown':\n                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {\n                            keyboardNavigatedCountryIndex.current += 1;\n                        }\n                        break;\n                    case 'ArrowUp':\n                        if (keyboardNavigatedCountryIndex.current > 0) {\n                            keyboardNavigatedCountryIndex.current -= 1;\n                        }\n                        break;\n                    default:\n                        const searchKey = (e as KeyboardEvent).key;\n\n                        const keyIndex = Array.from(children).findIndex((child) => {\n                            const childText = (child as HTMLElement).textContent;\n                            if (childText) {\n                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());\n                            }\n                            return false;\n                        });\n\n                        if (keyIndex !== -1) {\n                            children[keyIndex].classList.add('keyboard_hover');\n                            children[keyIndex].scrollIntoView({\n                                behavior: 'instant',\n                                block: 'center',\n                            });\n                        }\n                        break;\n                }\n            }\n        },\n        [dropdownMenuRef, keyboardNavigatedCountryIndex]\n    );\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            return effectEventListener(document, 'keydown', onKeydown);\n        }\n        return undefined;\n    }, [countryMenuOpen, onKeydown]);\n\n    return {\n        countrySearch,\n        dropdownMenuRefFunc,\n        onClick,\n        searchInputRef,\n        setCountrySearch,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport countryMapping from 'i18n-iso-countries';\n// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)\nimport en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };\nimport { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\nimport { createPortal } from 'react-dom';\nimport {\n    Country,\n    getCountries,\n    getCountryCallingCode,\n    isPossiblePhoneNumber,\n    isSupportedCountry,\n    isValidPhoneNumber,\n} from 'react-phone-number-input';\nimport RPhoneInput from 'react-phone-number-input/input';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { CaretDown, CaretUp, Close } from '../Icons';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useDropdownLogic } from './useDropdownLogic';\n\ncountryMapping.registerLocale(en);\n\nconst countries = getCountries()\n    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))\n    .filter((country) => Boolean(country.name))\n    .sort((a, b) => (a.name as string).localeCompare(b.name as string));\n\ntype Props = {\n    /**\n     * Position of the country dropdown relative to the input.\n     * @default 'below'\n     */\n    dropdownPosition?: 'above' | 'below';\n    /**\n     * The initial country. (Decides the country calling code)\n     */\n    initialCountry?: Country;\n    /**\n     * The initial phone number. (The bit after the country calling code)\n     */\n    initialPhoneNumber?: string;\n    /**\n     * Optional callback for when the input loses focus.\n     */\n    onBlur?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the country calling code.\n     */\n    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<Country>` that indicates whether the phone number is valid.\n     */\n    onCountryChange?: Dispatch<SetStateAction<Country>>;\n    /**\n     * Optional callback for when the input gains focus.\n     */\n    onFocus?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the phone number.\n     */\n    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.\n     */\n    onValidChange?: Dispatch<SetStateAction<boolean>>;\n    placeholder?: string;\n    /**\n     * Whether to show the invalid state.\n     * This is so you can control the invalid visual from outside the component.\n     * Perfect for after trying to submit a form.\n     *\n     * To force an error state use `hasError`\n     */\n    showErrorIfInvalid?: boolean;\n    /**\n     * Position the country dropdown menu absolutely, relative to <body />.\n     * Useful in places like modals where the menu may get cut off\n     */\n    usePortalMenu?: boolean;\n    /**\n     * The validation mode to use.\n     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)\n     * - `loose`: The phone number must be possible. (Only checks number of digits)\n     *\n     * @default 'strict'\n     */\n    validation?: 'loose' | 'strict';\n} & FormLabelProps;\n\nexport const PhoneInput = (unfilteredProps: Props) => {\n    const [\n        formLabelProps,\n        {\n            disabled,\n            dropdownPosition = 'below',\n            initialCountry = 'US',\n            onCountryCallingCodeChange,\n            onCountryChange,\n            onPhoneNumberChange,\n            onValidChange,\n            placeholder = 'Enter Number',\n            showErrorIfInvalid,\n            usePortalMenu,\n            validation = 'strict',\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    if (nodeEnv === 'development') {\n        if (!isSupportedCountry(initialCountry)) {\n            throw new Error(`Country ${initialCountry} is not supported`);\n        }\n    }\n\n    const [country, defaultSetCountry] = useState(initialCountry);\n    const [countryMenuOpen, setCountryMenuOpen] = useState(false);\n    const countryCallingCode = useMemo(() => {\n        const countryCallingCode = getCountryCallingCode(country);\n        onCountryCallingCodeChange?.(countryCallingCode);\n        return countryCallingCode;\n    }, [country, onCountryCallingCodeChange]);\n\n    const initialPhoneNumber = useMemo(() => {\n        if (!props.initialPhoneNumber) {\n            return '';\n        }\n\n        if (!props.initialPhoneNumber.startsWith('+')) {\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            return `+${countryCallingCode}${props.initialPhoneNumber}`;\n        }\n\n        return props.initialPhoneNumber;\n\n        // Since it's only initial, rerunning is pointless\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);\n\n    const [isValid, setIsValid] = useState(false);\n    const isFormattingNumber = useRef(false);\n\n    const setPhoneNumber = useCallback(\n        (value: string = '') => {\n            if (isFormattingNumber.current) {\n                return;\n            }\n\n            isFormattingNumber.current = true;\n\n            defaultSetPhoneNumber(value);\n            onPhoneNumberChange?.(value);\n            setCountryMenuOpen(false);\n\n            let valid: boolean;\n\n            if (validation === 'strict') {\n                valid = isValidPhoneNumber(value);\n            } else {\n                valid = isPossiblePhoneNumber(value);\n            }\n\n            onValidChange?.(valid);\n\n            if (formLabelProps.hasError) {\n                valid = false;\n            } else if (!showErrorIfInvalid) {\n                valid = true;\n            }\n\n            setIsValid(valid);\n\n            setTimeout(() => {\n                isFormattingNumber.current = false;\n            }, 0);\n        },\n        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]\n    );\n\n    const setCountry = useCallback(\n        (value: Country) => {\n            defaultSetCountry(value);\n            onCountryChange?.(value);\n            setPhoneNumber('');\n            inputRef.current?.focus();\n        },\n        [onCountryChange, setPhoneNumber]\n    );\n\n    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({\n        country,\n        countryMenuOpen,\n        disabled,\n        setCountry,\n        setCountryMenuOpen,\n    });\n\n    const hasError = formLabelProps.hasError ?? !isValid;\n\n    const filteredCountries = useMemo(() => {\n        if (!countrySearch.trim()) {\n            return countries;\n        }\n\n        const searchTerm = countrySearch.toLowerCase();\n        return countries.filter(({ code, name }) => {\n            const countryName = name?.toLowerCase() || '';\n            const callingCode = getCountryCallingCode(code);\n            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);\n        });\n    }, [countrySearch]);\n\n    const countryList = useMemo(\n        () =>\n            filteredCountries.map(({ code, name }, index) => {\n                const isSelected = code === country;\n                return (\n                    <div\n                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}\n                        aria-selected={isSelected}\n                        className={cn(\n                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',\n                            'hover:bg-background-hover',\n                            'keyboard_hover:bg-background-hover',\n                            {\n                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':\n                                    isSelected,\n                            }\n                        )}\n                        data-country={code}\n                        key={code}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick(e, index);\n                        }}\n                        onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                setCountry(code);\n                                setCountryMenuOpen(false);\n                            }\n                        }}\n                        onTouchMove={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        onTouchStart={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        role=\"option\"\n                        tabIndex={0}\n                    >\n                        <ReactCountryFlag\n                            className=\"mr-sm !w-md select-none [-webkit-user-drag:none]\"\n                            countryCode={code}\n                            role=\"none\"\n                            svg\n                        />\n                        <span className=\"overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs\">{name}</span>(+\n                        {getCountryCallingCode(code)})\n                    </div>\n                );\n            }),\n        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const inputRowClasses = cn(\n        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',\n        {\n            // Error state\n            'border-border-critical': hasError && !countryMenuOpen && !disabled,\n            // Disabled state\n            'border-border-disabled bg-background-disabled': disabled,\n            // Country menu open state\n            'border-border-primary': countryMenuOpen && !disabled,\n            // Default hover and focus states\n            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,\n        }\n    );\n\n    // Calculate dropdown position for portal\n    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);\n\n    // Update dropdown position when menu opens and usePortalMenu is true\n    useMemo(() => {\n        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {\n            const rect = inputContainerRef.current.getBoundingClientRect();\n            setPortalPosition({\n                left: rect.left + window.scrollX,\n                top: rect.bottom + window.scrollY + 4, // 4px gap below input\n                width: rect.width,\n            });\n        } else {\n            setPortalPosition(null);\n        }\n    }, [countryMenuOpen, usePortalMenu]);\n\n    // Create the country dropdown content\n    const countryDropdownContent = (\n        <div\n            aria-label=\"Country list\"\n            className={cn(\n                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',\n                'rounded-input border border-border-secondary shadow-03',\n                {\n                    // When not using portal, position absolute relative to input\n                    'absolute left-0 right-0 z-[1]': !usePortalMenu,\n                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,\n                    // When using portal, position fixed and use high z-index\n                    'fixed z-[11111]': usePortalMenu,\n                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,\n                }\n            )}\n            role=\"listbox\"\n            style={\n                usePortalMenu && portalPosition\n                    ? {\n                          left: portalPosition.left,\n                          top: portalPosition.top,\n                          width: portalPosition.width,\n                      }\n                    : usePortalMenu\n                      ? {\n                            maxWidth: '400px',\n                            // Fallback positioning if we don't have position calculated yet\n                            minWidth: '300px',\n                        }\n                      : undefined\n            }\n        >\n            <div className=\"px-xs pb-xs\">\n                <input\n                    aria-label=\"Search countries\"\n                    className=\"rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none\"\n                    onBlur={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                    }}\n                    onChange={(e) => setCountrySearch(e.target.value)}\n                    onClick={(e) => e.stopPropagation()}\n                    onKeyDown={(e) => {\n                        if (e.key === 'Enter' && filteredCountries.length > 0) {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            setCountry(filteredCountries[0].code);\n                            setCountryMenuOpen(false);\n                        }\n                    }}\n                    onTouchStart={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                        searchInputRef.current?.blur();\n                    }}\n                    placeholder=\"Search countries...\"\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={countrySearch}\n                />\n            </div>\n            <div\n                className=\"flex-1 overflow-y-auto overflow-x-hidden\"\n                ref={dropdownMenuRefFunc}\n            >\n                {countryList}\n            </div>\n        </div>\n    );\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            hasError={hasError}\n        >\n            <div\n                aria-label=\"Phone input\"\n                className={inputRowClasses}\n                ref={inputContainerRef}\n            >\n                <button\n                    aria-label=\"Select country\"\n                    className={cn(\n                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',\n                        'hui-focus-visible-outline',\n                        {\n                            'bg-background-disabled [&>img]:opacity-40': disabled,\n                        }\n                    )}\n                    onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onClick(e);\n                    }}\n                    tabIndex={0}\n                    type=\"button\"\n                >\n                    <ReactCountryFlag\n                        className=\"!w-md select-none [-webkit-user-drag:none]\"\n                        countryCode={country}\n                        role=\"none\"\n                        svg\n                    />\n\n                    <div className=\"px-xs\">\n                        {countryMenuOpen ? (\n                            <CaretUp\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        ) : (\n                            <CaretDown\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        )}\n                    </div>\n                </button>\n                {countryMenuOpen &&\n                    (usePortalMenu && typeof document !== 'undefined'\n                        ? createPortal(\n                              countryDropdownContent,\n                              document.getElementById('hui-modal-target') || document.body\n                          )\n                        : countryDropdownContent)}\n                <div\n                    className={cn('mr-xs h-sm border-r border-border-secondary', {\n                        'border-border-disabled': disabled,\n                    })}\n                />\n                <BodyPrimary\n                    className=\"pr-xs\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    +{countryCallingCode}\n                </BodyPrimary>\n                <RPhoneInput\n                    aria-label=\"Phone number\"\n                    className={cn(\n                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',\n                        'placeholder:text-text-inactive',\n                        {\n                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,\n                        }\n                    )}\n                    country={country}\n                    disabled={disabled}\n                    onBlur={() => {\n                        props.onBlur?.();\n                    }}\n                    onChange={setPhoneNumber}\n                    onFocus={() => {\n                        setCountryMenuOpen(false);\n                        props.onFocus?.();\n                    }}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={phoneNumber}\n                />\n                {phoneNumber && phoneNumber.length > 0 && (\n                    <button\n                        aria-label=\"Clear phone number\"\n                        className={cn(\n                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',\n                            {\n                                'bg-background-disabled': disabled,\n                            }\n                        )}\n                        disabled={disabled}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            setPhoneNumber('');\n                            inputRef.current?.focus();\n                        }}\n                        tabIndex={0}\n                    >\n                        <Close\n                            color={disabled ? 'disabled' : 'primary'}\n                            size=\"sm\"\n                        />\n                    </button>\n                )}\n            </div>\n        </FormLabel>\n    );\n};\n\nexport * from 'react-phone-number-input';\nexport * from 'i18n-iso-countries';\nexport * from 'react-country-flag';\n"],"mappings":"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"}
+{"version":3,"file":"PhoneInput-B5pkpkdt.mjs","names":[],"sources":["../src/PhoneInput/useDropdownLogic.tsx","../src/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { Country } from 'react-phone-number-input';\n\nimport { effectEventListener } from '../utils/effectEventListener';\n\nexport const useDropdownLogic = ({\n    country,\n    countryMenuOpen,\n    disabled,\n    setCountry,\n    setCountryMenuOpen,\n}: {\n    country: Country;\n    countryMenuOpen: boolean;\n    disabled?: boolean;\n    setCountry: (value: Country) => void;\n    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;\n}) => {\n    const keyboardNavigatedCountryIndex = useRef(-1);\n    const dropdownMenuRef = useRef<HTMLElement | null>(null);\n    const [countrySearch, setCountrySearch] = useState('');\n    const searchInputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            if (disabled) {\n                setCountryMenuOpen(false);\n            } else {\n                // Focus the search input when dropdown opens\n                setTimeout(() => {\n                    searchInputRef.current?.focus();\n                }, 0);\n\n                return effectEventListener(window, 'click', () => {\n                    setCountryMenuOpen(false);\n                });\n            }\n        } else {\n            keyboardNavigatedCountryIndex.current = -1;\n            // Clear search when dropdown closes\n            setCountrySearch('');\n        }\n        return undefined;\n    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);\n\n    const onClick = useCallback(\n        (e: React.MouseEvent, index?: number) => {\n            if (!disabled) {\n                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                    // Same stale-index hazard as onKeydown: fall back to toggling the menu\n                    // when the tracked index no longer exists in the (filtered) list.\n                    const target = dropdownMenuRef.current.children[\n                        index !== undefined ? index : keyboardNavigatedCountryIndex.current\n                    ] as HTMLElement | undefined;\n\n                    if (target?.dataset.country) {\n                        setCountry(target.dataset.country as Country);\n                    } else {\n                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                    }\n                } else {\n                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                }\n            }\n            e.stopPropagation();\n        },\n        [disabled, setCountry, setCountryMenuOpen]\n    );\n\n    const dropdownMenuRefFunc = useCallback(\n        (ref: HTMLDivElement | null) => {\n            if (ref) {\n                dropdownMenuRef.current = ref;\n\n                // Use setTimeout to ensure the DOM is fully rendered\n                setTimeout(() => {\n                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);\n\n                    if (possibleTarget) {\n                        const target = possibleTarget as HTMLElement;\n\n                        // Use scrollIntoView to properly center the selected country\n                        target.scrollIntoView({\n                            behavior: 'instant',\n                            block: 'center',\n                        });\n\n                        // Set keyboard navigation index\n                        for (let i = 0; i < ref.children.length; i++) {\n                            if ((ref.children[i] as HTMLElement).dataset.country === country) {\n                                keyboardNavigatedCountryIndex.current = i;\n                                break;\n                            }\n                        }\n                    }\n                }, 0);\n            }\n        },\n        [country]\n    );\n\n    const onKeydown = useCallback<EventListener>(\n        (e: Event) => {\n            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                const children = dropdownMenuRef.current.children;\n\n                // The index can go stale (out of bounds) after the search input filters the\n                // list — hammer crashes uncaught here; guard instead of indexing blindly.\n                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {\n                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');\n                }\n\n                switch ((e as KeyboardEvent).key) {\n                    case 'ArrowDown':\n                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {\n                            keyboardNavigatedCountryIndex.current += 1;\n                        }\n                        break;\n                    case 'ArrowUp':\n                        if (keyboardNavigatedCountryIndex.current > 0) {\n                            keyboardNavigatedCountryIndex.current -= 1;\n                        }\n                        break;\n                    default:\n                        const searchKey = (e as KeyboardEvent).key;\n\n                        const keyIndex = Array.from(children).findIndex((child) => {\n                            const childText = (child as HTMLElement).textContent;\n                            if (childText) {\n                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());\n                            }\n                            return false;\n                        });\n\n                        if (keyIndex !== -1) {\n                            children[keyIndex].classList.add('keyboard_hover');\n                            children[keyIndex].scrollIntoView({\n                                behavior: 'instant',\n                                block: 'center',\n                            });\n                        }\n                        break;\n                }\n            }\n        },\n        [dropdownMenuRef, keyboardNavigatedCountryIndex]\n    );\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            return effectEventListener(document, 'keydown', onKeydown);\n        }\n        return undefined;\n    }, [countryMenuOpen, onKeydown]);\n\n    return {\n        countrySearch,\n        dropdownMenuRefFunc,\n        onClick,\n        searchInputRef,\n        setCountrySearch,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport countryMapping from 'i18n-iso-countries';\n// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)\nimport en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };\nimport { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\nimport { createPortal } from 'react-dom';\nimport {\n    Country,\n    getCountries,\n    getCountryCallingCode,\n    isPossiblePhoneNumber,\n    isSupportedCountry,\n    isValidPhoneNumber,\n} from 'react-phone-number-input';\nimport RPhoneInput from 'react-phone-number-input/input';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { CaretDown, CaretUp, Close } from '../Icons';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useDropdownLogic } from './useDropdownLogic';\n\ncountryMapping.registerLocale(en);\n\nconst countries = getCountries()\n    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))\n    .filter((country) => Boolean(country.name))\n    .sort((a, b) => (a.name as string).localeCompare(b.name as string));\n\ntype Props = {\n    /**\n     * Position of the country dropdown relative to the input.\n     * @default 'below'\n     */\n    dropdownPosition?: 'above' | 'below';\n    /**\n     * The initial country. (Decides the country calling code)\n     */\n    initialCountry?: Country;\n    /**\n     * The initial phone number. (The bit after the country calling code)\n     */\n    initialPhoneNumber?: string;\n    /**\n     * Optional callback for when the input loses focus.\n     */\n    onBlur?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the country calling code.\n     */\n    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<Country>` that indicates whether the phone number is valid.\n     */\n    onCountryChange?: Dispatch<SetStateAction<Country>>;\n    /**\n     * Optional callback for when the input gains focus.\n     */\n    onFocus?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the phone number.\n     */\n    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.\n     */\n    onValidChange?: Dispatch<SetStateAction<boolean>>;\n    placeholder?: string;\n    /**\n     * Whether to show the invalid state.\n     * This is so you can control the invalid visual from outside the component.\n     * Perfect for after trying to submit a form.\n     *\n     * To force an error state use `hasError`\n     */\n    showErrorIfInvalid?: boolean;\n    /**\n     * Position the country dropdown menu absolutely, relative to <body />.\n     * Useful in places like modals where the menu may get cut off\n     */\n    usePortalMenu?: boolean;\n    /**\n     * The validation mode to use.\n     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)\n     * - `loose`: The phone number must be possible. (Only checks number of digits)\n     *\n     * @default 'strict'\n     */\n    validation?: 'loose' | 'strict';\n} & FormLabelProps;\n\nexport const PhoneInput = (unfilteredProps: Props) => {\n    const [\n        formLabelProps,\n        {\n            disabled,\n            dropdownPosition = 'below',\n            initialCountry = 'US',\n            onCountryCallingCodeChange,\n            onCountryChange,\n            onPhoneNumberChange,\n            onValidChange,\n            placeholder = 'Enter Number',\n            showErrorIfInvalid,\n            usePortalMenu,\n            validation = 'strict',\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    if (nodeEnv === 'development') {\n        if (!isSupportedCountry(initialCountry)) {\n            throw new Error(`Country ${initialCountry} is not supported`);\n        }\n    }\n\n    const [country, defaultSetCountry] = useState(initialCountry);\n    const [countryMenuOpen, setCountryMenuOpen] = useState(false);\n    const countryCallingCode = useMemo(() => {\n        const countryCallingCode = getCountryCallingCode(country);\n        onCountryCallingCodeChange?.(countryCallingCode);\n        return countryCallingCode;\n    }, [country, onCountryCallingCodeChange]);\n\n    const initialPhoneNumber = useMemo(() => {\n        if (!props.initialPhoneNumber) {\n            return '';\n        }\n\n        if (!props.initialPhoneNumber.startsWith('+')) {\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            return `+${countryCallingCode}${props.initialPhoneNumber}`;\n        }\n\n        return props.initialPhoneNumber;\n\n        // Since it's only initial, rerunning is pointless\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);\n\n    const [isValid, setIsValid] = useState(false);\n    const isFormattingNumber = useRef(false);\n\n    const setPhoneNumber = useCallback(\n        (value: string = '') => {\n            if (isFormattingNumber.current) {\n                return;\n            }\n\n            isFormattingNumber.current = true;\n\n            defaultSetPhoneNumber(value);\n            onPhoneNumberChange?.(value);\n            setCountryMenuOpen(false);\n\n            let valid: boolean;\n\n            if (validation === 'strict') {\n                valid = isValidPhoneNumber(value);\n            } else {\n                valid = isPossiblePhoneNumber(value);\n            }\n\n            onValidChange?.(valid);\n\n            if (formLabelProps.hasError) {\n                valid = false;\n            } else if (!showErrorIfInvalid) {\n                valid = true;\n            }\n\n            setIsValid(valid);\n\n            setTimeout(() => {\n                isFormattingNumber.current = false;\n            }, 0);\n        },\n        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]\n    );\n\n    const setCountry = useCallback(\n        (value: Country) => {\n            defaultSetCountry(value);\n            onCountryChange?.(value);\n            setPhoneNumber('');\n            inputRef.current?.focus();\n        },\n        [onCountryChange, setPhoneNumber]\n    );\n\n    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({\n        country,\n        countryMenuOpen,\n        disabled,\n        setCountry,\n        setCountryMenuOpen,\n    });\n\n    const hasError = formLabelProps.hasError ?? !isValid;\n\n    const filteredCountries = useMemo(() => {\n        if (!countrySearch.trim()) {\n            return countries;\n        }\n\n        const searchTerm = countrySearch.toLowerCase();\n        return countries.filter(({ code, name }) => {\n            const countryName = name?.toLowerCase() || '';\n            const callingCode = getCountryCallingCode(code);\n            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);\n        });\n    }, [countrySearch]);\n\n    const countryList = useMemo(\n        () =>\n            filteredCountries.map(({ code, name }, index) => {\n                const isSelected = code === country;\n                return (\n                    <div\n                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}\n                        aria-selected={isSelected}\n                        className={cn(\n                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',\n                            'hover:bg-background-hover',\n                            'keyboard_hover:bg-background-hover',\n                            {\n                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':\n                                    isSelected,\n                            }\n                        )}\n                        data-country={code}\n                        key={code}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick(e, index);\n                        }}\n                        onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                setCountry(code);\n                                setCountryMenuOpen(false);\n                            }\n                        }}\n                        onTouchMove={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        onTouchStart={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        role=\"option\"\n                        tabIndex={0}\n                    >\n                        <ReactCountryFlag\n                            className=\"mr-sm !w-md select-none [-webkit-user-drag:none]\"\n                            countryCode={code}\n                            role=\"none\"\n                            svg\n                        />\n                        <span className=\"overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs\">{name}</span>(+\n                        {getCountryCallingCode(code)})\n                    </div>\n                );\n            }),\n        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const inputRowClasses = cn(\n        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',\n        {\n            // Error state\n            'border-border-critical': hasError && !countryMenuOpen && !disabled,\n            // Disabled state\n            'border-border-disabled bg-background-disabled': disabled,\n            // Country menu open state\n            'border-border-primary': countryMenuOpen && !disabled,\n            // Default hover and focus states\n            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,\n        }\n    );\n\n    // Calculate dropdown position for portal\n    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);\n\n    // Update dropdown position when menu opens and usePortalMenu is true\n    useMemo(() => {\n        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {\n            const rect = inputContainerRef.current.getBoundingClientRect();\n            setPortalPosition({\n                left: rect.left + window.scrollX,\n                top: rect.bottom + window.scrollY + 4, // 4px gap below input\n                width: rect.width,\n            });\n        } else {\n            setPortalPosition(null);\n        }\n    }, [countryMenuOpen, usePortalMenu]);\n\n    // Create the country dropdown content\n    // focus-convention: intentional — text field resting border (:focus-visible always matches a\n    // focused text input, mouse or keyboard). The outline-none is permitted because the border\n    // change is itself a visible focus indicator, so WCAG 2.4.7 is still met (SA-07/DS-98).\n    const countrySearchClasses =\n        'rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none';\n\n    const countryDropdownContent = (\n        <div\n            aria-label=\"Country list\"\n            className={cn(\n                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',\n                'rounded-input border border-border-secondary shadow-03',\n                {\n                    // When not using portal, position absolute relative to input\n                    'absolute left-0 right-0 z-[1]': !usePortalMenu,\n                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,\n                    // When using portal, position fixed and use high z-index\n                    'fixed z-[11111]': usePortalMenu,\n                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,\n                }\n            )}\n            role=\"listbox\"\n            style={\n                usePortalMenu && portalPosition\n                    ? {\n                          left: portalPosition.left,\n                          top: portalPosition.top,\n                          width: portalPosition.width,\n                      }\n                    : usePortalMenu\n                      ? {\n                            maxWidth: '400px',\n                            // Fallback positioning if we don't have position calculated yet\n                            minWidth: '300px',\n                        }\n                      : undefined\n            }\n        >\n            <div className=\"px-xs pb-xs\">\n                <input\n                    aria-label=\"Search countries\"\n                    className={countrySearchClasses}\n                    onBlur={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                    }}\n                    onChange={(e) => setCountrySearch(e.target.value)}\n                    onClick={(e) => e.stopPropagation()}\n                    onKeyDown={(e) => {\n                        if (e.key === 'Enter' && filteredCountries.length > 0) {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            setCountry(filteredCountries[0].code);\n                            setCountryMenuOpen(false);\n                        }\n                    }}\n                    onTouchStart={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                        searchInputRef.current?.blur();\n                    }}\n                    placeholder=\"Search countries...\"\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={countrySearch}\n                />\n            </div>\n            <div\n                className=\"flex-1 overflow-y-auto overflow-x-hidden\"\n                ref={dropdownMenuRefFunc}\n            >\n                {countryList}\n            </div>\n        </div>\n    );\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            hasError={hasError}\n        >\n            <div\n                aria-label=\"Phone input\"\n                className={inputRowClasses}\n                ref={inputContainerRef}\n            >\n                <button\n                    aria-label=\"Select country\"\n                    className={cn(\n                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',\n                        'hui-focus-visible-outline',\n                        {\n                            'bg-background-disabled [&>img]:opacity-40': disabled,\n                        }\n                    )}\n                    onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onClick(e);\n                    }}\n                    tabIndex={0}\n                    type=\"button\"\n                >\n                    <ReactCountryFlag\n                        className=\"!w-md select-none [-webkit-user-drag:none]\"\n                        countryCode={country}\n                        role=\"none\"\n                        svg\n                    />\n\n                    <div className=\"px-xs\">\n                        {countryMenuOpen ? (\n                            <CaretUp\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        ) : (\n                            <CaretDown\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        )}\n                    </div>\n                </button>\n                {countryMenuOpen &&\n                    (usePortalMenu && typeof document !== 'undefined'\n                        ? createPortal(\n                              countryDropdownContent,\n                              document.getElementById('hui-modal-target') || document.body\n                          )\n                        : countryDropdownContent)}\n                <div\n                    className={cn('mr-xs h-sm border-r border-border-secondary', {\n                        'border-border-disabled': disabled,\n                    })}\n                />\n                <BodyPrimary\n                    className=\"pr-xs\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    +{countryCallingCode}\n                </BodyPrimary>\n                <RPhoneInput\n                    aria-label=\"Phone number\"\n                    className={cn(\n                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',\n                        'placeholder:text-text-inactive',\n                        {\n                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,\n                        }\n                    )}\n                    country={country}\n                    disabled={disabled}\n                    onBlur={() => {\n                        props.onBlur?.();\n                    }}\n                    onChange={setPhoneNumber}\n                    onFocus={() => {\n                        setCountryMenuOpen(false);\n                        props.onFocus?.();\n                    }}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={phoneNumber}\n                />\n                {phoneNumber && phoneNumber.length > 0 && (\n                    <button\n                        aria-label=\"Clear phone number\"\n                        className={cn(\n                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',\n                            {\n                                'bg-background-disabled': disabled,\n                            }\n                        )}\n                        disabled={disabled}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            setPhoneNumber('');\n                            inputRef.current?.focus();\n                        }}\n                        tabIndex={0}\n                    >\n                        <Close\n                            color={disabled ? 'disabled' : 'primary'}\n                            size=\"sm\"\n                        />\n                    </button>\n                )}\n            </div>\n        </FormLabel>\n    );\n};\n\nexport * from 'react-phone-number-input';\nexport * from 'i18n-iso-countries';\nexport * from 'react-country-flag';\n"],"mappings":"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"}

package/PhoneInput-BXnkBME4.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput-BXnkBME4.d.mts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EAuaH;AAAA;;;;;;EA/ZG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"PhoneInput-BXnkBME4.d.mts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EA6aH;AAAA;;;;;;EAraG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}

package/PhoneInput-Bkrbrins.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput-Bkrbrins.d.cts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EAuaH;AAAA;;;;;;EA/ZG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"PhoneInput-Bkrbrins.d.cts","names":[],"sources":["../src/PhoneInput/PhoneInput.tsx"],"mappings":";;;;;KA8BK,KAAA;;AAbqF;;;EAkBtF,gBAAA;EAgBsC;;;EAZtC,cAAA,GAAiB,OAAA;EAgBC;;;EAZlB,kBAAA;EAwBgB;;;EApBhB,MAAA;EAZA;;;EAgBA,0BAAA,GAA6B,QAAA,CAAS,cAAA;EAJtC;;;EAQA,eAAA,GAAkB,QAAA,CAAS,cAAA,CAAe,OAAA;EAA1C;;;EAIA,OAAA;EAAA;;;EAIA,mBAAA,GAAsB,QAAA,CAAS,cAAA;EAI/B;;;EAAA,aAAA,GAAgB,QAAA,CAAS,cAAA;EACzB,WAAA;EAaA;;;;AASc;AAElB;;EAhBI,kBAAA;EAgB6C;;;;EAX7C,aAAA;EA6aH;AAAA;;;;;;EAraG,UAAA;AAAA,IACA,cAAA;AAAA,cAES,UAAA,GAAc,eAAA,EAAiB,KAAK,iCAAA,GAAA,CAAA,OAAA"}

package/PhoneInput-CUMPOSxJ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInput-CUMPOSxJ.cjs","names":["effectEventListener","countryMapping","en","extractFormLabelProps","nodeEnv","ReactCountryFlag","FormLabel","CaretUp","CaretDown","BodyPrimary","RPhoneInput","Close"],"sources":["../src/PhoneInput/useDropdownLogic.tsx","../src/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { Country } from 'react-phone-number-input';\n\nimport { effectEventListener } from '../utils/effectEventListener';\n\nexport const useDropdownLogic = ({\n    country,\n    countryMenuOpen,\n    disabled,\n    setCountry,\n    setCountryMenuOpen,\n}: {\n    country: Country;\n    countryMenuOpen: boolean;\n    disabled?: boolean;\n    setCountry: (value: Country) => void;\n    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;\n}) => {\n    const keyboardNavigatedCountryIndex = useRef(-1);\n    const dropdownMenuRef = useRef<HTMLElement | null>(null);\n    const [countrySearch, setCountrySearch] = useState('');\n    const searchInputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            if (disabled) {\n                setCountryMenuOpen(false);\n            } else {\n                // Focus the search input when dropdown opens\n                setTimeout(() => {\n                    searchInputRef.current?.focus();\n                }, 0);\n\n                return effectEventListener(window, 'click', () => {\n                    setCountryMenuOpen(false);\n                });\n            }\n        } else {\n            keyboardNavigatedCountryIndex.current = -1;\n            // Clear search when dropdown closes\n            setCountrySearch('');\n        }\n        return undefined;\n    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);\n\n    const onClick = useCallback(\n        (e: React.MouseEvent, index?: number) => {\n            if (!disabled) {\n                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                    // Same stale-index hazard as onKeydown: fall back to toggling the menu\n                    // when the tracked index no longer exists in the (filtered) list.\n                    const target = dropdownMenuRef.current.children[\n                        index !== undefined ? index : keyboardNavigatedCountryIndex.current\n                    ] as HTMLElement | undefined;\n\n                    if (target?.dataset.country) {\n                        setCountry(target.dataset.country as Country);\n                    } else {\n                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                    }\n                } else {\n                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                }\n            }\n            e.stopPropagation();\n        },\n        [disabled, setCountry, setCountryMenuOpen]\n    );\n\n    const dropdownMenuRefFunc = useCallback(\n        (ref: HTMLDivElement | null) => {\n            if (ref) {\n                dropdownMenuRef.current = ref;\n\n                // Use setTimeout to ensure the DOM is fully rendered\n                setTimeout(() => {\n                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);\n\n                    if (possibleTarget) {\n                        const target = possibleTarget as HTMLElement;\n\n                        // Use scrollIntoView to properly center the selected country\n                        target.scrollIntoView({\n                            behavior: 'instant',\n                            block: 'center',\n                        });\n\n                        // Set keyboard navigation index\n                        for (let i = 0; i < ref.children.length; i++) {\n                            if ((ref.children[i] as HTMLElement).dataset.country === country) {\n                                keyboardNavigatedCountryIndex.current = i;\n                                break;\n                            }\n                        }\n                    }\n                }, 0);\n            }\n        },\n        [country]\n    );\n\n    const onKeydown = useCallback<EventListener>(\n        (e: Event) => {\n            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                const children = dropdownMenuRef.current.children;\n\n                // The index can go stale (out of bounds) after the search input filters the\n                // list — hammer crashes uncaught here; guard instead of indexing blindly.\n                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {\n                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');\n                }\n\n                switch ((e as KeyboardEvent).key) {\n                    case 'ArrowDown':\n                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {\n                            keyboardNavigatedCountryIndex.current += 1;\n                        }\n                        break;\n                    case 'ArrowUp':\n                        if (keyboardNavigatedCountryIndex.current > 0) {\n                            keyboardNavigatedCountryIndex.current -= 1;\n                        }\n                        break;\n                    default:\n                        const searchKey = (e as KeyboardEvent).key;\n\n                        const keyIndex = Array.from(children).findIndex((child) => {\n                            const childText = (child as HTMLElement).textContent;\n                            if (childText) {\n                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());\n                            }\n                            return false;\n                        });\n\n                        if (keyIndex !== -1) {\n                            children[keyIndex].classList.add('keyboard_hover');\n                            children[keyIndex].scrollIntoView({\n                                behavior: 'instant',\n                                block: 'center',\n                            });\n                        }\n                        break;\n                }\n            }\n        },\n        [dropdownMenuRef, keyboardNavigatedCountryIndex]\n    );\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            return effectEventListener(document, 'keydown', onKeydown);\n        }\n        return undefined;\n    }, [countryMenuOpen, onKeydown]);\n\n    return {\n        countrySearch,\n        dropdownMenuRefFunc,\n        onClick,\n        searchInputRef,\n        setCountrySearch,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport countryMapping from 'i18n-iso-countries';\n// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)\nimport en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };\nimport { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\nimport { createPortal } from 'react-dom';\nimport {\n    Country,\n    getCountries,\n    getCountryCallingCode,\n    isPossiblePhoneNumber,\n    isSupportedCountry,\n    isValidPhoneNumber,\n} from 'react-phone-number-input';\nimport RPhoneInput from 'react-phone-number-input/input';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { CaretDown, CaretUp, Close } from '../Icons';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useDropdownLogic } from './useDropdownLogic';\n\ncountryMapping.registerLocale(en);\n\nconst countries = getCountries()\n    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))\n    .filter((country) => Boolean(country.name))\n    .sort((a, b) => (a.name as string).localeCompare(b.name as string));\n\ntype Props = {\n    /**\n     * Position of the country dropdown relative to the input.\n     * @default 'below'\n     */\n    dropdownPosition?: 'above' | 'below';\n    /**\n     * The initial country. (Decides the country calling code)\n     */\n    initialCountry?: Country;\n    /**\n     * The initial phone number. (The bit after the country calling code)\n     */\n    initialPhoneNumber?: string;\n    /**\n     * Optional callback for when the input loses focus.\n     */\n    onBlur?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the country calling code.\n     */\n    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<Country>` that indicates whether the phone number is valid.\n     */\n    onCountryChange?: Dispatch<SetStateAction<Country>>;\n    /**\n     * Optional callback for when the input gains focus.\n     */\n    onFocus?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the phone number.\n     */\n    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.\n     */\n    onValidChange?: Dispatch<SetStateAction<boolean>>;\n    placeholder?: string;\n    /**\n     * Whether to show the invalid state.\n     * This is so you can control the invalid visual from outside the component.\n     * Perfect for after trying to submit a form.\n     *\n     * To force an error state use `hasError`\n     */\n    showErrorIfInvalid?: boolean;\n    /**\n     * Position the country dropdown menu absolutely, relative to <body />.\n     * Useful in places like modals where the menu may get cut off\n     */\n    usePortalMenu?: boolean;\n    /**\n     * The validation mode to use.\n     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)\n     * - `loose`: The phone number must be possible. (Only checks number of digits)\n     *\n     * @default 'strict'\n     */\n    validation?: 'loose' | 'strict';\n} & FormLabelProps;\n\nexport const PhoneInput = (unfilteredProps: Props) => {\n    const [\n        formLabelProps,\n        {\n            disabled,\n            dropdownPosition = 'below',\n            initialCountry = 'US',\n            onCountryCallingCodeChange,\n            onCountryChange,\n            onPhoneNumberChange,\n            onValidChange,\n            placeholder = 'Enter Number',\n            showErrorIfInvalid,\n            usePortalMenu,\n            validation = 'strict',\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    if (nodeEnv === 'development') {\n        if (!isSupportedCountry(initialCountry)) {\n            throw new Error(`Country ${initialCountry} is not supported`);\n        }\n    }\n\n    const [country, defaultSetCountry] = useState(initialCountry);\n    const [countryMenuOpen, setCountryMenuOpen] = useState(false);\n    const countryCallingCode = useMemo(() => {\n        const countryCallingCode = getCountryCallingCode(country);\n        onCountryCallingCodeChange?.(countryCallingCode);\n        return countryCallingCode;\n    }, [country, onCountryCallingCodeChange]);\n\n    const initialPhoneNumber = useMemo(() => {\n        if (!props.initialPhoneNumber) {\n            return '';\n        }\n\n        if (!props.initialPhoneNumber.startsWith('+')) {\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            return `+${countryCallingCode}${props.initialPhoneNumber}`;\n        }\n\n        return props.initialPhoneNumber;\n\n        // Since it's only initial, rerunning is pointless\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);\n\n    const [isValid, setIsValid] = useState(false);\n    const isFormattingNumber = useRef(false);\n\n    const setPhoneNumber = useCallback(\n        (value: string = '') => {\n            if (isFormattingNumber.current) {\n                return;\n            }\n\n            isFormattingNumber.current = true;\n\n            defaultSetPhoneNumber(value);\n            onPhoneNumberChange?.(value);\n            setCountryMenuOpen(false);\n\n            let valid: boolean;\n\n            if (validation === 'strict') {\n                valid = isValidPhoneNumber(value);\n            } else {\n                valid = isPossiblePhoneNumber(value);\n            }\n\n            onValidChange?.(valid);\n\n            if (formLabelProps.hasError) {\n                valid = false;\n            } else if (!showErrorIfInvalid) {\n                valid = true;\n            }\n\n            setIsValid(valid);\n\n            setTimeout(() => {\n                isFormattingNumber.current = false;\n            }, 0);\n        },\n        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]\n    );\n\n    const setCountry = useCallback(\n        (value: Country) => {\n            defaultSetCountry(value);\n            onCountryChange?.(value);\n            setPhoneNumber('');\n            inputRef.current?.focus();\n        },\n        [onCountryChange, setPhoneNumber]\n    );\n\n    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({\n        country,\n        countryMenuOpen,\n        disabled,\n        setCountry,\n        setCountryMenuOpen,\n    });\n\n    const hasError = formLabelProps.hasError ?? !isValid;\n\n    const filteredCountries = useMemo(() => {\n        if (!countrySearch.trim()) {\n            return countries;\n        }\n\n        const searchTerm = countrySearch.toLowerCase();\n        return countries.filter(({ code, name }) => {\n            const countryName = name?.toLowerCase() || '';\n            const callingCode = getCountryCallingCode(code);\n            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);\n        });\n    }, [countrySearch]);\n\n    const countryList = useMemo(\n        () =>\n            filteredCountries.map(({ code, name }, index) => {\n                const isSelected = code === country;\n                return (\n                    <div\n                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}\n                        aria-selected={isSelected}\n                        className={cn(\n                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',\n                            'hover:bg-background-hover',\n                            'keyboard_hover:bg-background-hover',\n                            {\n                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':\n                                    isSelected,\n                            }\n                        )}\n                        data-country={code}\n                        key={code}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick(e, index);\n                        }}\n                        onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                setCountry(code);\n                                setCountryMenuOpen(false);\n                            }\n                        }}\n                        onTouchMove={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        onTouchStart={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        role=\"option\"\n                        tabIndex={0}\n                    >\n                        <ReactCountryFlag\n                            className=\"mr-sm !w-md select-none [-webkit-user-drag:none]\"\n                            countryCode={code}\n                            role=\"none\"\n                            svg\n                        />\n                        <span className=\"overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs\">{name}</span>(+\n                        {getCountryCallingCode(code)})\n                    </div>\n                );\n            }),\n        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const inputRowClasses = cn(\n        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',\n        {\n            // Error state\n            'border-border-critical': hasError && !countryMenuOpen && !disabled,\n            // Disabled state\n            'border-border-disabled bg-background-disabled': disabled,\n            // Country menu open state\n            'border-border-primary': countryMenuOpen && !disabled,\n            // Default hover and focus states\n            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,\n        }\n    );\n\n    // Calculate dropdown position for portal\n    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);\n\n    // Update dropdown position when menu opens and usePortalMenu is true\n    useMemo(() => {\n        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {\n            const rect = inputContainerRef.current.getBoundingClientRect();\n            setPortalPosition({\n                left: rect.left + window.scrollX,\n                top: rect.bottom + window.scrollY + 4, // 4px gap below input\n                width: rect.width,\n            });\n        } else {\n            setPortalPosition(null);\n        }\n    }, [countryMenuOpen, usePortalMenu]);\n\n    // Create the country dropdown content\n    const countryDropdownContent = (\n        <div\n            aria-label=\"Country list\"\n            className={cn(\n                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',\n                'rounded-input border border-border-secondary shadow-03',\n                {\n                    // When not using portal, position absolute relative to input\n                    'absolute left-0 right-0 z-[1]': !usePortalMenu,\n                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,\n                    // When using portal, position fixed and use high z-index\n                    'fixed z-[11111]': usePortalMenu,\n                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,\n                }\n            )}\n            role=\"listbox\"\n            style={\n                usePortalMenu && portalPosition\n                    ? {\n                          left: portalPosition.left,\n                          top: portalPosition.top,\n                          width: portalPosition.width,\n                      }\n                    : usePortalMenu\n                      ? {\n                            maxWidth: '400px',\n                            // Fallback positioning if we don't have position calculated yet\n                            minWidth: '300px',\n                        }\n                      : undefined\n            }\n        >\n            <div className=\"px-xs pb-xs\">\n                <input\n                    aria-label=\"Search countries\"\n                    className=\"rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none\"\n                    onBlur={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                    }}\n                    onChange={(e) => setCountrySearch(e.target.value)}\n                    onClick={(e) => e.stopPropagation()}\n                    onKeyDown={(e) => {\n                        if (e.key === 'Enter' && filteredCountries.length > 0) {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            setCountry(filteredCountries[0].code);\n                            setCountryMenuOpen(false);\n                        }\n                    }}\n                    onTouchStart={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                        searchInputRef.current?.blur();\n                    }}\n                    placeholder=\"Search countries...\"\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={countrySearch}\n                />\n            </div>\n            <div\n                className=\"flex-1 overflow-y-auto overflow-x-hidden\"\n                ref={dropdownMenuRefFunc}\n            >\n                {countryList}\n            </div>\n        </div>\n    );\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            hasError={hasError}\n        >\n            <div\n                aria-label=\"Phone input\"\n                className={inputRowClasses}\n                ref={inputContainerRef}\n            >\n                <button\n                    aria-label=\"Select country\"\n                    className={cn(\n                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',\n                        'hui-focus-visible-outline',\n                        {\n                            'bg-background-disabled [&>img]:opacity-40': disabled,\n                        }\n                    )}\n                    onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onClick(e);\n                    }}\n                    tabIndex={0}\n                    type=\"button\"\n                >\n                    <ReactCountryFlag\n                        className=\"!w-md select-none [-webkit-user-drag:none]\"\n                        countryCode={country}\n                        role=\"none\"\n                        svg\n                    />\n\n                    <div className=\"px-xs\">\n                        {countryMenuOpen ? (\n                            <CaretUp\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        ) : (\n                            <CaretDown\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        )}\n                    </div>\n                </button>\n                {countryMenuOpen &&\n                    (usePortalMenu && typeof document !== 'undefined'\n                        ? createPortal(\n                              countryDropdownContent,\n                              document.getElementById('hui-modal-target') || document.body\n                          )\n                        : countryDropdownContent)}\n                <div\n                    className={cn('mr-xs h-sm border-r border-border-secondary', {\n                        'border-border-disabled': disabled,\n                    })}\n                />\n                <BodyPrimary\n                    className=\"pr-xs\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    +{countryCallingCode}\n                </BodyPrimary>\n                <RPhoneInput\n                    aria-label=\"Phone number\"\n                    className={cn(\n                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',\n                        'placeholder:text-text-inactive',\n                        {\n                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,\n                        }\n                    )}\n                    country={country}\n                    disabled={disabled}\n                    onBlur={() => {\n                        props.onBlur?.();\n                    }}\n                    onChange={setPhoneNumber}\n                    onFocus={() => {\n                        setCountryMenuOpen(false);\n                        props.onFocus?.();\n                    }}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={phoneNumber}\n                />\n                {phoneNumber && phoneNumber.length > 0 && (\n                    <button\n                        aria-label=\"Clear phone number\"\n                        className={cn(\n                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',\n                            {\n                                'bg-background-disabled': disabled,\n                            }\n                        )}\n                        disabled={disabled}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            setPhoneNumber('');\n                            inputRef.current?.focus();\n                        }}\n                        tabIndex={0}\n                    >\n                        <Close\n                            color={disabled ? 'disabled' : 'primary'}\n                            size=\"sm\"\n                        />\n                    </button>\n                )}\n            </div>\n        </FormLabel>\n    );\n};\n\nexport * from 'react-phone-number-input';\nexport * from 'i18n-iso-countries';\nexport * from 'react-country-flag';\n"],"mappings":"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"}
+{"version":3,"file":"PhoneInput-CUMPOSxJ.cjs","names":["effectEventListener","countryMapping","en","extractFormLabelProps","nodeEnv","ReactCountryFlag","FormLabel","CaretUp","CaretDown","BodyPrimary","RPhoneInput","Close"],"sources":["../src/PhoneInput/useDropdownLogic.tsx","../src/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';\nimport { Country } from 'react-phone-number-input';\n\nimport { effectEventListener } from '../utils/effectEventListener';\n\nexport const useDropdownLogic = ({\n    country,\n    countryMenuOpen,\n    disabled,\n    setCountry,\n    setCountryMenuOpen,\n}: {\n    country: Country;\n    countryMenuOpen: boolean;\n    disabled?: boolean;\n    setCountry: (value: Country) => void;\n    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;\n}) => {\n    const keyboardNavigatedCountryIndex = useRef(-1);\n    const dropdownMenuRef = useRef<HTMLElement | null>(null);\n    const [countrySearch, setCountrySearch] = useState('');\n    const searchInputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            if (disabled) {\n                setCountryMenuOpen(false);\n            } else {\n                // Focus the search input when dropdown opens\n                setTimeout(() => {\n                    searchInputRef.current?.focus();\n                }, 0);\n\n                return effectEventListener(window, 'click', () => {\n                    setCountryMenuOpen(false);\n                });\n            }\n        } else {\n            keyboardNavigatedCountryIndex.current = -1;\n            // Clear search when dropdown closes\n            setCountrySearch('');\n        }\n        return undefined;\n    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);\n\n    const onClick = useCallback(\n        (e: React.MouseEvent, index?: number) => {\n            if (!disabled) {\n                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                    // Same stale-index hazard as onKeydown: fall back to toggling the menu\n                    // when the tracked index no longer exists in the (filtered) list.\n                    const target = dropdownMenuRef.current.children[\n                        index !== undefined ? index : keyboardNavigatedCountryIndex.current\n                    ] as HTMLElement | undefined;\n\n                    if (target?.dataset.country) {\n                        setCountry(target.dataset.country as Country);\n                    } else {\n                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                    }\n                } else {\n                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);\n                }\n            }\n            e.stopPropagation();\n        },\n        [disabled, setCountry, setCountryMenuOpen]\n    );\n\n    const dropdownMenuRefFunc = useCallback(\n        (ref: HTMLDivElement | null) => {\n            if (ref) {\n                dropdownMenuRef.current = ref;\n\n                // Use setTimeout to ensure the DOM is fully rendered\n                setTimeout(() => {\n                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);\n\n                    if (possibleTarget) {\n                        const target = possibleTarget as HTMLElement;\n\n                        // Use scrollIntoView to properly center the selected country\n                        target.scrollIntoView({\n                            behavior: 'instant',\n                            block: 'center',\n                        });\n\n                        // Set keyboard navigation index\n                        for (let i = 0; i < ref.children.length; i++) {\n                            if ((ref.children[i] as HTMLElement).dataset.country === country) {\n                                keyboardNavigatedCountryIndex.current = i;\n                                break;\n                            }\n                        }\n                    }\n                }, 0);\n            }\n        },\n        [country]\n    );\n\n    const onKeydown = useCallback<EventListener>(\n        (e: Event) => {\n            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {\n                const children = dropdownMenuRef.current.children;\n\n                // The index can go stale (out of bounds) after the search input filters the\n                // list — hammer crashes uncaught here; guard instead of indexing blindly.\n                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {\n                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');\n                }\n\n                switch ((e as KeyboardEvent).key) {\n                    case 'ArrowDown':\n                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {\n                            keyboardNavigatedCountryIndex.current += 1;\n                        }\n                        break;\n                    case 'ArrowUp':\n                        if (keyboardNavigatedCountryIndex.current > 0) {\n                            keyboardNavigatedCountryIndex.current -= 1;\n                        }\n                        break;\n                    default:\n                        const searchKey = (e as KeyboardEvent).key;\n\n                        const keyIndex = Array.from(children).findIndex((child) => {\n                            const childText = (child as HTMLElement).textContent;\n                            if (childText) {\n                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());\n                            }\n                            return false;\n                        });\n\n                        if (keyIndex !== -1) {\n                            children[keyIndex].classList.add('keyboard_hover');\n                            children[keyIndex].scrollIntoView({\n                                behavior: 'instant',\n                                block: 'center',\n                            });\n                        }\n                        break;\n                }\n            }\n        },\n        [dropdownMenuRef, keyboardNavigatedCountryIndex]\n    );\n\n    useEffect(() => {\n        if (countryMenuOpen) {\n            return effectEventListener(document, 'keydown', onKeydown);\n        }\n        return undefined;\n    }, [countryMenuOpen, onKeydown]);\n\n    return {\n        countrySearch,\n        dropdownMenuRefFunc,\n        onClick,\n        searchInputRef,\n        setCountrySearch,\n    };\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport countryMapping from 'i18n-iso-countries';\n// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)\nimport en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };\nimport { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\nimport { createPortal } from 'react-dom';\nimport {\n    Country,\n    getCountries,\n    getCountryCallingCode,\n    isPossiblePhoneNumber,\n    isSupportedCountry,\n    isValidPhoneNumber,\n} from 'react-phone-number-input';\nimport RPhoneInput from 'react-phone-number-input/input';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { CaretDown, CaretUp, Close } from '../Icons';\nimport { BodyPrimary } from '../Typography/Text/Text';\nimport { nodeEnv } from '../utils/nodeEnv';\nimport { useDropdownLogic } from './useDropdownLogic';\n\ncountryMapping.registerLocale(en);\n\nconst countries = getCountries()\n    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))\n    .filter((country) => Boolean(country.name))\n    .sort((a, b) => (a.name as string).localeCompare(b.name as string));\n\ntype Props = {\n    /**\n     * Position of the country dropdown relative to the input.\n     * @default 'below'\n     */\n    dropdownPosition?: 'above' | 'below';\n    /**\n     * The initial country. (Decides the country calling code)\n     */\n    initialCountry?: Country;\n    /**\n     * The initial phone number. (The bit after the country calling code)\n     */\n    initialPhoneNumber?: string;\n    /**\n     * Optional callback for when the input loses focus.\n     */\n    onBlur?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the country calling code.\n     */\n    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<Country>` that indicates whether the phone number is valid.\n     */\n    onCountryChange?: Dispatch<SetStateAction<Country>>;\n    /**\n     * Optional callback for when the input gains focus.\n     */\n    onFocus?: () => void;\n    /**\n     * The setter of a `useState<string>` that indicates the phone number.\n     */\n    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;\n    /**\n     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.\n     */\n    onValidChange?: Dispatch<SetStateAction<boolean>>;\n    placeholder?: string;\n    /**\n     * Whether to show the invalid state.\n     * This is so you can control the invalid visual from outside the component.\n     * Perfect for after trying to submit a form.\n     *\n     * To force an error state use `hasError`\n     */\n    showErrorIfInvalid?: boolean;\n    /**\n     * Position the country dropdown menu absolutely, relative to <body />.\n     * Useful in places like modals where the menu may get cut off\n     */\n    usePortalMenu?: boolean;\n    /**\n     * The validation mode to use.\n     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)\n     * - `loose`: The phone number must be possible. (Only checks number of digits)\n     *\n     * @default 'strict'\n     */\n    validation?: 'loose' | 'strict';\n} & FormLabelProps;\n\nexport const PhoneInput = (unfilteredProps: Props) => {\n    const [\n        formLabelProps,\n        {\n            disabled,\n            dropdownPosition = 'below',\n            initialCountry = 'US',\n            onCountryCallingCodeChange,\n            onCountryChange,\n            onPhoneNumberChange,\n            onValidChange,\n            placeholder = 'Enter Number',\n            showErrorIfInvalid,\n            usePortalMenu,\n            validation = 'strict',\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    if (nodeEnv === 'development') {\n        if (!isSupportedCountry(initialCountry)) {\n            throw new Error(`Country ${initialCountry} is not supported`);\n        }\n    }\n\n    const [country, defaultSetCountry] = useState(initialCountry);\n    const [countryMenuOpen, setCountryMenuOpen] = useState(false);\n    const countryCallingCode = useMemo(() => {\n        const countryCallingCode = getCountryCallingCode(country);\n        onCountryCallingCodeChange?.(countryCallingCode);\n        return countryCallingCode;\n    }, [country, onCountryCallingCodeChange]);\n\n    const initialPhoneNumber = useMemo(() => {\n        if (!props.initialPhoneNumber) {\n            return '';\n        }\n\n        if (!props.initialPhoneNumber.startsWith('+')) {\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n            return `+${countryCallingCode}${props.initialPhoneNumber}`;\n        }\n\n        return props.initialPhoneNumber;\n\n        // Since it's only initial, rerunning is pointless\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);\n\n    const [isValid, setIsValid] = useState(false);\n    const isFormattingNumber = useRef(false);\n\n    const setPhoneNumber = useCallback(\n        (value: string = '') => {\n            if (isFormattingNumber.current) {\n                return;\n            }\n\n            isFormattingNumber.current = true;\n\n            defaultSetPhoneNumber(value);\n            onPhoneNumberChange?.(value);\n            setCountryMenuOpen(false);\n\n            let valid: boolean;\n\n            if (validation === 'strict') {\n                valid = isValidPhoneNumber(value);\n            } else {\n                valid = isPossiblePhoneNumber(value);\n            }\n\n            onValidChange?.(valid);\n\n            if (formLabelProps.hasError) {\n                valid = false;\n            } else if (!showErrorIfInvalid) {\n                valid = true;\n            }\n\n            setIsValid(valid);\n\n            setTimeout(() => {\n                isFormattingNumber.current = false;\n            }, 0);\n        },\n        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]\n    );\n\n    const setCountry = useCallback(\n        (value: Country) => {\n            defaultSetCountry(value);\n            onCountryChange?.(value);\n            setPhoneNumber('');\n            inputRef.current?.focus();\n        },\n        [onCountryChange, setPhoneNumber]\n    );\n\n    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({\n        country,\n        countryMenuOpen,\n        disabled,\n        setCountry,\n        setCountryMenuOpen,\n    });\n\n    const hasError = formLabelProps.hasError ?? !isValid;\n\n    const filteredCountries = useMemo(() => {\n        if (!countrySearch.trim()) {\n            return countries;\n        }\n\n        const searchTerm = countrySearch.toLowerCase();\n        return countries.filter(({ code, name }) => {\n            const countryName = name?.toLowerCase() || '';\n            const callingCode = getCountryCallingCode(code);\n            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);\n        });\n    }, [countrySearch]);\n\n    const countryList = useMemo(\n        () =>\n            filteredCountries.map(({ code, name }, index) => {\n                const isSelected = code === country;\n                return (\n                    <div\n                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}\n                        aria-selected={isSelected}\n                        className={cn(\n                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',\n                            'hover:bg-background-hover',\n                            'keyboard_hover:bg-background-hover',\n                            {\n                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':\n                                    isSelected,\n                            }\n                        )}\n                        data-country={code}\n                        key={code}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            onClick(e, index);\n                        }}\n                        onKeyDown={(e) => {\n                            if (e.key === 'Enter' || e.key === ' ') {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                setCountry(code);\n                                setCountryMenuOpen(false);\n                            }\n                        }}\n                        onTouchMove={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        onTouchStart={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                        }}\n                        role=\"option\"\n                        tabIndex={0}\n                    >\n                        <ReactCountryFlag\n                            className=\"mr-sm !w-md select-none [-webkit-user-drag:none]\"\n                            countryCode={code}\n                            role=\"none\"\n                            svg\n                        />\n                        <span className=\"overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs\">{name}</span>(+\n                        {getCountryCallingCode(code)})\n                    </div>\n                );\n            }),\n        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n\n    const inputRowClasses = cn(\n        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',\n        {\n            // Error state\n            'border-border-critical': hasError && !countryMenuOpen && !disabled,\n            // Disabled state\n            'border-border-disabled bg-background-disabled': disabled,\n            // Country menu open state\n            'border-border-primary': countryMenuOpen && !disabled,\n            // Default hover and focus states\n            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,\n        }\n    );\n\n    // Calculate dropdown position for portal\n    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);\n\n    // Update dropdown position when menu opens and usePortalMenu is true\n    useMemo(() => {\n        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {\n            const rect = inputContainerRef.current.getBoundingClientRect();\n            setPortalPosition({\n                left: rect.left + window.scrollX,\n                top: rect.bottom + window.scrollY + 4, // 4px gap below input\n                width: rect.width,\n            });\n        } else {\n            setPortalPosition(null);\n        }\n    }, [countryMenuOpen, usePortalMenu]);\n\n    // Create the country dropdown content\n    // focus-convention: intentional — text field resting border (:focus-visible always matches a\n    // focused text input, mouse or keyboard). The outline-none is permitted because the border\n    // change is itself a visible focus indicator, so WCAG 2.4.7 is still met (SA-07/DS-98).\n    const countrySearchClasses =\n        'rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none';\n\n    const countryDropdownContent = (\n        <div\n            aria-label=\"Country list\"\n            className={cn(\n                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',\n                'rounded-input border border-border-secondary shadow-03',\n                {\n                    // When not using portal, position absolute relative to input\n                    'absolute left-0 right-0 z-[1]': !usePortalMenu,\n                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,\n                    // When using portal, position fixed and use high z-index\n                    'fixed z-[11111]': usePortalMenu,\n                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,\n                }\n            )}\n            role=\"listbox\"\n            style={\n                usePortalMenu && portalPosition\n                    ? {\n                          left: portalPosition.left,\n                          top: portalPosition.top,\n                          width: portalPosition.width,\n                      }\n                    : usePortalMenu\n                      ? {\n                            maxWidth: '400px',\n                            // Fallback positioning if we don't have position calculated yet\n                            minWidth: '300px',\n                        }\n                      : undefined\n            }\n        >\n            <div className=\"px-xs pb-xs\">\n                <input\n                    aria-label=\"Search countries\"\n                    className={countrySearchClasses}\n                    onBlur={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                    }}\n                    onChange={(e) => setCountrySearch(e.target.value)}\n                    onClick={(e) => e.stopPropagation()}\n                    onKeyDown={(e) => {\n                        if (e.key === 'Enter' && filteredCountries.length > 0) {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            setCountry(filteredCountries[0].code);\n                            setCountryMenuOpen(false);\n                        }\n                    }}\n                    onTouchStart={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault();\n                        searchInputRef.current?.blur();\n                    }}\n                    placeholder=\"Search countries...\"\n                    ref={searchInputRef}\n                    type=\"text\"\n                    value={countrySearch}\n                />\n            </div>\n            <div\n                className=\"flex-1 overflow-y-auto overflow-x-hidden\"\n                ref={dropdownMenuRefFunc}\n            >\n                {countryList}\n            </div>\n        </div>\n    );\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            hasError={hasError}\n        >\n            <div\n                aria-label=\"Phone input\"\n                className={inputRowClasses}\n                ref={inputContainerRef}\n            >\n                <button\n                    aria-label=\"Select country\"\n                    className={cn(\n                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',\n                        'hui-focus-visible-outline',\n                        {\n                            'bg-background-disabled [&>img]:opacity-40': disabled,\n                        }\n                    )}\n                    onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onClick(e);\n                    }}\n                    tabIndex={0}\n                    type=\"button\"\n                >\n                    <ReactCountryFlag\n                        className=\"!w-md select-none [-webkit-user-drag:none]\"\n                        countryCode={country}\n                        role=\"none\"\n                        svg\n                    />\n\n                    <div className=\"px-xs\">\n                        {countryMenuOpen ? (\n                            <CaretUp\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        ) : (\n                            <CaretDown\n                                color={disabled ? 'disabled' : 'primary'}\n                                onClick={(e) => {\n                                    e.stopPropagation();\n                                    e.preventDefault();\n                                    onClick(e);\n                                }}\n                                size=\"xs\"\n                            />\n                        )}\n                    </div>\n                </button>\n                {countryMenuOpen &&\n                    (usePortalMenu && typeof document !== 'undefined'\n                        ? createPortal(\n                              countryDropdownContent,\n                              document.getElementById('hui-modal-target') || document.body\n                          )\n                        : countryDropdownContent)}\n                <div\n                    className={cn('mr-xs h-sm border-r border-border-secondary', {\n                        'border-border-disabled': disabled,\n                    })}\n                />\n                <BodyPrimary\n                    className=\"pr-xs\"\n                    color={disabled ? 'disabled' : 'primary'}\n                >\n                    +{countryCallingCode}\n                </BodyPrimary>\n                <RPhoneInput\n                    aria-label=\"Phone number\"\n                    className={cn(\n                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',\n                        'placeholder:text-text-inactive',\n                        {\n                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,\n                        }\n                    )}\n                    country={country}\n                    disabled={disabled}\n                    onBlur={() => {\n                        props.onBlur?.();\n                    }}\n                    onChange={setPhoneNumber}\n                    onFocus={() => {\n                        setCountryMenuOpen(false);\n                        props.onFocus?.();\n                    }}\n                    placeholder={placeholder}\n                    ref={inputRef}\n                    value={phoneNumber}\n                />\n                {phoneNumber && phoneNumber.length > 0 && (\n                    <button\n                        aria-label=\"Clear phone number\"\n                        className={cn(\n                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',\n                            {\n                                'bg-background-disabled': disabled,\n                            }\n                        )}\n                        disabled={disabled}\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            e.preventDefault();\n                            setPhoneNumber('');\n                            inputRef.current?.focus();\n                        }}\n                        tabIndex={0}\n                    >\n                        <Close\n                            color={disabled ? 'disabled' : 'primary'}\n                            size=\"sm\"\n                        />\n                    </button>\n                )}\n            </div>\n        </FormLabel>\n    );\n};\n\nexport * from 'react-phone-number-input';\nexport * from 'i18n-iso-countries';\nexport * from 'react-country-flag';\n"],"mappings":"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"}

package/{ProgressCircle-BC81D9sU.cjs → ProgressCircle-B6R4dxoV.cjs}

@@ -172,7 +172,7 @@ const ProgressCircle = ({ "aria-label": ariaLabel = "Progress Circle", centerIco
 					x: iconViewBoxOffset,
 					y: iconViewBoxOffset,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "flex h-full w-full animate-progress-icon-fade-in items-center justify-center",
+						className: "animate-progress-icon-fade-in flex h-full w-full items-center justify-center",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckCircle.CheckCircle, {
 							color: "success",
 							size: "md",
@@ -193,4 +193,4 @@ Object.defineProperty(exports, "ProgressCircle", {
 	}
 });
 
-//# sourceMappingURL=ProgressCircle-BC81D9sU.cjs.map
+//# sourceMappingURL=ProgressCircle-B6R4dxoV.cjs.map